Texte et code / Guides

Échappement HTML, URL et JavaScript : suivre les couches dans l’ordre

Une valeur peut transiter via une URL, un document HTML et une source JavaScript. Chaque destination interprète différents caractères comme syntaxe.

Nommer la destination immédiate

Supposons qu'une valeur de recherche soit A&B "C". Dans un composant de requête URL, l'esperluette sépare normalement les paramètres, elle doit donc être codée dans le cadre de la valeur avant que la chaîne de requête ne soit assemblée. Dans le texte HTML, une esperluette peut introduire une référence de caractère et un crochet angulaire peut introduire un balisage. Dans une chaîne littérale JavaScript, les guillemets et les barres obliques inverses ont leur propre syntaxe. Il s’agit de trois contextes d’analyse distincts. Une sortie sûre pour l’un ne l’est pas automatiquement pour le suivant. Une application de production doit utiliser des API et des modèles de plate-forme contextuels plutôt que d'assembler le balisage par concaténation.

Travailler la première limite

Si la clé de requête est q, codez la valeur en tant que composant d'URL, puis placez-la après q=. L'esperluette devient %26 et les guillemets sont représentés selon les règles de l'encodeur URL. Encoder l'intégralité de l'URL terminée comme s'il s'agissait d'une valeur encoderait également sa ponctuation structurelle et produirait une adresse erronée. Si l'URL résultante est affichée sous forme de texte de lien dans une page HTML, le nœud de texte a alors besoin d'une représentation HTML sécurisée. S'il est placé dans un attribut HTML, utilisez un sérialiseur sécurisé pour les attributs, qui possède ses propres règles de citation.

Chaque analyseur interprète sa propre syntaxe.
  1. Valeur initiale : A&B « C »
  2. Composant URL : encoder les caractères réservés
  3. Sortie HTML ou JavaScript : échapper pour ce contexte

Ne faites pas de JavaScript le format de transport

Un script peut avoir besoin de stocker la valeur d'origine dans un littéral entre guillemets, ce qui appelle l'échappement de la chaîne JavaScript. Il s'agit d'un problème de code source et ne remplace pas l'encodage des composants URL ou l'encodage de la sortie HTML. Évitez de placer des entrées non fiables directement dans la source du script en ligne ; l'utilisation d'attributs de données ou d'un élément de script avec un JSON soigneusement sérialisé peut être plus sûre lorsqu'elle est implémentée par des frameworks maintenus. L'outil d'échappement JavaScript MultiVerto illustre les caractères littéraux de chaîne, mais ne peut pas certifier qu'une application entière est à l'abri de l'injection de script. La sécurité dépend du contexte réel de l'analyseur et du code environnant.

Décoder dans l'ordre inverse

À la réception, un analyseur d'URL extrait q et décode en pourcentage le composant une fois. Un analyseur HTML traite les entités lors de la construction de son document ; un navigateur ne décode pas en pourcentage le texte ordinaire simplement parce qu'il apparaît sur une page. JavaScript interprète ses propres échappements littéraux lorsqu'il analyse le code source. L'application du mauvais décodeur peut laisser des séquences visibles telles que %26 ou créer des données qui sont ensuite interprétées comme une syntaxe dans un autre contexte. Conservez la valeur brute d'origine séparée de chaque représentation sérialisée afin qu'un affichage destiné à l'utilisateur ne devienne pas accidentellement la prochaine entrée de traitement.

Une liste de contrôle de révision pour une vraie application

Dessinez le chemin de la valeur source au composant URL, puis au texte ou à l'attribut HTML, et ensuite seulement à toute utilisation de script. À chaque flèche, choisissez l'API pour cette destination exacte et testez les caractères tels que l'esperluette, les guillemets, le signe inférieur à et les lettres non ASCII. Vérifiez la page finale rendue et l'URL analysée résultante, pas seulement une chaîne codée intermédiaire. L'échappement n'accorde pas la confiance ni ne valide une cible de lien ; des vérifications de politique distinctes peuvent toujours être nécessaires. Les convertisseurs liés aident à démontrer chaque couche avec un petit échantillon avant de l'implémenter dans un framework.

Essayer le convertisseur

Essayez le codage d'entité HTML, puis comparez les outils URL et JavaScript.

Échappez les caractères &, <, > et les guillemets en entités HTML pour afficher du code comme du texte.

Ouvrir le convertisseur complet

Autres guides

Guides de conversion

Explorer les guides