Échappement ou assainissement HTML : quand utiliser chaque méthode

Vous collez un extrait HTML dans une page et obtenez du texte en gras alors que vous vouliez montrer les balises. Ou vous échappez une description en texte enrichi et sa mise en forme disparaît. Ces deux problèmes partent du même choix : le lecteur doit-il voir le balisage ou ce qu’il produit ?

La prise en charge de l’assainissement HTML par les navigateurs a progressé en 2026. Mozilla a introduit l’API Sanitizer standardisée dans Firefox 148 le 24 février (annonce en anglais) , et elle figure dans les notes de version de Chrome 146 du 10 mars , proposées en français par traduction automatique. Les développeurs disposent ainsi d’une solution intégrée pour insérer du contenu mis en forme provenant d’une source non fiable. Il faut d’abord choisir la bonne opération.

Afficher du texte dans une page

Supposons qu’un tutoriel doive montrer littéralement cet exemple :

<strong>Tea & biscuits</strong>

Si JavaScript remplit un élément <code id="example"> existant, utilisez textContent :

const example = document.getElementById("example");
example.textContent = "<strong>Tea & biscuits</strong>";

Le lecteur voit les chevrons et les noms des balises. Le navigateur ne transforme pas la chaîne en élément gras. textContent insère un nœud de texte  : il n’est donc pas nécessaire d’encoder la chaîne au préalable. Lui transmettre <strong> afficherait littéralement ces références d’entités.

Lorsque vous écrivez directement le code source HTML, échappez plutôt l’exemple :

<code>&lt;strong&gt;Tea &amp; biscuits&lt;/strong&gt;</code>

Notre encodeur et décodeur HTML peut préparer ce texte intérieur avec son option par défaut Texte HTML (recommandé). C’est pratique pour un extrait de documentation ponctuel. Pour les données d’une application, privilégiez l’échappement automatique de votre moteur de modèles ; encoder manuellement du texte avant de le transmettre à un modèle qui l’échappe automatiquement peut l’encoder deux fois.

Conserver la mise en forme d’un HTML non fiable

Une prévisualisation de texte enrichi répond à un autre besoin : le lecteur doit voir les emphases et les paragraphes, tandis que le contenu dangereux est retiré. Échapper toutes les balises empêcherait aussi la mise en forme. C’est ici qu’intervient l’assainissement HTML.

La méthode setHTML() du navigateur analyse, assainit et insère du HTML dans un élément. Elle retire les éléments de script et les attributs de gestion d’événements, même lorsqu’une configuration personnalisée essaie de les autoriser. La référence MDN  décrit son comportement et la compatibilité des navigateurs.

Pour un élément <div id="preview"> existant, cet exemple préserve une mise en forme simple lorsque la méthode est prise en charge :

const preview = document.getElementById("preview");
const submittedHtml = '<p>Try <strong>tea</strong> &amp; biscuits.</p>';

if (typeof preview.setHTML === "function") {
  preview.setHTML(submittedHtml);
} else {
  preview.textContent = submittedHtml;
}

La solution de repli affiche volontairement le code source, y compris les références d’entités. Elle renonce à la mise en forme sans confier la chaîne à innerHTML. Vérifiez la prise en charge dans les navigateurs que vous ciblez ; si la mise en forme est indispensable partout, utilisez un assainisseur maintenu et suffisamment compatible. Assainissez le contenu au point d’insertion : sérialiser un contenu assaini puis l’insérer ailleurs avec innerHTML peut réintroduire un risque.

Décoder ne rend pas le HTML sûr

Le décodage des entités transforme <strong> en <strong>. Il ne détermine pas si le balisage obtenu peut être affiché sans danger. Conservez le texte décodé dans un champ ou un nœud de texte, sauf si vous avez délibérément prévu une étape d’assainissement.

De même, l’échappement du texte HTML n’est pas une fonction universelle pour les URL, JavaScript, CSS ou les valeurs d’attributs. Chaque contexte a ses propres règles. Les recommandations de l’OWASP sur la prévention des XSS (en anglais)  expliquent l’encodage adapté au contexte et les cas où l’assainissement convient.

Essayez les deux présentations dans une maquette

Générez une courte liste HTML avec le générateur de Lorem Ipsum. Affichez-la avec sa mise en forme dans une maquette locale, puis encodez le même balisage pour montrer son code source dans un exemple de documentation. Vous obtenez deux présentations utiles du même contenu : une liste affichée et le code qui la décrit.

Notre article sur l’utilisation du Lorem Ipsum en HTML et en listes propose des idées pour vérifier les retours à la ligne et les espacements. Le texte de remplissage aide à ce contrôle visuel ; il ne vérifie pas que votre application traite de façon sécurisée le HTML provenant d’une source non fiable.