Encodez ou décodez des entités HTML _

Comment fonctionne l'encodage des entités HTML

Une entité HTML est une référence de caractère que le navigateur interprète comme un seul caractère. Les cinq caractères HTML réservés (<, >, &, ", ') doivent toujours être encodés lorsqu'un texte est rendu en HTML ; tout le reste est optionnel et dépend de l'encodage du document.

1. Choisissez un mode et une portée. Le mode Encoder parcourt l'entrée caractère par caractère. Le mode Décoder recherche les motifs d'entités dans l'entrée. La bascule de portée détermine si seuls les cinq caractères HTML-safe sont encodés, ou si chaque point de code non-ASCII est également réécrit.
2. Choisissez un style d'entité. Les entités nommées (©) se lisent bien dans le code source. Les références décimales (©) et hexadécimales (©) couvrent tous les points de code Unicode sans nécessiter de nom. Les anciens clients de messagerie et les parseurs XML préfèrent les formes numériques.
3. Parcourir l'entrée. À l'encodage, chaque point de code est lu et recherché dans une table intégrée d'environ 200 entités nommées communes. Les manques basculent sur le numérique. Au décodage, on parcourt avec une regex unique qui détecte &name;, &#NNN; et &#xHH; en une seule passe.
4. Correspondance avec les caractères. Les correspondances nommées sont résolues via une table inverse. Les correspondances numériques passent par String.fromCodePoint en base 10 ou 16. Les entités nommées inconnues sont laissées intactes afin qu'une entrée partielle effectue un aller-retour sans perte.
5. Mode en direct. Activez le mode en direct et chaque frappe relance la conversion avec un anti-rebond de 150 ms. Utile lorsque vous peaufinez un extrait et souhaitez un retour immédiat avant de le coller dans un gabarit.

Pourquoi encoder des entités HTML

• Empêcher le contenu utilisateur de casser la mise en page. Lorsqu'un utilisateur saisit un < parasite dans un champ de commentaire, insérer ce texte directement en HTML réécrit le reste de la page. Encoder d'abord les caractères réservés fait en sorte que le navigateur affiche le caractère au lieu de l'interpréter comme le début d'une balise.
• Conserver la validité des valeurs d'attributs. Intégrer une chaîne entre guillemets dans un attribut HTML nécessite de remplacer le guillemet incorporé par " (pour les attributs entre guillemets doubles) ou ' (pour les simples). Sinon, le parseur ferme l'attribut prématurément et le reste de la ligne devient du balisage parasite.
• Neutraliser le HTML accidentel dans les données stockées. Les journaux, rapports de bogues et exports de conversations contiennent souvent de vrais chevrons et esperluettes. Encoder le dump avant de le coller dans une page de documentation maintient ce contenu visible sous forme de texte au lieu de déclencher le moteur de rendu ou la détection automatique de liens.
• Partager des extraits de code en toute sécurité. Publier un exemple de balise comme <script>alert(1)</script> dans un article de blog, un e-mail ou un message Slack nécessite d'encoder les chevrons pour que l'extrait s'affiche plutôt que s'exécute. La même technique s'applique aux corps de flux RSS et aux champs `description` JSON-LD.

Applications courantes

L'encodage des entités apparaît partout où du texte brut est composé en HTML à l'exécution — même lorsque le framework le gère habituellement pour vous, l'outil manuel est utile pour les cas où il ne le fait pas.

• Gabarits rendus côté serveur : Jinja2, ERB, Twig et Handlebars échappent automatiquement par défaut, mais les blocs raw et les marqueurs `safe` désactivent cela — le codec vous permet de confirmer ce que l'échappement aurait produit.
• Création d'e-mails et de newsletters : de nombreux moteurs de gabarits ESP n'échappent pas automatiquement les champs de fusion, donc les guillemets typographiques et les symboles de copyright dans les noms fournis par l'utilisateur nécessitent un pré-encodage.
• Documentation et exemples de code : coller une balise HTML exemple dans un article de blog Markdown ou un extrait de site statique nécessite d'encoder les chevrons pour que le moteur de rendu le traite comme du texte visible.

Exemple concret

Collez <script>alert('hi')</script> dans l'entrée avec le mode Encoder, style Nommé, portée Minimal. La sortie donne <script>alert('hi')</script>. Passez le style en Numérique hex et la même entrée produit <script>alert('hi')</script>. Basculez le mode en Décoder, collez la chaîne encodée et la balise d'origine revient intacte.

FAQ

Que sont les entités HTML ?

Les entités HTML sont des références de caractères que le navigateur substitue en caractères uniques lors de l'analyse de la page. Elles se présentent sous trois formes : nommée (comme & pour &), numérique décimale (&) et numérique hexadécimale (&). Les cinq caractères HTML réservés (<, >, &, ", ') doivent être encodés chaque fois que le texte est inséré en HTML. Les quelque 2 225 autres entités nommées couvrent les symboles, les accents et les lettres grecques, mais sont optionnelles dès lors que l'encodage du document est UTF-8.

Quand utiliser des entités nommées plutôt que numériques ?

Utilisez les entités nommées lorsque vous souhaitez que le code source soit lisible (un développeur qui révise © dans un gabarit comprend immédiatement). Utilisez les numériques (décimales ou hex) lorsque le consommateur est plus ancien ou plus strict — les parseurs XML, les anciens clients de messagerie et certains lecteurs de flux ne reconnaissent qu'un petit sous-ensemble des entités nommées HTML5, mais reconnaissent toutes les formes numériques. L'hex tend à s'imposer dans les contextes axés sur la sécurité car il correspond directement à la notation des points de code Unicode utilisée dans les documents de spécification.

Le décodage gère-t-il les entités hex comme & ?

Oui. Le décodeur utilise une regex unique qui détecte les trois formes d'entités en une seule passe : &name;, &#NNN; et &#xHH;. Les correspondances numériques sont résolues avec String.fromCodePoint en base 10 ou 16. Les entrées mixtes (nommées et numériques dans la même chaîne) se décodent correctement, et les noms inconnus sont laissés en texte littéral afin qu'une entrée partielle effectue un aller-retour sans perte.

Est-ce sûr d'utiliser avec des entrées non fiables ?

Le codec lui-même fonctionne uniquement dans le navigateur et n'envoie votre entrée nulle part. La sécurité de la sortie à intégrer dépend du contexte. L'encodage des entités gère les contextes de corps HTML et de valeurs d'attributs, ce qui couvre le cas de la Règle n°1 de l'OWASP. Les contextes JavaScript (gestionnaires d'événements inline, blocs `<script>`), CSS et URL nécessitent chacun leurs propres règles d'encodage — l'encodage des entités seul n'est pas suffisant. Pour une défense en profondeur côté serveur, associez-le à un moteur de gabarits sensible au contexte comme DOMPurify ou l'échappement automatique de votre framework.

L'encodage des entités côté navigateur se situe à la frontière entre la saisie utilisateur et le HTML rendu. Effectuer la conversion localement signifie que vous pouvez vérifier ce que votre framework aurait produit, sans jamais envoyer le texte d'origine à un outil tiers.