Pourquoi les adresses contiennent %20 et %C3%A9

Une URL ne peut contenir qu'un petit ensemble de caractères : lettres, chiffres et quelques symboles. Tout le reste, espaces, lettres accentuées, emoji, est d'abord converti en octets UTF-8, puis chaque octet est écrit sous la forme % suivi de deux chiffres hexadécimaux. L'espace devient %20, le é devient %C3%A9.

Certains caractères portent la structure : / sépare les segments du chemin, ? ouvre la chaîne de requête, & sépare les paramètres, = sépare nom et valeur, # introduit le fragment. Dans une valeur, il faut les encoder, sinon ils cassent l'adresse. C'est la différence entre encodeURIComponent, qui les encode, et encodeURI, qui les laisse parce qu'il travaille sur une URL entière.

Dans les formulaires web et les chaînes de requête, l'espace s'écrit aussi souvent +. C'est pourquoi le décodage ici transforme le + en espace, comme le font les serveurs ; dans un chemin, en revanche, le + reste un plus.

Erreurs fréquentes

  • Utiliser encodeURI pour la valeur d'un paramètre : un & dans la valeur coupe le paramètre en deux.
  • Encoder deux fois : %20 devient %2520 et le serveur reçoit le texte littéral %20.
  • Construire une URL en concaténant des chaînes non encodées : outre les erreurs, cela ouvre la porte à l'injection de paramètres.

Questions fréquentes

Quelle différence entre encodeURI et encodeURIComponent ?

encodeURIComponent encode tout sauf les lettres, chiffres et - _ . ! ~ * ' ( ) : il sert pour une seule valeur. encodeURI laisse aussi : / ? # [ ] @ & = + $ , ; : il sert pour une adresse déjà construite.

Pourquoi l'espace est-il parfois %20 et parfois + ?

%20 est l'encodage général de l'espace dans une URL. Le + vient des formulaires HTML (application/x-www-form-urlencoded) et ne vaut espace que dans la chaîne de requête.

Qu'est-ce que le Punycode ?

C'est la façon dont les domaines contenant des caractères non ASCII, comme château.fr, s'écrivent dans le DNS : xn--chteau-xta.fr. Le navigateur affiche la forme lisible mais utilise la forme encodée en dessous.

Comment fonctionne ce calcul

Encodage : le texte est converti en octets UTF-8 et chaque octet hors de l'ensemble autorisé devient %HH, HH étant sa valeur hexadécimale. encodeURIComponent n'autorise que A–Z a–z 0–9 - _ . ! ~ * ' ( ) ; encodeURI autorise en plus ; , / ? : @ & = + $ #. Décodage : chaque %HH redevient son octet, les octets sont lus en UTF-8 et le + devient une espace.