Outils de développement · Échappement d'entité HTML
Décoder des entités HTML sans innerHTML : comment fonctionne un décodeur de table de recherche
· Comment ça marche
HTML sécurité encodage
L'astuce populaire consistant à décoder les entités en les attribuant à innerHTML exécute votre entrée via l'analyseur HTML, ce qui est exactement ce que vous ne voulez pas. Cet article explique l'approche basée sur des tableaux plus sûre et comment elle gère les références nommées, décimales et hexadécimales.
Le décodeur qui a exécuté un <img onerror> — un cas concret où « il suffit de le décoder » est devenu une exécution de script
L'entrée commune element.innerHTML = fait plus que décoder &. Si l'entrée contient également <img src=x onerror=...>, le navigateur crée un élément d'image et un attribut de gestionnaire d'événements. Selon la manière dont ce nœud est attaché et chargé, cela peut transformer un raccourci de formatage en exécution de script. Une chaîne de type HTML collée doit rester des données lorsque la seule tâche consiste à résoudre les références de caractères, et non être analysée dans une arborescence DOM.
Ce que innerHTML fait réellement avec une chaîne : analyse, création d'éléments et attributs du gestionnaire d'événements, pas seulement le remplacement d'entités
innerHTML appelle l'analyseur HTML : les balises deviennent des nœuds, les attributs acquièrent une signification pour le navigateur et une lecture ultérieure de textContent supprime le balisage du résultat. Une balise <strong> que vous aviez l'intention de conserver en tant qu'entrée littérale peut disparaître lors du formatage du texte. Un élément détaché ne constitue pas une garantie générale de sécurité ; le code réinsère souvent ce sous-arbre ou utilise le code HTML résultant ailleurs. Si vous devez afficher une entrée non fiable, attribuez textContent et nettoyez uniquement lorsque vous choisissez délibérément d'afficher du HTML.
L'approche par table de recherche — une expression régulière pour &name;, &#NNN; et &#xHHH;, et une carte des noms aux caractères
Le décodeur de ToolAcre utilise une expression régulière limitée pour trouver une référence de la forme &name;, { ou {. Les références nommées sont recherchées dans un tableau explicite et pratique, comprenant amp, lt, gt, guillemets et typographie courante. Un nom inconnu est laissé tel qu'écrit plutôt que deviné. Cette approche ne crée aucun élément et n'appelle aucun analyseur HTML ; il remplace simplement les sous-chaînes reconnues dans une chaîne. Le tableau est délibérément un sous-ensemble, et non toutes les références de caractères nommées HTML.
Gestion des références numériques - analyse des points de code décimaux et hexadécimaux et conversion de ceux-ci en chaînes, y compris les caractères astraux
Pour une référence numérique, analysez le nombre décimal après &# ou l'hexadécimal après &#x, puis transformez le point de code numérique en caractère avec String.fromCodePoint. Une valeur astrale telle que 0x1F600 donne un emoji, et non deux caractères imprimables indépendants. L'implémentation mappe également les valeurs historiques de la plage de contrôle Windows-1252 comme le font les navigateurs ; zéro, les points de code de substitution et les valeurs supérieures à U+10FFFF deviennent un caractère de remplacement. Cette gestion explicite des erreurs empêche un numéro invalide de faire planter le décodeur.
Exemple concret : décoder une chaîne qui mélange &, © et 😀 — chaque correspondance résolue à partir de la table ou du nombre
Décodez l'entrée littérale &, © et 😀 : la première référence traverse la table nommée vers &, la décimale 169 devient © et l'hexagone 1F600 devient 😀. Incluez un <img onerror="alert(1)"> brut à côté d’eux. Le décodeur renvoie cette séquence ressemblant à une balise sous forme de caractères de chaîne ordinaires ; il ne crée pas d'image ni n'exécute d'événement. Lorsque vous placez le résultat dans une page réelle plus tard, utilisez un récepteur de texte sécurisé plutôt que de prendre la chaîne décodée et de la réattribuer à innerHTML.
Ce que l'approche table ne fera pas : les anciennes références sans point-virgule et les bizarreries de récupération d'erreur de l'analyseur, à moins qu'elles ne soient délibérément mises en œuvre
L’approche de recherche ne reproduit intentionnellement pas les anciennes règles de récupération sans point-virgule de l’analyseur HTML. &copier sans point-virgule peut rester intact. La table nommée fixe omet également bon nombre des plus de deux mille références nommées HTML5. Ces limitations sont des compromis honnêtes pour un petit décodeur prévisible ; accepter uniquement les références explicites terminées évite de traiter la prose arbitraire contenant une esperluette comme un balisage. Vérifiez les noms pris en charge documentés par l’outil si la compatibilité complète du navigateur est essentielle.
Ce que cela ne couvre pas : nettoyer le HTML que vous avez l'intention de restituer, ce qui est un problème différent
Le décodage des références ne nettoie pas le HTML pour l'affichage. Si le texte décodé contient une séquence <script>, il reste dangereux si une autre partie d'une application l'insère ultérieurement comme balisage. Les contextes tels qu'un attribut HTML, une chaîne JavaScript et une URL nécessitent chacun leur propre codage et politique de sortie. ToolAcre renvoie du texte ; il ne peut pas sécuriser un futur évier dangereux.
À retenir : traitez les entrées comme des données - comment l'échappement d'entité HTML décode avec une table de recherche plutôt qu'avec l'analyseur HTML, afin que votre entrée reste du texte
Traitez les entrées comme des données. L'échappement d'entité HTML décode avec une table et une arithmétique de points de code, et non avec une astuce innerHTML, de sorte que les charges utiles ressemblant à du balisage restent des caractères inertes dans l'outil. Essayez les trois références, puis inspectez à la fois le texte décodé et la façon dont vous prévoyez de l'utiliser ensuite : la limite de sécurité est perdue si vous l'analysez au format HTML.