Você verá este erro quando o Angular detectar um attribute binding ou um property binding em um elemento <iframe> usando os seguintes nomes de propriedade:
- sandbox
- allow
- allowFullscreen
- referrerPolicy
- csp
- fetchPriority
Os atributos mencionados afetam a configuração do modelo de segurança para <iframe>s
e é importante aplicá-los antes de definir os atributos src ou srcdoc.
Para garantir isso, o Angular exige que esses atributos sejam definidos em <iframe>s como
atributos estáticos, para que os valores sejam definidos no momento da criação do elemento e
permaneçam os mesmos durante todo o tempo de vida de uma instância <iframe>.
O erro é lançado quando um property binding com um dos nomes de atributo mencionados é usado:
<iframe [sandbox]="'allow-scripts'" src="..."></iframe>ou quando é um attribute binding:
<iframe [attr.sandbox]="'allow-scripts'" src="..."></iframe>Além disso, o erro é lançado quando um padrão similar é usado em host bindings de Directive:
@Directive({ selector: 'iframe', host: { '[sandbox]': `'allow-scripts'`, '[attr.sandbox]': `'allow-scripts'`, }})class IframeDirective {}Depurando o erro
A mensagem de erro inclui o nome do component com o template onde
um elemento <iframe> com bindings inseguros está localizado.
A solução recomendada é usar os atributos mencionados como estáticos, por exemplo:
<iframe sandbox="allow-scripts" src="..."></iframe>Se você precisar ter valores diferentes para esses atributos (dependendo de várias condições),
você pode usar um *ngIf ou um *ngSwitch em um elemento <iframe>:
<iframe *ngIf="someConditionA" sandbox="allow-scripts" src="..."></iframe><iframe *ngIf="someConditionB" sandbox="allow-forms" src="..."></iframe><iframe *ngIf="someConditionC" sandbox="allow-popups" src="..."></iframe>