Bindings non sécurisés sur un élément

Vous voyez cette erreur lorsqu'Angular détecte un property binding ou un attribute binding vers un attribut sensible pour la sécurité. Angular exige que ces attributs soient définis comme attributs statiques, afin que leurs valeurs soient fixées à la création de l'élément et restent les mêmes pendant toute sa durée de vie. Le message d'erreur indique l'attribut et l'élément concernés.

Cela concerne :

• les attributs de <iframe> qui définissent son modèle de sécurité : sandbox, allow, allowFullscreen, referrerPolicy, csp, fetchPriority et credentialless. Ils doivent être appliqués avant les attributs src ou srcdoc.
• les attributs d'animation SVG qui pourraient modifier le href d'un autre élément, comme attributeName sur <animate> et <set>.

Par exemple, l'erreur est levée lorsqu'un property binding est utilisé :

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

ou lorsqu'il s'agit d'un attribute binding :

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

L'erreur est également levée lorsqu'un motif similaire est utilisé dans les host bindings d'une directive :

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

Déboguer l'erreur

Le message d'erreur inclut le nom du composant dont le template contient un élément avec des bindings non sécurisés.

La solution recommandée consiste à utiliser les attributs mentionnés comme attributs statiques, par exemple :

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

Si vous avez besoin de valeurs différentes pour ces attributs (selon diverses conditions), vous pouvez utiliser les blocs de control flow @if ou @switch pour afficher conditionnellement l'élément <iframe> approprié :

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