에러 백과

엘리먼트의 안전하지 않은 바인딩

Angular가 보안에 영향을 주는 속성의 프로퍼티 바인딩이나 속성 바인딩을 감지하면 이 오류가 발생합니다. Angular는 이러한 속성을 정적 속성으로 설정하도록 요구합니다. 그러면 엘리먼트를 생성할 때 값이 설정되고 엘리먼트가 존재하는 동안 같은 값이 유지됩니다. 오류 메시지에는 속성과 엘리먼트의 이름이 표시됩니다.

다음 속성들이 여기에 해당합니다:

  • <iframe>의 보안 모델을 설정하는 속성: sandbox, allow, allowFullscreen, referrerPolicy, csp, fetchPriority, credentialless. 이 속성들은 src나 srcdoc 속성을 설정하기 전에 적용해야 합니다.
  • 다른 엘리먼트의 href를 변경할 수 있는 SVG 애니메이션 속성. 예를 들면 <animate>와 <set>의 attributeName이 있습니다.

예를 들어 다음과 같이 프로퍼티 바인딩을 사용하면 오류가 발생합니다.

<iframe [sandbox]="'allow-scripts'" src="..."></iframe>

속성 바인딩에 사용해도 오류가 발생합니다.

<iframe [attr.sandbox]="'allow-scripts'" src="..."></iframe>

디렉티브의 호스트 바인딩에 비슷한 패턴을 사용해도 오류가 발생합니다.

@Directive({
  selector: 'iframe',
  host: {
    '[sandbox]': `'allow-scripts'`,
    '[attr.sandbox]': `'allow-scripts'`,
  },
})
class IframeDirective {}

오류 디버깅

오류 메시지에는 안전하지 않은 바인딩이 있는 엘리먼트를 템플릿에 포함한 컴포넌트의 이름이 표시됩니다.

권장하는 해결 방법은 해당 속성들을 다음과 같이 정적 속성으로 사용하는 것입니다.

<iframe sandbox="allow-scripts" src="..."></iframe>

조건에 따라 이 속성들의 값을 다르게 지정해야 한다면 @if나 @switch 제어 흐름 블록으로 적절한 <iframe> 엘리먼트를 조건부 렌더링할 수 있습니다.

@if (someConditionA) {
  <iframe sandbox="allow-scripts" src="..."></iframe>
} @else if (someConditionB) {
  <iframe sandbox="allow-forms" src="..."></iframe>
} @else {
  <iframe sandbox="allow-popups" src="..."></iframe>
}