Error Encyclopedia

Unsafe bindings on an element

You see this error when Angular detects a property binding or an attribute binding to a security-sensitive attribute. Angular requires these attributes to be set as static attributes, so their values are set when the element is created and remain the same throughout its lifetime. The error message names the attribute and the element.

This applies to:

  • <iframe> attributes that set up its security model: sandbox, allow, allowFullscreen, referrerPolicy, csp, fetchPriority and credentialless. They must be applied before the src or srcdoc attributes.
  • SVG animation attributes that could change the href of another element, such as attributeName on <animate> and <set>.

For example, the error is thrown when a property binding 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 {}

Debugging the error

The error message includes the name of the component with the template where an element with unsafe bindings is located.

The recommended solution is to use the mentioned attributes as static ones, for example:

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

If you need to have different values for these attributes (depending on various conditions), you can use the @if or @switch control flow blocks to conditionally render the appropriate <iframe> element:

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