Outil d'échappement HTML + liste d'entités HTML consultable | We.Inc
Échappez et déséchappez du HTML dans votre navigateur, puis cherchez parmi 100 entités et symboles HTML courants. Copiez en un clic l'entité nommée, le code numérique, la valeur CSS content ou l'échappement JS.
Échapper du HTML consiste à remplacer par des entités les caractères que le navigateur interprète comme du balisage : & devient &, < devient < et > devient >. Dans les valeurs d'attributs, les guillemets doivent aussi être échappés. Collez du texte ci-dessous pour l'échapper ou le déséchapper, ou cherchez dans le tableau des symboles et copiez n'importe quelle entité sous forme de nom, de nombre ou de valeur CSS.
Les cinq caractères qui comptent
Caractère
Entité
Quand faut-il l'échapper
&
Toujours dans le texte, quand il pourrait commencer une référence
<
Toujours dans le contenu textuel
>
Bonne pratique partout, obligatoire dans quelques contextes
"
Dans les valeurs d'attributs entourées de guillemets doubles
' ou '
Dans les valeurs d'attributs entourées de guillemets simples
Un convertisseur dans les deux sens pour des blocs de texte entiers, plus une liste consultable des symboles qu'on utilise vraiment : guillemets, tirets, espaces, devises, maths, flèches, lettres grecques et emoji. Chaque ligne se copie de quatre façons.
Collez du texte ou du balisage dans la zone et choisissez Échapper ou Déséchapper. Le résultat se met à jour pendant la saisie.
Cochez Mode attribut quand le texte va dans une valeur d'attribut, pour que les guillemets soient aussi échappés.
Cochez Encoder le non-ASCII si le fichier sera enregistré ou envoyé dans un autre encodage que UTF-8 : chaque lettre accentuée et chaque symbole devient une référence numérique.
Cherchez dans le tableau par nom, symbole ou groupe, puis cliquez sur Nom, Nombre, CSS ou JS pour copier cette forme.
Échappez au moment où vous insérez le texte dans le HTML, pas au moment où vous l'enregistrez. Stocker du texte déjà échappé mène plus tard à un double échappement comme &amp;.
Les frameworks comme React échappent le contenu textuel pour vous. L'échappement manuel n'est nécessaire que si vous construisez des chaînes HTML à la main.
Une espace insécable ( ) garde deux mots sur la même ligne, par exemple un nombre et son unité. N'en enchaînez pas pour la mise en page : utilisez plutôt les marges CSS.
En CSS, la propriété content prend une barre oblique inverse suivie du code hexadécimal, une flèche vers la droite s'écrit donc content: "\2192". Ajoutez une espace après le code si le caractère suivant est un chiffre hexadécimal.
Questions fréquentes
Quelle est la différence entre une entité nommée et une entité numérique ?
Ai-je encore besoin d'entités si ma page est en UTF-8 ?
Seulement pour les caractères qui ont un sens dans le balisage : &, < et, dans les attributs, le guillemet que vous avez utilisé. Avec une page UTF-8, vous pouvez taper directement des symboles comme €, é ou →. Les entités sont alors facultatives et servent surtout quand un éditeur ou un système d'e-mail abîme le texte non ASCII.
' est-il du HTML valide ?
Oui, en HTML5. Il manquait dans HTML 4, c'est pourquoi le code plus ancien utilise ' à la place. Les deux fonctionnent dans tous les navigateurs actuels, et l'option d'échappement de cette page produit ' pour la compatibilité la plus large.
Échapper le HTML suffit-il à bloquer les failles XSS ?
Cela empêche le texte injecté de devenir du balisage dans le contenu normal des éléments et dans les attributs entre guillemets. Cela ne rend pas une valeur sûre dans un bloc script, un gestionnaire d'événement en ligne, un attribut style ou une URL comme href, qui ont chacun besoin de leur propre encodage ou validation. Utilisez l'échappement intégré de votre framework et évitez autant que possible de construire du HTML à partir de chaînes.
Mon texte est-il envoyé quelque part ?
Non. L'échappement et le déséchappement s'exécutent dans votre navigateur, et rien de ce que vous collez ne quitte la page.
Pourquoi les navigateurs ont besoin d'entités
Un analyseur HTML lit < comme le début d'une balise et & comme le début d'une référence de caractère. Si un nom de produit ou un exemple de code contient ces caractères, le navigateur peut masquer une partie du texte, le fusionner avec la balise suivante ou, dans le pire des cas, exécuter du balisage injecté. Les échapper indique à l'analyseur d'afficher le caractère au lieu de l'interpréter.
La règle de base : échappez &, < et > dans le texte, et échappez aussi le guillemet dans les valeurs d'attributs. Tout le reste relève du confort ou de l'encodage.
Les entités en CSS et en JavaScript
Les entités HTML ne fonctionnent qu'en HTML. Dans une feuille de style, un caractère s'écrit avec une barre oblique inverse suivie de son code hexadécimal, c'est pourquoi le tableau propose une colonne CSS pour les icônes en pseudo-élément et les puces personnalisées. Dans les chaînes JavaScript, l'équivalent est \u suivi de quatre chiffres hexadécimaux, ou \u{...} pour les caractères au-delà de U+FFFF comme les emoji.
Si vous définissez du texte avec textContent en JavaScript, ne l'échappez jamais avant : le navigateur le traite déjà comme du texte brut, et l'échappement afficherait l'entité telle quelle.