web-dev-qa-db-ja.com

DomSanitizerでセキュリティをバイパスした後、安全な値は[property] = bindingを使用する必要があります

<!--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);

}

しかし、mass_timingsが表示している出力には次のテキストが含まれています。

安全な値は[property] = bindingを使用する必要があります

初めに

この文字列を削除する方法。

angularionic2innerhtml
18
manish kumar

エラーメッセージに示されているように、プロパティバインドを使用してサニタイズされたHTMLを追加する必要があります。

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

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

StackBlitzの例 （Swapnil PatwaのPlunkerに基づく-以下のコメントを参照）

27
Günter Zöchbauer

Iframeを使用しているときにこのエラーが発生していたので、以下のように_[src]_を使用して修正しました。

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

このメソッドは、関数を複数回呼び出すため、かなりサイクルを消費します。したがって、ngOnInit()のようなlifeCycleHooks内のURLをサニタイズすることをお勧めします。

5
Black Mamba

次のようにsafevalueをsanitize（）する必要があります。

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