<iframe> 要素に属性バインディングまたはプロパティバインディングを使用し、以下のプロパティ名を使用すると、このエラーが表示されます。
- sandbox
- allow
- allowFullscreen
- referrerPolicy
- csp
- fetchPriority
これらの属性は <iframe> のセキュリティモデル設定に影響を与え、
src または srcdoc 属性を設定する前に適用することが重要です。
Angularはこれらの属性が <iframe> に静的属性として設定されることを要求することで、
これを強制しています。
そのため、値は要素作成時に設定され、<iframe> インスタンスの存続期間中は同一のままになります。
上記の属性名のいずれかをプロパティバインディングで使用すると、エラーがスローされます。
<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 {}
エラーのデバッグ
エラーメッセージには、unsafeなバインディングを持つ
<iframe> 要素が存在するテンプレートを含むコンポーネントの名前が含まれています。
推奨される解決策は、上記の属性を静的な属性として使用することです。例:
<iframe sandbox="allow-scripts" src="..."></iframe>
これらの属性に異なる値が必要な場合（さまざまな条件に応じて）、
<iframe> 要素に *ngIf または *ngSwitch を使用できます。
<iframe *ngIf="someConditionA" sandbox="allow-scripts" src="..."></iframe><iframe *ngIf="someConditionB" sandbox="allow-forms" src="..."></iframe><iframe *ngIf="someConditionC" sandbox="allow-popups" src="..."></iframe>