Outil d'échappement / déséchappement HTML

L'échappement HTML remplace les caractères ayant une signification spéciale en HTML par leurs entités correspondantes. Les principaux sont <, >, &, " et '. Sans échappement, un < ou un & isolé peut casser la mise en page ou être interprété comme du balisage.

Le déséchappement HTML fait l'inverse en reconvertissant les entités vers leurs caractères d'origine. < redevient < et & redevient &. C'est utile lorsqu'on lit du contenu provenant d'une API, d'un flux RSS ou d'un export CMS déjà encodé.

On voit parfois l'expression HTML escape / unescape comme une opération groupée. Que vous parliez d'encodage/décodage d'entités HTML ou simplement d'échappement/déséchappement, cet outil couvre les deux sens.

L'échappement HTML fonctionne caractère par caractère, et non octet par octet comme les encodages binaires. Chaque caractère réservé correspond à une entité HTML précise, nommée comme & ou numérique comme &.

Les entités nommées sont plus lisibles. Les numériques fonctionnent pour n'importe quel caractère, même sans nom défini. L'ordre compte aussi : & doit être échappé en premier pour éviter les doubles encodages.

Voici un parcours réel avec la chaîne 5 < 10 & true. Chaque caractère réservé est remplacé en une seule passe de gauche à droite et le reste du texte reste intact.

Chaque caractère réservé devient exactement une entité. Il n'y a donc pas de gonflement global comme avec Base64, et la majeure partie du texte reste inchangée.

Résultat :5 < 10 & true→5 < 10 & true

Besoin d'échapper du HTML en ligne sans rien installer ? Le flux reste simple : choisissez un mode, collez votre entrée, sélectionnez le format de sortie pour l'échappement et copiez le résultat. Tout s'exécute localement dans votre navigateur.

Le résultat échappé conserve votre texte d'origine en ajoutant uniquement les entités sûres nécessaires. Pour revenir au texte brut, collez, cliquez sur Déséchapper et copiez. Si le résultat ne change pas, votre entrée ne contenait aucun caractère à échapper.

Un seul mot ne suffit pas à montrer comment l'échappement et le déséchappement HTML se comportent avec du contenu réel. Le tableau suivant présente cinq situations fréquentes, de la simple phrase à l'extrait HTML complet.

Remarquez que l'exemple de comparaison échappe < et & dans le bon ordre, en une seule passe. Échapper & en premier évite de transformer < et > en < et >.

Seuls cinq caractères doivent être échappés dans la plupart des contextes HTML, même s'il est utile d'en connaître quelques autres. Le tableau ci-dessous couvre l'ensemble courant ainsi que quelques symboles typographiques utiles.

Les entités nommées comme © sont plus faciles à lire dans le code source. Les entités numériques comme © fonctionnent même lorsqu'un caractère n'a pas de nom défini.

Il existe aussi une forme hexadécimale : & représente la même esperluette que &. L'option numérique de cet outil produit du décimal par défaut, mais le mode Déséchapper comprend aussi l'hexadécimal.

Au-delà des cinq caractères réservés, HTML définit des entités nommées pour des lettres accentuées et des symboles, comme é et ñ. Elles sont utiles quand on ne peut pas garantir l'UTF-8 en aval.

Les utilisateurs décrivent aussi ces caractères de plusieurs façons : échappement HTML des guillemets, de l'apostrophe, de l'esperluette, du signe inférieur ou supérieur. Les règles d'entités restent les mêmes.

L'échappement HTML ne fonctionne que là où le navigateur analyse du contenu textuel HTML. Deux endroits courants cassent cette hypothèse : les éléments <script>/<style> et les attributs HTML qui contiennent en réalité du JavaScript ou du CSS.

À l'intérieur des balises <script> et <style>, le navigateur n'analyse pas du tout les entités, il traite le contenu comme du JavaScript ou du CSS brut. Échapper & à l'intérieur d'un bloc <script> ne protège rien ; cela imprime simplement un & littéral dans votre code, ce qui est généralement incorrect. Les valeurs dynamiques ont besoin d'un échappement correct de chaînes JS ou CSS, et non d'entités HTML.

