L'encodage et le décodage d'URL, expliqués aux développeurs
Tapez une espace dans une URL, ou un mot en cyrillique, ou une esperluette qui appartient à vos données plutôt qu'à l'adresse elle-même, et quelque chose doit céder. Le web ne garantit un transport sûr que pour un petit ensemble prévisible de caractères ASCII. Tout le reste doit être enveloppé dans un format sur lequel routeurs, serveurs et navigateurs s'accordent tous. Ce format est l'encodage pour-cent, plus couramment appelé encodage d'URL, et cette page vous permet de convertir du texte dans les deux sens directement dans votre navigateur.
Ce qu'est réellement l'encodage pour-cent
La règle est mécanique et facile à suivre. Tout caractère qui ne peut pas apparaître littéralement est remplacé par un signe % suivi de deux chiffres hexadécimaux qui épellent la valeur de l'octet de ce caractère. Une espace devient %20. Un signe plus devient %2B. Le croisillon devient %23. Lorsqu'un caractère correspond à plusieurs octets, comme c'est le cas pour la plupart du texte non-ASCII en UTF-8, vous obtenez simplement plusieurs triplets à la suite : le signe euro se transforme en %E2%82%AC. Le décodage inverse le processus, relisant chaque triplet vers son octet d'origine.
Cette convention est définie dans la spécification des URI (RFC 3986) et elle est délibérément ennuyeuse. L'ennui est précisément le but. Tout client et tout serveur HTTP bien élevé de la planète applique les mêmes règles, de sorte qu'un lien correctement encodé à un endroit arrive intact partout ailleurs.
Pourquoi il doit exister
Les URL transportent deux types de caractères aux rôles très différents. Les caractères réservés comme /, ?, #, &, = et : sont structurels. Ils indiquent à un analyseur où finit le chemin et où commence la chaîne de requête, ou bien où s'arrête un paramètre et où débute le suivant. Si vos données réelles contiennent l'un de ces symboles, il faut l'encoder pour que l'analyseur ne le prenne pas pour de la ponctuation. Une référence de commande telle que A&B/2024 insérée telle quelle dans une chaîne de requête serait interprétée à tort comme deux paramètres et un segment de chemin.
Il y a ensuite les caractères dangereux et non-ASCII : espaces, guillemets, chevrons, lettres accentuées, émojis, tout ce qui sort de la plage ASCII de base. Ils n'ont rien à faire littéralement dans une URL, soit parce qu'ils sont déformés en transit, soit parce qu'ils n'ont aucune représentation définie. Les encoder garde les liens propres et prévisibles au lieu de laisser le résultat au hasard.
Où cela apparaît dans le travail réel
Les chaînes de requête sont le cas classique. Chaque valeur que vous ajoutez à ?clé=... doit être encodée pour qu'une saisie utilisateur ne puisse pas casser la structure. Il en va de même pour les soumissions de formulaires HTML envoyées en application/x-www-form-urlencoded, où le navigateur encode automatiquement les valeurs des champs (et, par convention historique, transforme les espaces en + plutôt qu'en %20). Vous le rencontrerez aussi en construisant des liens pointant vers des pages aux titres non latins, en bâtissant des requêtes d'API à la main, en passant des cibles de redirection comme paramètres, et en déboguant pourquoi une requête qui semble correcte dans la barre d'adresse arrive déformée au serveur.
encodeURI comparé à encodeURIComponent
JavaScript fournit deux encodeurs, et choisir le mauvais est un bug courant. La différence tient à la portée. encodeURIComponent sert pour une seule donnée, comme une valeur de requête. Il encode presque tout, y compris les caractères réservés /, ?, :, @, &, =, + et #. C'est exactement ce que vous voulez lorsque la donnée a le droit de contenir ces symboles en tant que texte ordinaire.
encodeURI sert pour une adresse entière que vous comptez garder fonctionnelle. Il laisse les caractères structurels intacts, de sorte que les barres obliques, deux-points et points d'interrogation qui tiennent l'URL ensemble survivent. Utilisez-le quand vous avez une URL complète et que vous voulez seulement nettoyer les espaces ou les caractères non-ASCII ; tournez-vous vers encodeURIComponent dès que vous insérez une valeur dans une URL plus large. Une règle simple : encodez le lien entier avec encodeURI, encodez les parties que vous y insérez avec encodeURIComponent.
Tout reste sur votre machine
Cet outil s'exécute entièrement dans votre navigateur. Le texte que vous collez est encodé ou décodé localement avec les mêmes routines standard et ne voyage jamais vers un serveur, ce qui le rend sûr pour les jetons, les paramètres signés ou tout ce que vous préféreriez ne pas envoyer sur le réseau. Si vous travaillez avec d'autres transformations de texte, le convertisseur Base64 se trouve juste à côté, et vous pouvez parcourir l'ensemble de nos outils pour développeurs pour d'autres aides au quotidien.
Questions fréquentes
Que signifie %20 dans une URL ?
C'est une espace encodée. Le caractère espace n'est pas autorisé littéralement dans une URL, il est donc remplacé par un signe pour-cent et la valeur hexadécimale 20, qui est la valeur de l'octet d'une espace.
Pourquoi vois-je parfois un signe plus au lieu de %20 ?
Les données de formulaire HTML de type application/x-www-form-urlencoded encodent les espaces par un signe plus, par convention historique. Dans un chemin ou une requête ordinaire, une espace est encodée en %20. Les deux se redécodent en une espace dans leur contexte propre.
Quand dois-je utiliser encodeURIComponent plutôt que encodeURI ?
Utilisez encodeURIComponent pour une valeur unique que vous insérez dans une URL, comme un paramètre de requête, car il encode aussi les caractères réservés. Utilisez encodeURI pour une adresse complète quand vous voulez préserver les barres obliques, deux-points et points d'interrogation qui la tiennent ensemble.
L'encodage d'URL change-t-il le sens de mes données ?
Non. L'encodage est entièrement réversible. Décoder le résultat redonne exactement le texte d'origine, octet pour octet, tant que le même jeu de caractères est utilisé des deux côtés.
Comment sont gérés les caractères non-ASCII comme les accents ou les émojis ?
Ils sont d'abord transformés en octets UTF-8, puis chaque octet devient son propre triplet pour-cent. Une seule lettre accentuée ou un seul émoji peut donc se développer en plusieurs triplets dans la sortie encodée.
Mon texte est-il envoyé vers un serveur lorsque j'utilise cet outil ?
Non. L'encodage et le décodage se font entièrement dans votre navigateur. Rien de ce que vous collez n'est envoyé, son usage est donc sûr avec des chaînes privées ou sensibles.