Encodage / décodage d’entités HTML
Échappez du texte pour le HTML et reconvertissez les entités en texte.
À propos de cet outil
Échappez <, >, &, les guillemets et éventuellement chaque caractère non ASCII pour pouvoir insérer du texte dans du HTML en toute sécurité, ou décodez les entités nommées et numériques comme &, é et 🚀 en texte brut.
Mode d’emploi
- Choisissez Encoder pour échapper du texte pour le HTML, ou Décoder pour reconvertir les entités en caractères.
- Collez votre texte.
- Encodez éventuellement chaque caractère non ASCII sous forme d’entité numérique.
- Copiez le résultat.
Questions
- Quels caractères faut-il échapper en HTML ?
- & et < toujours ; > par précaution ; et " ou ' dans les valeurs d’attributs. Échapper ces cinq caractères suffit pour afficher du texte saisi par l’utilisateur en toute sécurité dans du HTML.
- L’échappement protège-t-il contre les attaques XSS ?
- Échapper la sortie selon le contexte est la protection essentielle pour le texte et les attributs HTML. Cela ne suffit pas dans les balises script, les attributs de gestionnaires d’événements ou les URL, qui nécessitent leur propre encodage.
- Faut-il encoder les lettres accentuées ?
- Pas si votre page est servie en UTF-8, ce qui est le cas de presque toutes les pages modernes. Encoder tous les caractères non ASCII n’est utile que pour les systèmes qui ne gèrent pas l’UTF-8.
- Quelle est la différence entre et une espace normale ?
- est une espace insécable, U+00A0. Le navigateur ne coupe pas la ligne à cet endroit et, contrairement aux espaces normales, ne fusionne pas plusieurs d’entre elles en une seule. Utilisez-la pour garder ensemble des valeurs comme « 10 km ». Pour la mise en page et l’espacement, utilisez du CSS plutôt que des suites de .
- Faut-il utiliser ' ou ' pour une apostrophe ?
- Les deux fonctionnent en HTML5 et en XML, mais ' ne faisait pas partie de HTML 4 : les anciens parseurs et certains clients de messagerie ne le reconnaissent donc pas. ' fonctionne partout, c’est pourquoi cet encodeur l’utilise. Dans un attribut entre guillemets doubles, il n’est pas du tout nécessaire d’échapper l’apostrophe.
- Quelle est la différence entre l’échappement HTML et l’encodage URL ?
- L’échappement HTML rend un texte sûr dans du HTML ; l’encodage URL rend un texte sûr dans une URL. Un lien dans un attribut href a besoin des deux : encodez d’abord en pourcent chaque valeur de paramètre, puis échappez en HTML l’URL entière, pour que chaque & entre les paramètres devienne &. L’outil Encodage, décodage et analyse d’URL se charge de l’étape d’encodage pourcent.
Que sont les entités HTML ?
Une entité HTML est un court fragment de texte qui représente un caractère. Elle commence par & et se termine par un point-virgule. Les entités nommées utilisent un mot, comme & pour & ou © pour ©. Les entités numériques utilisent le point de code Unicode, soit en décimal comme ©, soit en hexadécimal comme ©. Le navigateur les remplace par le vrai caractère lors de l’affichage de la page, si bien que le balisage lui-même peut rester en ASCII simple.
Les entités résolvent deux problèmes. D’abord, elles permettent d’afficher des caractères que le HTML interpréterait sinon comme du balisage : un < littéral ouvre une balise et un & isolé ouvre une entité. Ensuite, elles permettent d’écrire des caractères que votre clavier ou l’encodage de votre fichier ne gèrent pas. HTML5 définit plus de 2 000 entités nommées, et n’importe quel caractère Unicode, y compris les emoji comme 🚀 pour 🚀, peut s’écrire sous forme numérique.
Comment échapper du HTML en JavaScript ?
Dans le navigateur, le moyen le plus sûr d’afficher du texte saisi par l’utilisateur est de ne pas construire de chaînes HTML du tout. Définissez element.textContent au lieu d’innerHTML, et le navigateur traite la valeur comme du texte. React, Vue, Svelte et Angular échappent aussi par défaut les valeurs interpolées. Le risque revient dès que vous utilisez innerHTML, dangerouslySetInnerHTML ou v-html avec des données que vous ne contrôlez pas, et c’est là que commencent la plupart des failles XSS des applications modernes.
Quand vous avez vraiment besoin d’une chaîne échappée, pour un template ou le corps d’un e-mail, remplacez les cinq caractères spéciaux : l’esperluette d’abord, puis <, >, le guillemet double et le guillemet simple. Échapper & en premier est important, sinon < devient &lt;. C’est ce que fait cet outil d’échappement HTML en mode Encoder, en écrivant le guillemet simple '. Utilisez Décoder pour vérifier ce que contient réellement une chaîne provenant d’une base de données ou d’une API.
Pourquoi vois-je &amp; sur ma page ? Corriger le double échappement
Si une page affiche & ou " comme texte littéral, la chaîne a été échappée deux fois. En général, la valeur a été échappée avant d’être stockée, puis le template l’a échappée de nouveau à l’affichage. Le premier passage transforme & en &, le second transforme cela en &amp;, et le navigateur l’affiche comme &. Le même problème survient avec les flux RSS, les champs de CMS et les API JSON qui échappent le HTML à votre place.
La solution consiste à échapper une seule fois, au moment où vous écrivez dans le HTML, et à stocker du texte brut partout ailleurs. Pour nettoyer des données existantes, collez-les en mode Décoder : chaque passage retire une couche, donc relancez-le s’il reste des entités. Le décodage utilise le parseur du navigateur sur un élément textarea, qui lit les entités sans exécuter de balises ni de scripts. Pour comparer les versions avant et après, utilisez le Comparateur de textes.
Entités HTML courantes
Les caractères à échapper en HTML, et les caractères typographiques les plus recherchés.
| Caractère | Entité nommée | Entité numérique |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| espace insécable | |   |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
| ° | ° | ° |
| × | × | × |
| ÷ | ÷ | ÷ |
| – | – | – |
| — | — | — |
| … | … | … |
| « | « | « |
| » | » | » |
| → | → | → |
| ← | ← | ← |
| ✓ | ✓ | ✓ |
Quelque chose ne fonctionne pas, ou un résultat semble faux ? Signaler un problème avec cet outil