Encodeur et décodeur HTML

Comment encoder et décoder des entités HTML

HTML est un langage de balisage : un signe < dans votre texte est ambigu, car le navigateur ne peut pas distinguer une balise d’une simple comparaison. Cet outil convertit les caractères réservés en références de caractères lors de l’encodage, et retransforme ces références en texte lisible lors du décodage — le tout dans votre navigateur.

1. Choisissez le sens. Sélectionnez Encoder pour rendre un texte brut sûr dans du HTML, ou Décoder pour retrouver le texte d’origine d’un document qui contient déjà des entités. Par exemple, décoder &lt;title&gt; renvoie <title>, prêt à être modifié ou analysé.

2. Collez le texte. Déposez un fragment, une valeur de gabarit ou une ligne de balisage dans la zone de saisie. Encoder Tom & Jerry produit Tom &amp; Jerry : l’esperluette devient inoffensive pour l’analyseur.

3. Choisissez le niveau d’échappement (encodage). Laissez « uniquement les cinq caractères critiques » activé pour les pages UTF-8 modernes : Café & Co. devient Café &amp; Co. Désactivez-le pour convertir aussi chaque caractère non ASCII en référence numérique — Café & Co. devient alors Caf&#233; &amp; Co. — utile pour les canaux anciens ou limités à l’ASCII.

4. Lancez la conversion et lisez les statistiques. L’outil affiche la longueur d’entrée, la longueur de sortie et le nombre de références créées ou résolues, ce qui permet de repérer immédiatement un fragment dont la taille a changé de façon inattendue.

5. Copiez le résultat. Le bouton de copie place la sortie dans le presse-papiers ; collez-la ensuite dans un fichier HTML, un champ de CMS, un modèle d’e-mail ou un littéral de gabarit JavaScript.

6. Vérifiez par décodage. Recollez la sortie encodée en mode Décoder : &lt;a href=&quot;/x&quot;&gt; renvoie <a href="/x">, ce qui confirme un aller-retour sans perte.

Qu’est-ce que l’encodage d’entités HTML ?

