Le principe de l'encodage pourcent
Une adresse web n'admet qu'un petit jeu de caractères : lettres sans accent, chiffres et quelques signes. Certains, comme /, ?, & ou #, découpent l'adresse en parties. Tout autre caractère, et tout signe utilisé pour sa valeur et non pour son rôle, s'écrit en encodage pourcent : on prend ses octets en UTF-8, et chaque octet devient % suivi de sa valeur en hexadécimal. La RFC 3986, qui définit la syntaxe des URL, fixe ce mécanisme.
C3 A9%C3%A9Un caractère accentué donne donc deux séquences, un emoji quatre : 😀 s'écrit %F0%9F%98%80. Le décodage fait l'inverse : il regroupe les octets et relit l'UTF-8.
encodeURIComponent ou encodeURI
JavaScript propose deux fonctions, que l'outil reprend. encodeURIComponent (« Un paramètre ») encode tout ce qui pourrait être lu comme une séparation : c'est elle qu'il faut pour une valeur placée dans une adresse, un terme de recherche, un nom de fichier. encodeURI (« Une adresse complète ») laisse en place la structure de l'adresse et n'encode que les espaces, les accents et les caractères interdits.
| Caractère | Un paramètre | Une adresse |
|---|---|---|
| espace | %20 | %20 |
| é | %C3%A9 | %C3%A9 |
| / | %2F | / |
| ? | %3F | ? |
| & | %26 | & |
| # | %23 | # |
| + | %2B | + |
encodeURIComponent sur une adresse entière la rend inutilisable : https://exemple.fr/?a=1 devient https%3A%2F%2Fexemple.fr%2F%3Fa%3D1. À l'inverse, encodeURI sur une valeur laisse passer un & qui coupe le paramètre en deux : avec ?q=Tom & Jerry encodé ainsi, le paramètre q ne vaut plus que « Tom » suivi d'une espace, et « Jerry » devient un second paramètre, sans valeur.
+ ou %20 : l'espace dans les formulaires
Un formulaire HTML envoyé en GET n'utilise pas exactement l'encodage pourcent : son format, application/x-www-form-urlencoded, écrit l'espace + au lieu de %20, et un vrai signe plus devient %2B. C'est pourquoi les adresses de résultats de recherche contiennent souvent des +. Le mode « Un formulaire (+) » produit ce format.
Au décodage, un + n'est une espace que dans des données de formulaire. Dans le chemin d'une adresse, c'est un vrai plus. L'outil le garde donc par défaut ; cochez « Lire + comme une espace » pour une chaîne de recherche.
Trois exemples
« prix = 10 € & + ? » en paramètre donne prix%20%3D%2010%20%E2%82%AC%20%26%20%2B%20%3F. Le € occupe trois octets en UTF-8, d'où ses trois séquences.
https://exemple.fr/recherche?q=crème brûlée&tri=prix passée à encodeURI donne https://exemple.fr/recherche?q=cr%C3%A8me%20br%C3%BBl%C3%A9e&tri=prix : les accents et les espaces sont encodés, les /, ?, = et & gardent leur rôle.
« crème brûlée & co » devient cr%C3%A8me+br%C3%BBl%C3%A9e+%26+co, et se relit, + compris comme espace, en « crème brûlée & co ».
Quand le décodage bute
L'outil décode tout ce qu'il peut et laisse en place, en le signalant, ce qu'il ne peut pas lire. Trois cas reviennent souvent.
- Un octet qui n'est pas de l'UTF-8 :
caf%E9vient d'un ancien site qui encodait en Latin-1, où E9 est « é ». En UTF-8, « é » s'écrit%C3%A9. L'outil garde%E9et indique ce qu'il vaudrait en Latin-1. - Un double encodage :
%2520est un%20encodé une seconde fois (le%est devenu%25). Décodé une fois, il donne « %20 » ; l'outil le repère et propose de recommencer. - Un % isolé, comme dans « 100 % », non suivi de deux chiffres hexadécimaux : il est gardé tel quel, là où la fonction decodeURIComponent de JavaScript s'arrêterait sur une erreur.
Questions fréquentes
Que veut dire %20 dans une adresse ?
C'est une espace. Dans une URL, un caractère interdit ou réservé s'écrit % suivi de la valeur de son octet en hexadécimal : l'espace vaut 20, d'où %20. Un é donne %C3%A9, deux octets en UTF-8.
Faut-il utiliser encodeURI ou encodeURIComponent ?
encodeURIComponent pour une valeur insérée dans une adresse (un paramètre, un terme de recherche) : elle encode aussi / ? & = et #. encodeURI pour une adresse entière dont il faut garder la structure. L'erreur courante est d'utiliser encodeURI sur une valeur qui contient & ou #.
Pourquoi certaines adresses ont-elles des + à la place des espaces ?
Elles viennent d'un formulaire HTML : le format application/x-www-form-urlencoded écrit l'espace +. Un vrai signe plus y devient %2B. Ailleurs dans une adresse, + reste un plus.
Pourquoi le décodage affiche-t-il encore des %XX ?
Soit l'adresse était encodée deux fois (%2520 donne %20 au premier décodage, il faut décoder à nouveau), soit une séquence n'est pas de l'UTF-8 valide, comme %E9, l'é des anciens sites en Latin-1. L'outil dit lequel des deux cas il a rencontré.
Mon adresse est-elle envoyée quelque part ?
Non. L'encodage et le décodage se font dans votre navigateur, et ce que vous saisissez n'apparaît pas dans l'adresse de la page. Une URL avec un jeton ou une adresse e-mail reste chez vous.
Une erreur ? Signalez-la, nous la corrigeons.