Element : propriété innerHTML

Valeur

La lecture de la propriété retourne une chaîne de caractères contenant la sérialisation HTML des descendants de l'élément.

La définition de la propriété accepte soit un objet TrustedHTML, soit une chaîne de caractères. Elle analyse cette valeur comme du HTML et remplace tous les descendants de l'élément par le résultat. Lorsqu'elle est définie sur la valeur null, cette valeur null est convertie en chaîne de caractères vide (""), donc elt.innerHTML = null est équivalent à elt.innerHTML = "".

Exceptions

SyntaxError DOMException

Levé si une tentative a été faite de définir la valeur de innerHTML en utilisant une chaîne de caractères qui n'est pas correctement formée HTML.

TypeError

Levé si la propriété est définie sur une chaîne de caractères lorsque les types de confiance sont appliqués par une CSP et qu'aucune politique par défaut n'est définie.

NoModificationAllowedError DOMException

Levé si une tentative a été faite d'insérer le code HTML dans un nœud dont le parent est un Document.

Description

innerHTML obtient une sérialisation des éléments DOM enfants imbriqués dans l'élément, ou définit du HTML ou XML qui doit être analysé pour remplacer l'arbre DOM à l'intérieur de l'élément.

Notez que certains navigateurs sérialisent les caractères < et > en tant que < et > lorsqu'ils apparaissent dans les valeurs d'attribut (voir Compatibilité des navigateurs). Ceci est pour prévenir une vulnérabilité de sécurité potentielle (mutation XSS ^(angl.)) dans laquelle un·e attaquant·e peut créer une entrée qui contourne une fonction d'assainissement, permettant une attaque de type script inter-sites (XSS).

Considérations sur le DOM d'ombre

La sérialisation de l'arbre DOM lu à partir de la propriété n'inclut pas les racines d'ombre — si vous voulez obtenir une chaîne de caractères HTML qui inclut les racines d'ombre, vous devez utiliser à la place les méthodes Element.getHTML() ou ShadowRoot.getHTML().

De même, lorsque vous définissez le contenu d'un élément en utilisant innerHTML, la chaîne de caractères HTML est analysée en éléments DOM qui ne contiennent pas de racines d'ombre. Ainsi, par exemple, <template> est analysé en tant que HTMLTemplateElement, que l'attribut shadowrootmode soit défini ou non. Pour définir le contenu d'un élément à partir d'une chaîne de caractères HTML qui inclut des racines d'ombre déclaratives, vous devez utiliser à la place Element.setHTMLUnsafe() ou ShadowRoot.setHTMLUnsafe().

Considérations de sécurité

La propriété innerHTML est probablement le vecteur le plus courant pour les attaques de script inter-sites (XSS), où des chaînes de caractères potentiellement non sécurisées fournies par un·e utilisateur·ice sont injectées dans le DOM sans être d'abord assainies. Bien que la propriété empêche les éléments <script> de s'exécuter lorsqu'ils sont injectés, elle est vulnérable à de nombreuses autres façons dont les attaquant·e·s peuvent créer du HTML pour exécuter du JavaScript malveillant. Par exemple, l'exemple suivant exécute le code dans le gestionnaire d'évènements error, car la valeur src de <img> n'est pas une URL d'image valide :

const nom = "<img src='x' onerror='alert(1)'>";
el.innerHTML = nom; // affiche l'alerte

Vous pouvez atténuer ces problèmes en assignant toujours des objets TrustedHTML au lieu de chaînes de caractères, et en appliquant des types de confiance en utilisant la directive CSP require-trusted-types-for. Ceci garantit que l'entrée est passée par une fonction de transformation, qui a la possibilité d'assainir l'entrée pour supprimer les balises potentiellement dangereuses avant qu'elle ne soit injectée.

Exemples

Lire le contenu HTML d'un élément

La lecture de innerHTML amène l'agent utilisateur à sérialiser les descendants de l'élément.

Étant donné le HTML suivant :

<div id="exemple">
  <p>Mon nom est Joe</p>
</div>

Vous pouvez obtenir et enregistrer le balisage pour le contenu du <div> externe comme suit :

const monElement = document.querySelector("#exemple");
const contenu = monElement.innerHTML;
console.log(contenu); // "\n  <p>Mon nom est Joe</p>\n"

Remplacer le contenu d'un élément

Dans cet exemple, nous allons remplacer le DOM d'un élément en assignant du HTML à la propriété innerHTML de l'élément. Pour atténuer le risque de XSS, nous allons d'abord créer un objet TrustedHTML à partir de la chaîne de caractères contenant le HTML, puis assigner cet objet à innerHTML.

Les types de confiance ne sont pas encore pris en charge par tous les navigateurs, nous définissons donc d'abord la petite prothèse d'émulation des types de confiance. Ceci agit comme un remplacement transparent pour l'API JavaScript des types de confiance :

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Ensuite, nous créons une TrustedTypePolicy qui définit une createHTML() pour transformer une chaîne de caractères d'entrée en instances de TrustedHTML. Les implémentations courantes de createHTML() utilisent une bibliothèque telle que DOMPurify ^(angl.) pour assainir l'entrée comme indiqué ci-dessous :

const politique = trustedTypes.createPolicy("ma-politique", {
  createHTML: (input) => DOMPurify.sanitize(input),
});

Ensuite, nous utilisons cet objet policy pour créer un objet TrustedHTML à partir de la chaîne de caractères potentiellement non sécurisée, puis nous assignons le résultat à l'élément :

// La chaîne de caractères potentiellement malveillante
const chaineMalveillante =
  "<p>Je pourrais être du XSS</p><img src='x' onerror='alert(1)'>";

// Crée une instance TrustedHTML en utilisant la politique
const HTMLDeConfiance = politique.createHTML(chaineMalveillante);

// Injecte le TrustedHTML (qui contient une chaîne de caractères de confiance)
const element = document.querySelector("#container");
element.innerHTML = HTMLDeConfiance;

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés Node.textContent et HTMLElement.innerText
• La méthode Element.insertAdjacentHTML()
• La propriété Element.outerHTML
• Analyse HTML ou XML dans une arborescence DOM : DOMParser
• Sérialisation d'une arborescence DOM dans une chaîne de caractères XML : XMLSerializer
• La méthode Element.getHTML()
• La méthode ShadowRoot.getHTML()
• La méthode Element.setHTMLUnsafe()
• La méthode ShadowRoot.setHTMLUnsafe()
• L'API Trusted Types