angular - 如何显示 SafeUrl 或 SafeResourceUrl？

Question

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

SafeValue must use [property]=binding: /my/resource/path.html (see http://g.co/ng/security#xss)

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

Error: No value accessor for form control with unspecified name attribute

如何显示？

Answer 1

1. 错误说使用 [property] 绑定(bind) - 这意味着 html 的 [innerHTML]

2. 您想将此值显示为 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);
    }
   }