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å.