Javascript 使用 DomSanitizer 绕过安全性后，安全值必须使用 [property]=binding
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45351434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safe value must use [property]=binding after bypass security with DomSanitizer
提问by manish kumar
<!--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);
}
but the output which the mass_timings is displaying is including the text:-
但 mass_timings 显示的输出包括文本：-
Safe value must use [property]=binding
安全值必须使用 [property]=binding
at the beginning
一开始
How to remove this string.
如何删除此字符串。
回答by Günter Z?chbauer
As the error message says, the sanitized HTML needs to be added using property binding:
正如错误消息所说，需要使用属性绑定添加经过消毒的 HTML：
<p [innerHTML]="massTimingsHtml"></p>
constructor(private domSanitizer:DomSanitizer) {
this.massTimingsHtml = this.getInnerHTMLValue();
}
getInnerHTMLValue(){
return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}
StackBlitz example(based on Swapnil Patwa's Plunker - see comments below)
StackBlitz 示例（基于 Swapnil Patwa 的 Plunker - 请参阅下面的评论）
回答by Sunil Kumar
You need to sanitize() the safevalue like this :
您需要像这样 sanitize() 安全值：
this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));
回答by Black Mamba
I was getting this error when using an iframe so there I fixed using [src]as below:
我在使用 iframe 时遇到了这个错误，所以我修复[src]了如下使用：
Import this:
导入这个：
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer, ....other DI){}
In ts file
在 ts 文件中
getSafeUrl() {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}
In html file
在 html 文件中
<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>
This method is quite cycle consuming as it'll call the function multiple time so it's better to sanitize URL inside lifeCycleHooks like ngOnInit().
此方法非常耗时，因为它会多次调用该函数，因此最好清理 lifeCycleHooks 内的 URL，例如ngOnInit().
You can use pipes as well for better performance:
您也可以使用管道以获得更好的性能：
<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);
}
}
回答by Kishore Thangapandi
I got a same error while using MATHJAX in angular 7. I resolved by below pipe transform. 100% work perfectly
我在 angular 7 中使用 MATHJAX 时遇到了同样的错误。我通过下面的管道变换解决了。100% 完美运行
//Sanitize HTML PIPE
//清理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))
}
}
回答by Renil Babu
My Solution using Pipe.
我使用管道的解决方案。
HTML
HTML
<div [innerHtml]="htmlValue | byPassSecurity"></div>
Pipe
管道
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);
}
}
