使用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]以下方法进行了修复：

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

此方法相当耗时，因为它将多次调用该函数，因此最好在lifeCycleHooks like中清理URL ngOnInit()。

Answer 4

我在 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 5

我使用管道的解决方案。

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 6

您不需要绑定到[innerHtml]任何地方。

它通过使用sanitize()和bypassSecurityTrustHtml()一起工作，如下所示：

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