如何显示 SafeUrl 或 SafeResourceUrl？答案

【问题标题】：How can I display a SafeUrl or a SafeResourceUrl?如何显示 SafeUrl 或 SafeResourceUrl？
【发布时间】：2017-05-02 14:59:37
【问题描述】：

我正在将受信任的 URL 加载到运行良好的 iframe 中。我还想在页面上将该 URL 显示为字符串。我试过<div>{{url}}</div> 但它显示：

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

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

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

如何显示？

【问题讨论】：

看看我的回答。我相信DomSanitizer 是您在这里寻找的。干杯! ;)
@adamdport 你最终为这类事情做了什么？我在下面看到您关于为 url 字符串创建单独的 var 的评论，这也是我的想法。也许我会把它保护起来，让它有一些区别。
我使用了一个单独的变量。对不起！

标签： angular

【解决方案1】：

错误提示使用 [property] 绑定 - 这意味着 html 的 [innerHTML]

您希望将此值显示为 html（不是 url 或资源） - 使用 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);
 }
}

【讨论】：

但我需要它是 SafeResourceUrl 以便在我的 iframe 中使用。我当然可以从传递给bypassSecurityTrustResourceUrl 的字符串中创建一个单独的变量，但我希望有一个更简洁的解决方案。
对不起，我没有得到，因为您问题中的所有错误都显示 html 绑定。我会先让它工作，然后再实施管道以获得更清洁的解决方案。 bypassSecurityTrustResourceUrl 应该适用于 iframe
它确实适用于 iframe。但我也想在 HTML 中显示它的值。也许这是不可能的。
@adamdport 您找到解决方案了吗？你是如何设置targetOrigin的？我正在尝试使用 postMessage API 并希望从目标 URL 中提取 targetOrigin

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

“value.string 不是函数”。 value 的类型为 SafeResourceUrlImpl。它有一个toString() 方法，但返回“SafeValue must use [property]=binding: /my/resource/path.html (see g.co/ng/security#xss)”
@adamdport 检查我的答案。你必须使用DomSanitizer。
它仍然显示“SafeValue 必须使用 [property]=binding”消息。我设置了一个断点来验证它是否正在进入我的管道。 @SrAxi
是否可以在帖子中使用 bypassSecurityTrustUrl？我找不到任何例子。