import { Component } from '@angular/core';
@Component({
selector: 'exe-app',
template: `
<iframe [src]="iframe"></iframe>
`
})
export class AppComponent {
iframe: string;
constructor() {
this.iframe = "https://www.jianshu.com/";
}
}
以上代码运行后，在浏览器中无法正常显示内容，控制台中输出了以下异常信息，因为有需要引入外部url的资源链接，但是，变量直接赋值url的话，会报错：
EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:12 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)
主要是安全原因，Angular会认为你你赋值的url不安全（有兴趣可以了解一下跨站脚本Cross-site scripting，通常简称为XSS）。
解决方法：
DomSanitizer - bypassSecurityTrustHtml() 方法
DomSanitizer通过清理值以在不同的DOM上下文中安全使用来帮助防止跨站点脚本安全漏洞（XSS）。
import { DomSanitizer } from '@angular/platform-browser'
@Component({
selector: 'exe-app',
template: `
<iframe [src]="iframe"></iframe>
`
})
export class AppComponent {
iframe: string;
constructor(private sanitizer: DomSanitizer) {
this.iframe= this.sanitizer.bypassSecurityTrustHtml('https://www.jianshu.com/');
}
}
