How to pass a URL to an iframe dynamically in Angular

Question

I'm unable to pass the URL to an iframe dynamically. I checked several sources on the Internet, but none of them worked properly.

File my-component.component.html

            <iframe
              width="100%"
              height="100%"
              src="{{ dynamicUrl }}"
              scrolling="auto"
            ></iframe>

File my-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
...
})
export class MyComponent implements OnInit {
  dynamicUrl =
    'https://some-website.com/app/main/dashboards/63a0846ut7gxn0035c049e4?embed=true';

  constructor() {}

  ngOnInit(): void {}
}

The frame is not loading and in console I'm getting this error:

core.mjs:7635 ERROR Error: NG0904: unsafe value used in a resource URL context

What’s the best approach?

Answer 1

The error you're encountering is related to Angular's security mechanism for preventing potential cross-site scripting (XSS) attacks. By default, Angular treats dynamic values used in resource URLs, such as the src attribute of an iframe, as unsafe.

To resolve this issue, you need to explicitly mark the URL as safe using Angular's DomSanitizer.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  // ...
})
export class MyComponent implements OnInit {
  dynamicUrl: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    const unsafeUrl = 'https://some-website.com/app/main/dashboards/63a0846ut7gxn0035c049e4?embed=true';
    this.dynamicUrl = this.sanitizer.bypassSecurityTrustResourceUrl(unsafeUrl);
  }
}

Also use property binding in [src]

<iframe
  width="100%"
  height="100%"
  [src]="dynamicUrl"
  scrolling="auto"
></iframe>

You can also make sanitizerURL pipe.