Unsafe value used in a resource URL context

Angular throws this error when you bind a value to an attribute that loads an external resource — like <iframe src>, or <link href> — and that value hasn't been explicitly marked as trusted.

Resource URLs are treated differently from regular URLs. Angular can sanitize a plain URL (stripping javascript: schemes and so on), but it can't make an arbitrary resource URL safe because these attributes cause the browser to fetch and execute external content. So Angular rejects untrusted values rather than trying to sanitize them.

The attributes that trigger this check are:

Debugging the error

This error can also be thrown when calling DomSanitizer.sanitize() directly with SecurityContext.RESOURCE_URL and a plain string:

inject(DomSanitizer).sanitize(SecurityContext.RESOURCE_URL, 'https://example.com'); // throws NG05201

sanitize() cannot make an arbitrary string safe in a resource URL context. Either use bypassSecurityTrustResourceUrl if the value is fully under your control, or bind the value to a regular URL attribute that Angular can sanitize.

Look for a binding to one of the attributes above or a direct sanitize() call:

<iframe [src]="userUrl"></iframe>

If the URL comes from a trusted, controlled source, mark it safe using DomSanitizer.bypassSecurityTrustResourceUrl:

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

@Component({
  selector: 'my-app',
})
export class App {
  safeUrl: SafeResourceUrl = inject(DomSanitizer).bypassSecurityTrustResourceUrl(
    'https://example.com/embed',
  );
}

<iframe [src]="safeUrl"></iframe>

bypassSecurityTrustResourceUrl is an escape hatch, not a sanitizer. Never pass user-supplied URLs through it — that would allow an attacker to load arbitrary content, including malicious scripts. Only use it when the value is fully under your control.