使用 DomSanitizer 繞過安全性后，安全值必須使用 [property]=binding

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

}

但 mass_timings 顯示的輸出包括文本：-

安全值必須使用 [property]=binding

一開始

如何刪除此字符串。

Answer 1

正如錯誤消息所說，需要使用屬性綁定添加經過消毒的 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 - 請參閱下面的評論）

Answer 2

您需要像這樣 sanitize() 安全值：

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

Answer 3

使用 iframe 時出現此錯誤，因此我使用[src]修復，如下所示：

導入這個：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer, ....other DI){}

在 ts 文件中

getSafeUrl() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);     
}

在 html 文件中

<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>

此方法非常消耗循環，因為它會多次調用該函數，因此最好清理 lifeCycleHooks 內的 URL，如ngOnInit() 。

您也可以使用管道以獲得更好的性能：

<div [innerHtml]="htmlValue | byPassSecurity"></div>


import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'byPassSecurity'
})
export class ByPassSecurityPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform (value: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}

Answer 4

我使用管道的解決方案。

HTML

<div [innerHtml]="htmlValue | byPassSecurity"></div>

管道

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'byPassSecurity'
})
export class ByPassSecurityPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform (value: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }
}

Answer 5

我在 angular 7 中使用 MATHJAX 時遇到了同樣的錯誤。我通過下面的管道變換解決了。 100% 完美運行

//清理HTML管道

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
    name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) {
    }

    transform(value: string): SafeHtml {
        return this._sanitizer.sanitize(SecurityContext.HTML, this._sanitizer.bypassSecurityTrustHtml(value))
    }
}

Answer 6

您不需要到處都綁定到[innerHtml] 。

它通過同時使用sanitize()和bypassSecurityTrustHtml() ，如下所示：

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