Échapper/Déséchapper le HTML
Convertit les caractères spéciaux comme &, <, >, " et ' en entités HTML (échapper), ou reconvertit les entités en leurs caractères d'origine (déséchapper). Utile pour la prévention des attaques XSS et l'insertion de texte dans du HTML.
Principales entités HTML nommées
| Caractère | Entité nommée | Référence numérique | Description |
|---|---|---|---|
| & | & | & | Esperluette (symbole signifiant "et") |
| < | < | < | Signe inférieur à (identique au caractère d'ouverture d'une balise HTML) |
| > | > | > | Signe supérieur à (identique au caractère de fermeture d'une balise HTML) |
| " | " | " | Guillemet double (délimiteur de valeurs d'attribut) |
| ' | ' | ' | Guillemet simple (délimiteur de valeurs d'attribut) |
| |   | Espace insécable (un espace qui empêche le retour à la ligne) | |
| © | © | © | Symbole du copyright |
| ® | ® | ® | Symbole de marque déposée |
| ™ | ™ | ™ | Symbole de marque commerciale |
| € | € | € | Symbole de l'euro |
| ¥ | ¥ | ¥ | Symbole du yen |
| ¢ | ¢ | ¢ | Symbole du cent |
Ce que fait l’échappement HTML
L’échappement HTML convertit les cinq caractères porteurs d’un sens particulier en HTML – &, <, >, " et ' – en entités que le navigateur ne lira pas comme du balisage. Insérer une saisie utilisateur directement dans une page sans cela peut casser la mise en page, < et > étant pris pour le début et la fin d’une balise, et peut laisser s’exécuter un code malveillant tel que <script> : la faille connue sous le nom de cross-site scripting, ou XSS. L’échappement en est la parade élémentaire.
Le déséchappement fait l’inverse : il ramène les entités nommées comme & et les références numériques comme & aux caractères qu’elles représentent. C’est ce qu’il faut lorsque vous avez copié du code HTML ailleurs, ou lorsque vous lisez des données de publications issues d’un CMS ou d’un forum et que la forme entité rend le texte réel difficile à voir. La conversion s’exécute entièrement dans le JavaScript du navigateur et ce que vous saisissez n’est transmis nulle part.
Comment convertir un texte
- Choisissez le sens Sélectionnez « échapper » pour transformer des caractères en entités, ou « déséchapper » pour ramener les entités à des caractères.
- Collez votre texte dans le champ de saisie Indiquez la chaîne que vous voulez insérer dans du HTML, ou celle qui contient des entités.
- Consultez le résultat converti La sortie située en dessous se met à jour en temps réel au fil de la saisie et se recalcule à chaque modification.
- Copiez le résultat Le bouton de copie place le texte converti dans le presse-papiers, prêt à être collé dans le corps d’un CMS ou dans du code source.
Astuces pour en tirer le meilleur parti
- L'échappement HTML est la base de la prévention des attaques XSS (cross-site scripting). Échappez toujours les entrées utilisateur avant de les insérer dans du HTML.
- Le caractère
&doit toujours être échappé en premier. Si vous convertissez d'autres caractères avant lui, le&présent dans le&nouvellement généré sera échappé deux fois. - Lorsque vous insérez une chaîne dans une valeur d'attribut, il est plus sûr d'échapper à la fois
"(guillemet double) et'(guillemet simple), pas seulement l'un des deux. - Cet outil permet de déséchapper les références numériques décimales (
&), les références numériques hexadécimales (&) ainsi que les principales entités nommées (comme&). - De nombreux moteurs de templates (Blade, JSX, Vue, etc.) échappent automatiquement le HTML lors de l'interpolation de variables, mais si vous utilisez une syntaxe de "sortie HTML brute" comme
{!! !!}ou v-html, vous devrez échapper la valeur vous-même.
Quand l’échappement est utile
Citer du code dans un CMS ou un billet de blog
Coller telle quelle une chaîne contenant < ou > dans le corps d’un article amène le navigateur à la lire comme une balise et l’affichage se disloque. L’échapper au préalable permet de l’afficher sans dommage.
Lire des messages d’un forum ou d’un fil de commentaires
Lorsque les messages sont stockés en base encore sous forme d’entités, le déséchappement rétablit le texte d’origine et le rend lisible.
Insérer des fragments HTML dans du Markdown
Pour montrer des balises d’exemple ou du code dans un document Markdown, les échapper au préalable empêche l’analyseur Markdown et le navigateur de les interpréter comme du balisage.
Déboguer un gabarit HTML
Utile pour confronter l’avant et l’après lorsque vous cherchez où un moteur de gabarits a échappé quelque chose par mégarde – ou ne l’a pas échappé du tout.
Termes de l’échappement HTML
- Entité HTML (référence de caractère)
- Notation permettant d’afficher sans risque un caractère porteur d’un sens particulier dans un document HTML. La forme nommée commence par l’esperluette et se termine par un point-virgule, comme
&. - Référence numérique de caractère
- Notation désignant un caractère par son point de code Unicode. En décimal on écrit
&, en hexadécimal&; les deux désignent le même caractère. - Cross-site scripting (XSS)
- Faille par laquelle un script contenu dans une saisie utilisateur est inséré sans échappement dans une page et exécute un code non prévu dans le navigateur d’autres visiteurs. L’échappement HTML en est la parade classique.
- Assainissement (sanitisation)
- Pratique générale consistant à retirer les éléments dangereux des données reçues de l’extérieur, ou à les convertir sous une forme inoffensive. L’échappement HTML en est une modalité.
- Échapper l’esperluette en premier
- L’esperluette doit être convertie avant tout le reste. Si l’on convertit d’abord les autres caractères, les esperluettes des entités que l’on vient de produire, comme
&, sont échappées une seconde fois : d’où l’importance de l’ordre. - Délimiteurs de valeur d’attribut
- Les guillemets doubles et simples qui encadrent la valeur d’un attribut dans une balise HTML. Si l’un de ces caractères figure dans la valeur sans être échappé, il est pris pour la fin de l’attribut.
Questions fréquentes
<, > et & — sont particuliers car les analyseurs HTML les interprètent comme faisant partie de la syntaxe elle-même. S'ils ne sont pas échappés, le navigateur peut les confondre avec le début ou la fin d'une balise, ce qui peut entraîner une mise en page cassée ou une attaque XSS (injection de scripts malveillants).&, <, >, " et '. Les caractères non ASCII, comme les emojis ou les textes dans d'autres langues, s'affichent en toute sécurité tels quels dans les environnements UTF-8 modernes, et n'ont donc pas besoin d'être convertis.
Anecdote — Le mécanisme de "référence de caractères" hérité du SGML
L'origine des entités HTML (références de caractères) remonte au SGML (Standard Generalized Markup Language), l'ancêtre du HTML. Le SGML, normalisé en 1986, disposait déjà d'un mécanisme de "référence de caractère" permettant d'utiliser le caractère délimiteur de balise < au sein même du texte. Le HTML a hérité de ce mécanisme presque sans modification, et des entités nommées de base telles que <, > et & étaient déjà définies dans les toutes premières spécifications du HTML, dès les années 1990.
Les entités nommées ont d'abord été appréciées comme moyen d'afficher des symboles d'imprimerie spéciaux (comme le symbole du copyright ©, celui de la marque déposée ® et diverses lettres grecques) dans des environnements ASCII, avant que l'Unicode ne se généralise. La spécification HTML5 a fini par définir plus de 2 000 entités nommées, couvrant même des symboles mineurs comme les coches ou les notes de musique.
Aujourd'hui, la diffusion de l'encodage UTF-8 a considérablement réduit le besoin de références de caractères pour éviter les problèmes d'affichage. Cependant, trois caractères — <, > et & — doivent encore être échappés pour une tout autre raison. Ils revêtent une signification syntaxique particulière pour les analyseurs HTML (début de balise, fin de balise et début d'entité), si bien qu'un oubli d'échappement peut directement provoquer une mise en page cassée ou une faille XSS.