Une valeur provenant d'un formulaire, d'une API ou d'une URL doit normalement être affichée sous forme de texte et non interprétée comme du HTML. L'attribuer à textContent indique au navigateur de créer du contenu textuel plutôt que d'analyser les balises et les attributs.

const message = document.querySelector("#message");
message.textContent = userProvidedName;

Ne pas créer de balisage par concaténation

  • Évitez d'attribuer des chaînes non fiables à innerHTML.
  • Créez des éléments avec des méthodes DOM lorsqu'une structure dynamique est nécessaire.
  • Si le HTML riche est une véritable exigence, utilisez un désinfectant maintenu et définissez les balises et les attributs autorisés.

Gardez le contexte à l'esprit

Le texte inséré dans un nœud de texte est traité différemment des valeurs utilisées dans les attributs URL, CSS ou HTML. Validez une URL par rapport aux protocoles et aux destinations autorisés par votre interface avant de l'attribuer à un lien.

Testez avec des crochets angulaires et des guillemets dans un exemple d'entrée. Ils doivent apparaître sous forme de caractères visibles et non devenir de nouveaux éléments d'interface.