La valeur sûre doit utiliser [propriété] = liaison après contournement de la sécurité avec DomSanitizer

Question

<!--HTML CODE-->
<p #mass_timings"></p>

//controller code

@ViewChild('mass_timings') mass_timings: ElementRef;
constructor(private domSanitizer:DomSanitizer)
getInnerHTMLValue(){
 this.mass_timings.nativeElement.innerHTML = 
   this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);

}

mais la sortie affichée par mass_timings inclut le texte: -

La valeur sûre doit utiliser [propriété] = liaison

au début

Comment supprimer cette chaîne.

Answer 1

Comme le message d'erreur le dit, le code HTML assaini doit être ajouté à l'aide de la liaison de propriété:

<p [innerHTML]="massTimingsHtml"></p>

constructor(private domSanitizer:DomSanitizer) {
  this.massTimingsHtml = this.getInnerHTMLValue();
}
getInnerHTMLValue(){
  return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}

Exemple StackBlitz (basé sur le Plunker de Swapnil Patwa - voir commentaires ci-dessous)

Answer 2

J'obtenais cette erreur en utilisant un iframe donc j'ai corrigé en utilisant [src] comme ci-dessous:

//In ts file
getSafeUrl() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);     
}
//In html
<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>

Answer 3

Vous devez désinfecter () la safevalue comme ceci:

this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));