Encodeur et décodeur d’entités HTML

Qu’est-ce qu’une entité HTML ?

Une entité HTML est une courte séquence qui commence par une esperluette et se termine, le plus souvent, par un point-virgule — comme celle qui représente l’esperluette elle-même ou celle qui représente un chevron ouvrant. Elle sert à écrire un caractère que le HTML ne peut pas laisser tel quel dans le texte, parce que ce caractère a un sens spécial pour l’analyseur : un chevron ouvre une balise, une esperluette ouvre justement une entité. Transformer du texte brut en ces séquences s’appelle encoder ; retrouver le texte d’origine à partir d’elles s’appelle décoder les entités HTML.

Il faut échapper un texte dans trois situations courantes. La première : vous insérez du texte saisi par un utilisateur — un commentaire, un pseudonyme, une adresse — dans une page HTML, et ce texte peut contenir un chevron ou une esperluette sans que son auteur l’ait voulu comme balisage. La deuxième : vous affichez un exemple de code sur une page, et ce code contient lui-même des chevrons qu’il ne faut surtout pas laisser interpréter comme du HTML. La troisième : vous collez du texte dans un CMS ou un éditeur qui réinterprète les symboles, et l’échappement lui retire toute prise.

Cet outil fait les deux sens dans le même écran : basculez sur Encoder pour transformer du texte brut en entités sûres, ou sur Décoder pour retrouver le texte d’origine à partir d’entités déjà écrites. Tout se calcule dans votre navigateur pendant que vous tapez.

Mode d’emploi

1. Choisissez le sens : basculez vers Encoder pour protéger du texte ou vers Décoder pour retrouver le texte d’origine à partir d’entités déjà écrites.
2. Collez ou tapez votre texte : le résultat apparaît dans le volet de droite au fil de la frappe et un bouton copie la sortie en un clic.
3. Ajustez les réglages si besoin : en encodage, choisissez où le texte va atterrir et cochez les cases pour les caractères non ASCII ou les références hexadécimales.

Encoder : cinq caractères, une règle de sûreté

Encoder n’est pas une opération floue : HTML n’a besoin d’échapper que cinq caractères — l’esperluette, les deux chevrons, et les deux sortes de guillemets. Lesquels vous sont réellement nécessaires dépend de l’endroit où le texte atterrit. Dans le texte d’un élément, seuls l’esperluette et le chevron ouvrant comptent. À l’intérieur d’un attribut délimité par un guillemet, il vous faut l’esperluette et ce guillemet précis. Échapper les cinq à la fois est le sur-ensemble sûr, et c’est le réglage par défaut de cet outil, parce qu’une chaîne écrite pour du texte d’élément finit souvent, plus tard, dans un attribut.

Il y a ici un piège réel que les tests de cet outil ont mis au jour. Échapper pour une valeur d’attribut laisse volontairement les chevrons intacts, puisqu’ils sont parfaitement légaux à l’intérieur d’un attribut entre guillemets. Mais cela signifie qu’une chaîne échappée de cette façon contient toujours une balise vivante. Encodez en mode « Valeur d’attribut » une balise de gras autour du mot « salut », et le résultat contient encore cette balise ; donnez-le à n’importe quel analyseur HTML et il ressort réduit à « salut », le balisage avalé en silence. C’est correct pour l’usage annoncé et dangereux partout ailleurs — d’où le réglage par défaut qui échappe les cinq caractères.

Un dernier détail compte pour les emojis et les caractères rares. L’échappement parcourt des caractères entiers plutôt que les unités en deux morceaux dans lesquelles JavaScript les stocke en interne, si bien qu’un emoji devient une seule référence numérique complète au lieu de deux moitiés qu’aucun analyseur ne saurait recoller.

Décoder : la réponse du navigateur, pas une table maison

Décoder a une réponse bien plus vaste qu’encoder, et le navigateur la possède déjà. La norme HTML définit 2 231 références de caractère nommées. Envoyer cette table entière à chaque visiteur voudrait dire la renvoyer chaque fois qu’elle change ; cet outil utilise donc l’analyseur HTML du navigateur lui-même — par définition la même implémentation qui décide de ce qu’une vraie page affiche, et sans le moindre octet à télécharger.

Ce choix apporte trois comportements qu’un décodeur écrit à la main rate presque toujours, et les trois sont dans la spécification — ce ne sont pas des bizarreries. D’abord, les références numériques comprises entre 80 et 9F en hexadécimal sont remappées : la référence du nombre décimal 128 ne produit pas le caractère de ce point de code mais le signe euro, parce que ces valeurs étaient historiquement des octets Windows-1252. Ensuite, une liste fixe de références nommées héritées fonctionne même sans point-virgule final, par compatibilité, alors que la majorité des autres l’exigent — c’est pourquoi la référence courte de l’esperluette se décode correctement même non terminée, et pourquoi l’exemple donné par la norme elle-même — l’esperluette suivie des lettres n, o, t, i, t puis d’un point-virgule — se décode en un signe de négation suivi des lettres i, t et du point-virgule, et non en un texte contenant le mot « not ». Enfin, un nom que la norme ne définit pas est laissé exactement tel qu’il est écrit, jamais deviné.

Décoder est le sens dangereux, et cette page le dit franchement. Encoder existait pour empêcher une balise d’être une balise ; décoder la lui rend. C’est pourquoi le résultat s’affiche toujours comme du texte brut et n’est jamais rendu comme du HTML, et pourquoi un avertissement apparaît dès que le résultat décodé contient une balise.

Pourquoi est-ce gratuit ?

Encoder et décoder des entités HTML est un calcul minuscule pour un navigateur, et le décodage s’appuie même sur l’analyseur HTML que ce navigateur embarque déjà. Il n’y a donc aucune raison de faire transiter votre texte par un serveur : cet outil s’exécute entièrement dans l’onglet ouvert devant vous, sans compte à créer, sans filigrane sur le résultat, et sans qu’un seul octet ne quitte votre machine.