Description

You see this error when Angular detects an attribute binding or a property binding on an <iframe> element using the following property names:

• sandbox
• allow
• allowFullscreen
• referrerPolicy
• csp
• fetchPriority

The mentioned attributes affect the security model setup for <iframe>s and it's important to apply them before setting the src or srcdoc attributes. To enforce that, Angular requires these attributes to be set on <iframe>s as static attributes, so the values are set at the element creation time and they remain the same throughout the lifetime of an <iframe> instance.

The error is thrown when a property binding with one of the mentioned attribute names is used:

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

or when it's an attribute bindings:

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

Also, the error is thrown when a similar pattern is used in Directive's host bindings:

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