HTML escape : bonnes pratiques, pièges et solutions

Qu'est-ce que le HTML escape ?

C’est l’action de convertir les caractères spéciaux en entités HTML sûres afin d’empêcher leur interprétation comme du code.

Les principales notions à connaître pour échapper correctement :

1 Caractères à échapper en priorité

Ils ont une signification particulière en HTML et peuvent briser l’affichage ou ouvrir une faille.

& (ampersand), < (inférieur), > (supérieur), " (guillemet), ' (apostrophe)

2 Contextes sensibles en HTML

L’échappement dépend du contexte où la donnée est injectée :

Texte, Attribut HTML (entre guillemets), URL/paramètres (href, src), JavaScript inline

3 Entités HTML standards utiles

Les encodages les plus fréquents à connaître :

& → &

< → <

> → >

" → "

' → '

4 Spécificités techniques

Éléments à ne pas négliger lors de l’échappement :

Éviter le double-échappement

Différences entre encodage HTML, URL et JS

Jeu de caractères UTF-8 cohérent

Sanitization pour HTML riche (ex.: DOMPurify)

Problèmes classiques

Entrées utilisateur non échappées (XSS)

Un contenu injecté devient du code exécuté si <, >, " ou ' ne sont pas encodés.

Attributs HTML cassés

Un guillemet non échappé ferme l’attribut et permet l’injection de nouveaux attributs.

Double-échappement visible

Le texte affiche &lt; au lieu de < si l’encodage est appliqué deux fois.

Mélange des contextes

Un encodage HTML ne remplace pas un encodage URL ni une sérialisation JS.

Exemple de problème courant :

# Entrée qui semble inoffensive mais exécute du JavaScript

string1 = "<img src=x onerror=alert(1)>"

string2 = "<img src=x onerror=alert(1)>" # Version échappée attendue

assert render(string1) == string2 # ❌ Échec si l’échappement n’est pas appliqué

Symptômes qui doivent vous alerter

🚨 Signaux d'alarme

!

Des balises s’affichent au lieu du texte attendu (ex.: <div> visible)

!

Une alerte XSS ou un WAF bloque des pages aléatoirement

!

Un attribut HTML casse l’interface après une entrée contenant des guillemets

!

Des entités s’affichent littéralement (&lt;) au lieu du caractère

!

Copier-coller d’un contenu externe provoque du HTML interprété

Comment les détecter

✨ Solution recommandée : Clean ASCII

Clean ASCII met en évidence les caractères et motifs nécessitant un échappement HTML et vous montre comment encoder correctement vos contenus pour un rendu sûr.

✅ Détection automatique

Repère &, <, >, " et ' dans les contextes sensibles

📊 Analyse complète

Contexte probable (texte, attribut, URL), risques et encodage conseillé

🧹 Nettoyage automatique

Conversion sûre vers entités HTML adaptées au contexte

💾 Export propre

Téléchargement du contenu encodé prêt à intégrer

🔍 Analyser l’échappement HTML

Autres méthodes de détection

Affichage dans l'éditeur

✓ Activez l’aperçu de rendu et comparez avec l’affichage en texte brut pour repérer les balises interprétées

✓ Installez des plugins qui surlignent les caractères à encoder (&, <, >, guillemets)

En ligne de commande (Unix)

# Chercher des balises/script et gestionnaires d’événements

grep -RInE "<script|on[a-zA-Z]+\\s*=|javascript:" .

# Détecter des & non suivis d’une entité valide (échappement manquant)

grep -RInE "&(?!amp;|lt;|gt;|quot;|apos;|#[0-9]+;|#x[0-9A-Fa-f]+;)" .

# Repérer l’usage de innerHTML potentiellement dangereux

grep -RInE "innerHTML\\s*=" src/

# Visualiser les caractères et entités brutes

sed -n 'l' index.html

En code

JavaScript

const escapeHtml = s => s.replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":"'"}[m]));

Python

import html; safe = html.escape(s, quote=True)

Excel / Google Sheets

SUBSTITUE(SUBSTITUE(SUBSTITUE(SUBSTITUE(SUBSTITUE(A1;"&";"&");"<";"<");">";">");"""";""");"'";"'")

Nettoyer et prévenir

🚀 Solution rapide avec Clean ASCII

Avant d’implémenter une chaîne complète de sanitization, utilisez Clean ASCII pour encoder rapidement les caractères sensibles en HTML.

✓ Détection des caractères à encoder

✓ Nettoyage et encodage sûrs

✓ Export immédiat

Encoder maintenant

Méthodes techniques avancées

🔧 Normaliser

✓ Activez l’auto-escape dans votre moteur de templates

✓ Uniformisez l’encodage UTF-8 de bout en bout

✓ Séparez clairement HTML, attributs, URL et JS pour appliquer l’encodage adapté

🧹 Filtrer

✓ N’insérez jamais du HTML brut provenant des utilisateurs

✓ Échappez &, <, >, " et ' dans le bon contexte; encodez les attributs avec des guillemets

✓ Pour HTML riche, appliquez une sanitization (ex.: DOMPurify)

⚙️ Automatiser

✓ Hook pre-commit pour détecter innerHTML/dangerouslySetInnerHTML

✓ Tests d’injection XSS en unitaires et end-to-end

✓ CSP stricte et encodage URL systématique pour les paramètres

Checklist rapide

Auto-escape activé dans les templates

Aucun innerHTML/dangerouslySetInnerHTML non contrôlé

Attributs encadrés par des guillemets et échappés

Entrées utilisateur encodées ou nettoyées côté serveur

CSP active et encodeURIComponent pour les URLs

Tests automatiques contre les injections XSS

Conclusion

L’échappement HTML est un réflexe de sécurité et de fiabilité d’affichage. Une simple conversion de caractères évite des heures de debug et des incidents.

Appliquez l’échappement adapté au contexte, automatisez les contrôles et vous éliminez la majorité des vecteurs XSS et erreurs de rendu.