javascript - angular ADVARSEL: rengjøring av HTML fjernet noe innhold?
Hei, jeg prøver å vise en søkefelt i en modal ved å skrive HTML-en i modalinnholdet slik:
onClick() {
const dialogRef = this.modal.alert()
.size('lg')
.showClose(true)
.title('A simple Alert style modal window')
.body(`
<div class="card container-fluid col-xs-10">
<div class="card-block">
<div class="form-group row">
<div class="col-5">
<ng2-completer class="completer-limit"
[(ngModel)]="searchStr"
[datasource]="dataService"
[minSearchLength]="0"
[inputClass]="'form-control'"
[placeholder]="'Enter the class you would like to add'"
[matchClass]="'match'"
[autofocus]="true"
[textSearching]="false">
</ng2-completer>
</div>
</div>
</div>
</div>`)
.open();
}
HTML-en i .body prøver å referere til data i den samme .ts-filen som onClick-funksjonen. For referanse fungerer det å kjøre denne HTML-en i den tilsvarende HTML-dokumentet flott (ikke i en modal). Å legge til generisk HTML i modalen fungerer også fint (enkel tekst). Men når jeg legger til denne koden, blir ikke søkefeltet rendret, og i utviklerkonsollen står det: WARNING: sanitizing HTML stripped some content (se http://g.co/ng/security#xss). Har noen noen idé om hva som skjer? Beklager hvis dette spørsmålet er vanskelig siden jeg bruker pakker. De er ng2-completer for søkefeltet og ngx-modialog for modalen. Jeg tror problemet kan være grunnleggende og ikke relatert til pakkene, noe som er grunnen til at jeg spør på StackOverflow. Er problemet at HTML-en i modal body ikke kan referere til .ts-filen som denne onClick-funksjonen er i, siden malen peker til en separat HTML-fil, eller burde jeg fortsatt kunne referere til objekter i .ts-filen?
Svar #1
Problemet er at du sender HTML i en streng til modal.alert().body()-funksjonen
Så Angular stoler ikke på det. Det er potensielt en kilde til kodeinjeksjon, og blir derfor renset. Du må finne en annen måte - aksepterer modalen din en mal eller komponent som en parameter, hvis ja, så vil det være måten å gjøre det på.