Il en va de même pour des attributs comme onclick et style. <p onclick="NOT-HERE"> et <p style="NOT-HERE"> contiennent respectivement du JavaScript et du CSS. L'échappement HTML seul ne rend pas sûr du contenu non fiable à l'intérieur. Adaptez l'échappement au contexte réel, pas seulement au fait que « c'est dans une balise HTML ».

De nombreux développeurs n'ont pas seulement besoin d'une conversion ponctuelle : ils veulent la même logique dans leur application. Les exemples ci-dessous couvrent trois langages fréquents pour échapper et déséchapper du HTML.

En JavaScript, il n'existe pas une fonction native unique pour échapper du HTML. L'approche via textContent reste donc l'option la plus sûre dans le navigateur. Côté serveur, mieux vaut utiliser une bibliothèque dédiée à l'échappement HTML.

Python et PHP sont plus simples, car ils fournissent tous deux une fonction dédiée dans leur outillage standard. Aucun module supplémentaire n'est requis.

// Escape (safe display)
const el = document.createElement("div");
el.textContent = "Tom & Jerry";
const escaped = el.innerHTML;
console.log(escaped); // Tom & Jerry

// Unescape
const parser = new DOMParser();
const decoded = parser.parseFromString(escaped, "text/html").body.textContent;
console.log(decoded); // Tom & Jerry

import html

escaped = html.escape("Tom & Jerry")
print(escaped)  # Tom & Jerry

decoded = html.unescape(escaped)
print(decoded)  # Tom & Jerry

<?php
$escaped = htmlspecialchars("Tom & Jerry");
echo $escaped; // Tom &amp; Jerry

$decoded = htmlspecialchars_decode($escaped);
echo $decoded; // Tom & Jerry

L'échappement HTML réduit le risque de XSS, mais ce n'est pas une protection complète à lui seul. L'échappement fait apparaître le texte utilisateur comme des caractères visibles plutôt que comme du balisage, c'est réellement utile et nécessaire. Une protection complète nécessite un échappement adapté au contexte : le corps HTML, les attributs, JavaScript et les URL ont chacun leurs propres règles.

Côté confidentialité, cet outil fonctionne entièrement côté client dans votre navigateur. Le texte et le HTML que vous collez ne sont jamais envoyés à un serveur. Les chaînes sensibles, brouillons de commentaires, modèles internes et réponses d'API que vous déboguez, restent sur votre machine en permanence.

Considérez cet outil comme un moyen d'échapper ou de décoder correctement des entités HTML pour l'affichage, et non comme un contrôle de sécurité autonome. Assainissez tout HTML que vous autorisez intentionnellement, texte enrichi ou sortie Markdown, avec une bibliothèque de sanitisation dédiée. Validez aussi les entrées non fiables côté serveur, pas seulement au moment de l'affichage. Pour le contexte URL, notre Encodeur/Décodeur URL gère l'encodage en pourcentage des chaînes de requête et des chemins.

La plupart des problèmes d'échappement ou de déséchappement HTML reviennent à quelques schémas classiques. Les reconnaître permet de gagner du temps.

Si le texte semble encore doublement échappé après un passage en Déséchapper, relancez-le une seconde fois. Cela signifie souvent qu'il a été encodé plus d'une fois en amont.

L'échappement HTML n'est pas le seul mécanisme de sécurisation du texte. Le bon choix dépend de la destination du contenu. Le tableau suivant compare l'échappement HTML aux encodages avec lesquels on le confond le plus souvent.

Utiliser le mauvais encodage laisse le problème sous-jacent ouvert. Les caractères d'échappement HTML ne protégeront pas une URL, et l'encodage en pourcentage ne protégera pas non plus le texte du corps HTML. Pour les chaînes de requête, notre Encodeur/Décodeur URL gère correctement l'encodage en pourcentage. Pour des données binaires comme les fichiers et les images, notre Encodeur/Décodeur Base64 couvre l'encodage et le décodage Base64. Pour les chaînes littérales dans JavaScript, un outil d'échappement de chaînes JavaScript applique les bonnes séquences d'échappement.