안전하지 않은 리소스 URL이 DomSanitizer에 전달됨

명시적으로 신뢰하도록 표시하지 않은 값과 SecurityContext.RESOURCE_URL로 DomSanitizer.sanitize()를 호출하면 Angular는 unsafe value used in a resource URL context 메시지와 함께 이 오류를 발생시킵니다.

리소스 URL은 일반 URL과 다르게 취급됩니다. Angular는 일반 URL을 정제(sanitize)할 수 있지만 임의의 리소스 URL을 안전하게 만들 수는 없습니다. <iframe src>나 <link href> 같은 리소스 URL 속성은 브라우저가 외부 콘텐츠를 가져와 실행하도록 하기 때문입니다. 따라서 sanitize()는 신뢰하지 않는 값을 정제하려 하지 않고 거부합니다.

템플릿이나 호스트 바인딩에서 이러한 속성에 신뢰하지 않는 값을 바인딩하면 대신 NG0904가 발생합니다.

오류 디버깅하기

SecurityContext.RESOURCE_URL을 사용하는 sanitize() 호출을 찾으세요. 고정된 URL처럼 보여도 일반 문자열이면 오류가 발생합니다.

@Component({
  selector: 'app-root',
  template: `<iframe [src]="url"></iframe>`,
})
export class App {
  private readonly sanitizer = inject(DomSanitizer);
  url = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, 'https://example.com/embed'); // throws NG05201
}

URL이 신뢰할 수 있고 통제된 출처에서 온다면 DomSanitizer.bypassSecurityTrustResourceUrl로 안전한 값임을 표시하고 결과를 직접 바인딩하세요.

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

@Component({
  selector: 'app-root',
  template: `<iframe [src]="safeUrl"></iframe>`,
})
export class App {
  safeUrl: SafeResourceUrl = inject(DomSanitizer).bypassSecurityTrustResourceUrl(
    'https://example.com/embed',
  );
}

자세한 내용은 보안 가이드를 참고하세요.