How can I display a SafeUrl or a SafeResourceUrl?

Question

I'm loading a trusted URL into an iframe which works fine. I also want to display that URL as a string on the page. I've tried <div>{{url}}</div> but it displays:

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

I also tried using <div [ngModel]="url"></div>, but got

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

How can I display it?

Answer 1

1. The error says use [property] binding - it means [innerHTML] for html

2. You want to display this value as html (not url or resource) - use 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);
    }
   }