HTML traite certains caractères comme de la syntaxe. Un < ouvre une balise, un > la ferme, une esperluette & débute une référence de caractère et un guillemet délimite une valeur d’attribut. Lorsque vous insérez un texte ordinaire qui contient ces caractères, l’analyseur peut l’interpréter comme du balisage : un commentaire contenant <b> s’affiche soudain en gras, et une esperluette isolée peut avaler le mot suivant ou casser la page. L’échappement remplace chaque caractère réservé par une référence de caractère — un code court et sans ambiguïté, comme &lt; pour < — afin que le navigateur affiche le caractère d’origine au lieu de l’interpréter. Il existe deux familles de références. Les références nommées utilisent un mot mémorisable, comme &amp;, &copy; ou &nbsp;, tandis que les références numériques donnent le point de code en décimal (&#38;) ou en hexadécimal (&#x26;). Les deux écrivent le même caractère, mais la forme numérique fonctionne même pour des caractères que la spécification n’a jamais nommés, comme la plupart des émojis. Les cinq caractères qui doivent toujours être échappés dans du texte sont & , < , > , " et ' . Les deux guillemets comptent surtout à l’intérieur des valeurs d’attribut, mais les échapper partout reste un choix sûr et prévisible. L’échappement est aussi une première ligne de défense contre les scripts intersites (XSS). Si une entrée non fiable telle que <script>alert(1)</script> est écrite dans une page sans échappement, le navigateur l’exécute. Échapper les chevrons transforme cette même entrée en texte visible. L’échappement n’est toutefois pas une stratégie de sécurité complète : assainir du HTML enrichi exige une bibliothèque consciente du contexte, et l’échappement adapté à un contexte (un corps HTML) est incorrect pour un autre (une requête d’URL ou une chaîne JavaScript). Pour du texte brut inséré dans du HTML, l’échappement correct est en revanche nécessaire et suffisant. Toutes les conversions présentées ici s’exécutent en JavaScript natif sur votre appareil. Rien n’est envoyé à un serveur, ce qui compte lorsque le texte contient des identifiants, des données personnelles ou du contenu non publié.

Applications courantes

1. Contenu généré par les utilisateurs : un commentaire qui dit « J’adore <3 ce produit » doit s’afficher tel quel. Échapper le chevron donne « J’adore &lt;3 ce produit », et le navigateur montre le texte au lieu d’ouvrir une balise.

2. Exemples de code et tutoriels : pour afficher <div class="box"> dans une leçon, vous écrivez &lt;div class=&quot;box&quot;&gt;, et le décodage redonne le fragment propre à copier.

3. Valeurs d’attribut : un titre de produit contenant un guillemet double, comme Widget 12" Deluxe, casse title="Widget 12" Deluxe"; encoder le guillemet en &quot; préserve l’attribut et la validité du balisage.

4. Canaux anciens ou limités à l’ASCII : certains clients de messagerie, passerelles SMS et systèmes de gestion de contenu anciens ne gèrent que l’ASCII ; Café, € et → sont donc convertis en références numériques comme Caf&#233;, &euro; et &#8594; tout en restant lisibles.

5. Nettoyage de contenu collecté ou issu d’un CMS : une description stockée sous la forme Gr&uuml;&szlig;e aus M&uuml;nchen est illisible pour du code ; le décodage redonne Grüße aus München pour l’analyse, la traduction ou un comptage de mots.

Références nommées, décimales et hexadécimales

Chaque caractère peut s’écrire de trois façons. La lettre A s’écrit simplement A, son point de code est U+0041, et ses références sont &#65; (décimal) et &#x41; (hexadécimal). Quelques caractères ont en plus un nom mémorisable : &amp; pour &, &lt; pour <, &quot; pour " , &apos; pour ' et &nbsp; pour une espace insécable. Les références nommées sont lisibles dans le code source ; les références numériques fonctionnent toujours, même pour des caractères que la spécification n’a jamais nommés.

Cet outil émet &amp;, &lt;, &gt;, &quot; et &#39; lors de l’encodage. L’apostrophe s’écrit &#39; plutôt que &apos; car &apos; n’est pas reconnu dans l’ancienne spécification HTML4 et &#39; est accepté partout. Au décodage, il reconnaît les entités nommées courantes, les références décimales comme &#233; pour é et les références hexadécimales comme &#xE9; pour ce même caractère. Une esperluette suivie de quelque chose qui n’est pas une référence valide est laissée intacte : un texte ordinaire n’est donc jamais altéré.

Erreurs fréquentes à éviter

Le premier piège est le double encodage. Si vous encodez Tom &amp; Jerry une seconde fois, vous obtenez Tom &amp;amp; Jerry, qui s’affiche littéralement Tom &amp; Jerry. Encodez toujours du texte brut, jamais du texte déjà échappé. En cas de doute, collez la valeur en mode Décoder pour voir ce que le navigateur afficherait.

Le deuxième piège est le double décodage. Décoder &amp;lt; une fois donne correctement &lt; ; le décoder une seconde fois donne < et détruit une information qui devait rester visible. Cet outil effectue une seule passe de gauche à droite : chaque référence n’est résolue qu’une fois et une entité qu’il vient de produire n’est jamais réinterprétée.

Le troisième piège consiste à confondre échappement et assainissement. L’échappement rend visibles les caractères réservés, mais il ne supprime pas les scripts d’un HTML que vous comptez afficher comme balisage enrichi. Pour cela, il faut un assainisseur dédié avec une liste blanche stricte. Enfin, n’oubliez pas le contexte : l’échappement correct pour un corps HTML est incorrect pour une chaîne de requête d’URL ou une valeur JSON.

Échappement, encodage d’URL et assainissement

Trois transformations sont souvent confondues. L’échappement HTML convertit les caractères spéciaux pour l’analyseur HTML — & , < , > , " et ' — en références de caractères : c’est ce que fait cet outil. L’encodage en pourcentage, appelé aussi encodage d’URL et produit par encodeURIComponent, remplace les caractères interdits ou porteurs de sens structurel dans une URL par des séquences %XX : une espace devient %20 et & devient %26.

L’assainissement poursuit un objectif tout autre. Il analyse du HTML non fiable et supprime les éléments, attributs et protocoles dangereux tout en conservant un sous-ensemble sûr du balisage : un éditeur de texte enrichi peut ainsi accepter le gras et les liens mais retirer les scripts et les gestionnaires d’événements. Utilisez l’échappement HTML pour du texte brut affiché dans une page, l’encodage d’URL pour les URL et les chaînes de requête, et un assainisseur éprouvé lorsque vous devez accepter du HTML enrichi de vos utilisateurs. Choisir la mauvaise transformation est une cause fréquente de pages cassées et de failles de sécurité.

Utilitaires Connexes

• Formateur & Validateur JSON en Ligne
• Encodeur & Décodeur Base64 en Ligne
• Générateur de Mots de Passe — Mots de Passe Forts
• Encodeur & Décodeur d'URL — Encodage Pourcent
• Générateur d'UUID — Créer des UUID v4 en Ligne
• Supprimer les Lignes en Double — Outil Gratuit