Qu'est-ce que l'Encodage d'Entité HTML ?

L'encodage d'entité HTML est une technique qui remplace les caractères spéciaux dans le HTML par leurs références d'entité correspondantes. Lorsque vous écrivez du HTML, certains caractères ont des significations particulières : < commence une balise, > termine une balise, & commence une entité, et " et ' délimitent les valeurs d'attributs. Si vous souhaitez afficher ces caractères littéralement dans votre page web sans qu'ils soient interprétés comme du code HTML, vous devez utiliser l'encodage d'entité.

Le navigateur affiche les références d'entité comme les caractères correspondants sans les interpréter comme du balisage. Ce mécanisme est fondamental pour le développement web, jouant un rôle critique à la fois dans l'affichage du contenu et la sécurité. Sans encodage d'entité, chaque chevron dans le contenu généré par l'utilisateur serait traité comme du HTML, ce qui pourrait casser la mise en page des pages ou créer de graves vulnérabilités de sécurité.

Pourquoi l'Encodage d'Entité HTML est Important

L'encodage d'entité HTML sert deux objectifs principaux : l'affichage correct des caractères spéciaux et la prévention des attaques de type cross-site scripting (XSS). Lorsque vous utilisez des entités comme < au lieu de <, le navigateur affiche un signe inférieur plutôt que de l'interpréter comme le début d'une balise HTML.

Le scénario le plus courant où cela importe est le contenu généré par l'utilisateur. Si votre application accepte des commentaires, des messages de forum ou des descriptions de profil, vous devez encoder la sortie avant de la restituer en HTML. Sans encodage, un utilisateur pourrait soumettre <script>alert('xss')</script> et le navigateur l'exécuterait comme du JavaScript, donnant à l'attaquant le contrôle de ce qui s'exécute dans les navigateurs de vos visiteurs.

Référence des Entités HTML Courantes

Comment Fonctionne l'Encodage

Lorsqu'un analyseur HTML rencontre <, il reconnaît & comme le début d'une référence d'entité. Il lit ensuite le nom d'entité lt et se termine au point-virgule. L'analyseur recherche lt dans sa table d'entités et substitue le caractère correspondant < dans la sortie rendue.

Les références de caractères numériques fonctionnent de la même manière mais utilisent des valeurs décimales (<) ou hexadécimales (<). L'analyseur convertit la valeur numérique en point de code Unicode correspondant. Les références numériques peuvent représenter n'importe quel caractère Unicode, tandis que les entités nommées ne couvrent qu'un sous-ensemble de caractères fréquemment utilisés.

Encodage des Entrées Utilisateur

La règle la plus importante dans le développement web est d'encoder tout le contenu généré par l'utilisateur avant de le restituer en HTML. C'est ce qu'on appelle l'encodage contextuel de sortie et doit être appliqué au moment où les données quittent votre application et entrent dans le contexte HTML.

Exemple PHP

$userInput = '<script>alert("xss")</script>';
$safe = htmlspecialchars($userInput, ENT_QUOTES | ENT_HTML5, 'UTF-8');
echo $safe;
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Exemple JavaScript

function encodeHtml(str) {
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

const userInput = '<script>alert("xss")</script>';
console.log(encodeHtml(userInput));
// Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Exemple Python

import html

user_input = '<script>alert("xss")</script>'
safe = html.escape(user_input, quote=True)
print(safe)
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Exemple Ruby

require 'erb'

user_input = '<script>alert("xss")</script>'
safe = ERB::Util.html_escape(user_input)
puts safe
# Output: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

Contextes d'Encodage

L'encodage HTML n'est pas universel. Différents contextes dans un document HTML nécessitent différentes stratégies d'encodage.

Contexte du corps HTML — contenu entre balises comme <div>contenu</div>. Encodez les cinq caractères : <, >, &, ", '.

Contexte d'attribut HTML — valeurs dans les attributs comme <div class="valeur">. Encodez les cinq mêmes caractères, mais portez une attention particulière aux guillemets car ils délimitent les valeurs d'attributs.

Contexte URL — URLs dans les attributs href ou src. Utilisez l'encodage URL (%20 pour les espaces) plutôt que l'encodage d'entité HTML.

Contexte JavaScript — données intégrées dans les blocs <script>. Utilisez l'échappement de chaîne JavaScript (\x3C pour <) plutôt que l'encodage d'entité HTML.

Outil en Ligne

L'outil Encodeur et Décodeur d'Entités HTML sur Help2Code facilite l'encodage et le décodage des entités HTML. Collez votre texte, choisissez le mode encodage ou décodage, et copiez le résultat en un clic. C'est le moyen le plus rapide de convertir les caractères spéciaux lorsque vous n'écrivez pas de code de production.

Sécurité : Prévention des XSS

Le cross-site scripting reste l'une des vulnérabilités de sécurité web les plus courantes. La principale défense est un encodage de sortie approprié. Chaque framework inclut des fonctions d'encodage intégrées : Blade dans Laravel utilise {{ $var }} qui encode automatiquement la sortie, Twig utilise {{ var|e('html') }}, et React échappe automatiquement les expressions JSX.

L'erreur de prévention XSS la plus courante consiste à encoder les données au mauvais endroit dans votre pipeline. Encodez toujours au niveau de la couche de sortie, juste avant que les données ne soient rendues. Si vous encodez les données au moment de leur stockage dans la base de données, vous risquez un double encodage ou d'encoder des données qui seront utilisées dans des contextes non HTML comme les API JSON ou les modèles d'email.

Conclusion

L'encodage d'entité HTML est une compétence fondamentale pour tout développeur web. Il garantit que les caractères spéciaux s'affichent correctement et protège vos utilisateurs contre les attaques XSS. La règle clé est simple : encodez tout le contenu généré par l'utilisateur avant de le restituer en HTML. Utilisez l'outil Encodeur et Décodeur d'Entités HTML pour les conversions rapides, et fiez-vous à l'encodage intégré de votre framework pour le code de production.