Échapper / Déséchapper HTML

Qu'est-ce que l'échappement HTML ?

L'échappement HTML est le processus qui consiste à remplacer les caractères ayant une signification particulière en HTML par leurs références d'entité correspondantes. Les cinq caractères qui doivent obligatoirement être échappés sont l'esperluette (&), le signe inférieur (<), le signe supérieur (>), le guillemet double (") et le guillemet simple ('). Sans échappement, le navigateur interprète ces caractères comme des instructions de balisage plutôt que du texte à afficher, ce qui casse le rendu de la page et ouvre la voie aux attaques par injection.

La spécification HTML (maintenue par le WHATWG) définit deux formes de références de caractères : les entités nommées comme &amp; et les entités numériques comme &#38; ou &#x26;. Les entités nommées sont plus lisibles dans le code source. Les entités numériques (décimales ou hexadécimales) peuvent représenter n'importe quel point de code Unicode, ce qui les rend utiles pour les caractères sans alias nommé. Les deux formes produisent une sortie identique dans le navigateur.

Le déséchappement (aussi appelé décodage) est l'opération inverse : convertir les références d'entité en leurs caractères littéraux. C'est courant lors de l'extraction de texte d'une source HTML, de la migration de contenu entre systèmes, ou du débogage de gabarits qui encodent les entités en double. Cet outil gère les deux sens dans le navigateur, vous permettant de vérifier votre logique d'échappement ou de récupérer du texte brut depuis une source HTML en quelques secondes.

Pourquoi utiliser un outil d'échappement HTML ?

Remplacer manuellement les chevrons et les esperluettes dans de grands blocs de texte est fastidieux et source d'erreurs. Un outil dédié convertit votre entrée en une seule étape, sans installation requise.

Cas d'utilisation de l'échappement HTML

Tableau de référence des entités HTML

Le tableau ci-dessous répertorie les entités HTML couramment utilisées. Les cinq caractères spéciaux (& < > " ') doivent toujours être échappés dans le contenu HTML et les valeurs d'attributs. Les autres entités sont facultatives mais utiles pour les caractères difficiles à saisir ou ambigus dans le code source.

Échappement vs. déséchappement : quand utiliser chacun

Les deux opérations sont inverses. Choisir le mauvais sens produit une sortie doublement encodée ou non protégée.

Exemples de code

Voici des exemples fonctionnels d'échappement et de déséchappement HTML en quatre langages. Chaque extrait couvre les deux sens et gère les cas limites comme les guillemets imbriqués et les entités numériques.

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

Questions fréquentes