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