javascript - angular VARNING: sanering av HTML har tagit bort en del innehåll?
Hej, jag försöker visa en sökfält i ett modal genom att skriva HTML i modalens kropp så här:
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-koden i .body försöker referera till data i samma .ts-fil som onClick-funktionen. För referens fungerar det utmärkt att köra denna HTML i den motsvarande HTML-dokumentet (inte i en modal). Att lägga till generisk HTML i modal fungerar också bra (enkel text). Men när jag lägger till denna kod renderas inte sökfältet och i utvecklarkonsolen står det: WARNING: sanitizing HTML stripped some content (se http://g.co/ng/security#xss). Någon som har någon idé om vad som händer? Förlåt om denna fråga är svår eftersom jag använder paket. De är ng2-completer för sökfältet och ngx-modialog för modalen. Jag tror att problemet kan vara grundläggande och inte relaterat till paketen, vilket är anledningen till att jag frågar på StackOverflow. Är problemet att HTML i modalbody inte kan referera till .ts-filen som denna onClick-funktion finns i eftersom templaten pekar på en separat HTML-fil, eller borde jag ändå kunna referera till objekt i .ts-filen?
Svar #1
Problemet är att du skickar HTML i en sträng till modal.alert().body()-funktionen
Så Angular litar inte på det. Det är potentiellt en källa till kodinjektion och saneras därför. Du behöver hitta ett annat sätt - accepterar din modal en mall eller komponent som parameter, i så fall kommer det att vara sättet att göra det på.