Javascript 安全值必须使用[property]=在使用DomSanitizer绕过安全性后绑定

//控制器代码
@ViewChild（“质量计时”）质量计时：ElementRef；
构造函数（私有domsanizer:domsanizer）
getInnerHTMLValue（）{
this.mass_timings.nativeElement.innerHTML=
this.domsanizer.bypassSecurityTrustHtml（this.parishDetail.mass_timings）；
}

但质量计时显示的输出包括以下文本：-

安全值必须使用[property]=绑定

起初

---

如何删除此字符串。

如错误消息所述，需要使用属性绑定添加经过消毒的HTML：

构造函数（私有domsanizer:domsanizer）{
this.massTimingsHtml=this.getInnerHTMLValue（）；
}
getInnerHTMLValue（）{
返回this.domsanizer.bypassSecurityTrustHtml（this.parishDetail.mass_timings）；
}

---

（基于Swapnil Patwa的Plunker-见下面的评论）

我在使用iframe时遇到了这个错误，因此我使用

[src]

修复了这个错误，如下所示：

导入此文件：

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

ts文件中的

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

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

html文件中的

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

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

您需要对safevalue进行如下清理：

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

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

---

在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))
    }
}

---

我的解决方案使用管道

HTML

您不需要到处绑定到

[innerHtml]

。 它通过同时使用

sanitize（）

和

bypassSecurityTrustHtml（）

工作，如下所示：

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

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

---

@manish kumar，Demo plunker-仅此而已。但是你能联系并解释你能做到这一点，但不能用净化的HTML，只能用一个简单的HTML字符串。如果你使用

this.mass\u timings.nativeElement.innerHTML=…

，就不行了。但出于安全原因，建议进行消毒。@manishkumar大多数情况下，将“劫掠者”代码复制到StackBlitz将解决此问题。基于旧角度版本的Plunker不再运行。在我更新的答案中看到StackBlitz。你刚刚节省了我的时间，谢谢！src=“{code}}”不起作用，但[src]=“code”的作用就像一个符咒！经过几个小时的尝试，我终于找到了解决办法。有人知道为什么

src=“{code}}”

不起作用，但

[src]=“code”

起作用吗？您应该使用管道而不是函数来保存性能，并防止每次运行更改检测时调用它。请看Renil Babu的回答。你不只是重新启动吗？我猜sanitize（）只会发生一次。而且它很有效，这就是我发布的原因。它看起来很有趣，但这确实有效！更好的是，您不需要到处绑定[innerHtml]。管道是性能方面最好的解决方案，因为每次运行更改检测时都会调用函数（如Black Mamba所说）。为什么要在sanitizer下面加下划线？毫无意义。此外，您还说它100%完美地工作，但不，那不是真的，其他一些人可能会根据上下文使用

SecurityContext.URL

。如何将其应用于元素的标题