Question

我正在将一个受信任的网址加载到iframe中，但工作正常。我还想在页面上将该URL显示为字符串。我试过了<div>{{url}}</div>，但它显示了：

SafeValue必须使用[property] = binding：/my/resource/path.html（参见http://g.co/ng/security#xss）

我也尝试使用<div [ngModel]="url"></div>，但得到了

错误：没有带有未指定名称属性的表单控件的值访问器

如何显示？

Answer 1

错误表示使用[property]绑定 - 对于html

您希望将此值显示为html（不是网址或资源） - 请使用bypassSecurityTrustHtml

 @Component({
  selector: 'my-app',
  template: `
    <div [innerHTML]="url"><div>
  `
 })
export class App {

  dangerousVideoUrl = "href='&#x3000;javascript:alert(1)'";

  constructor(private sanitizer: DomSanitizer) {
    this.url =
    this.sanitizer.bypassSecurityTrustHtml(this.dangerousVideoUrl);
 }
}

Answer 2

你可以用另一种方式做到：

<iframe #foo [src]="contentUrl"></iframe>
<p>{{ foo.src }}</p>

Answer 3

尝试使用@Pipe在您的所有应用中使用此功能，并使用DomSanitizer来清理URL并绕过XSS安全性。

@Pipe({
    name: 'sanitizeUrl',
    pure: false
})
export class AsString implements PipeTransform {
    constructor(private domSanitizer: DomSanitizer) {
    }

    transform(value: string, args?: any): any {            
        return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
    }
}

在你的模板中：

<div>{{url | sanitizeUrl}}</div>

如何显示SafeUrl或SafeResourceUrl？

3 个答案: