Encodeur/Décodeur URL

Qu’est-ce que le Percent-Encoding ?

Le percent-encoding (communement appele encodage URL) est un mecanisme defini dans la RFC 3986 pour encoder les caracteres qui ne sont pas autorises ou qui ont une signification speciale dans un URI (Uniform Resource Identifier). Chaque caractere non sur est remplace par un signe pourcentage (%) suivi de son code ASCII hexadecimal a deux chiffres.

Par exemple, un caractere espace (ASCII 32, hex 20) devient %20. Le signe arobase @ (ASCII 64, hex 40) devient %40. Cela garantit que chaque caractere dans une URL est soit un caractere ASCII sur, soit une sequence explicitement encodee en pourcentage, sans aucune ambiguite.

Les URL ne peuvent contenir qu’un sous-ensemble limite de caracteres ASCII. Lorsqu’une URL doit inclure des caracteres en dehors de cet ensemble — espaces, caracteres non-ASCII ou caracteres ayant une signification reservee dans la syntaxe URL — le percent-encoding est necessaire. Sans lui, l’URL serait malformee, ambigue ou pourrait etre interpretee incorrectement par les navigateurs et serveurs.

Caracteres reserves vs non reserves

La RFC 3986 divise les caracteres ASCII en trois categories pour les besoins des URL :

Caracteres non reserves (n’ont jamais besoin d’encodage)

Ces caracteres peuvent apparaitre n’importe ou dans une URL sans encodage :

Categorie	Caracteres
Lettres majuscules	A B C ... Z
Lettres minuscules	a b c ... z
Chiffres	0 1 2 ... 9
Speciaux	- _ . ~

Caracteres reserves (dependant du contexte)

Les caracteres reserves ont une signification structurelle speciale dans les URL. Ils doivent etre encodes en pourcentage lorsqu’ils sont utilises comme donnees (par ex., a l’interieur d’une valeur de parametre de requete) mais ne doivent pas etre encodes lorsqu’ils sont utilises comme delimiteurs :

Caractere	Role dans l’URL	Forme encodee
:	Separateur de schema (https:)	%3A
/	Separateur de chemin	%2F
?	Debut de la chaine de requete	%3F
#	Debut du fragment	%23
&	Separateur de parametres de requete	%26
=	Separateur cle-valeur	%3D
@	Separateur d’autorite	%40
+	Espace (uniquement dans l’encodage de formulaires)	%2B

Caracteres non surs (doivent toujours etre encodes)

Les caracteres comme les espaces, guillemets, chevrons, et tous les caracteres non-ASCII (y compris les caracteres multi-octets UTF-8 comme les lettres accentuees, les caracteres CJK et les emoji) doivent toujours etre encodes en pourcentage. Les caracteres non-ASCII sont d’abord encodes en octets UTF-8, puis chaque octet est encode en pourcentage.

Par exemple, le caractere e avec accent aigu est constitue des octets UTF-8 C3 A9, ce qui donne %C3%A9 dans l’URL.

encodeURI vs encodeURIComponent

JavaScript fournit deux fonctions natives pour le percent-encoding, et choisir la mauvaise est l’une des sources les plus courantes de bugs lies aux URL.

encodeURI()

Encode une URL complete. Elle laisse les caracteres structurels d’URL intacts (/ ? # : @ & = + $) et n’encode que les caracteres illegaux dans n’importe quelle partie d’une URL (espaces, non-ASCII, etc.).

encodeURI("https://example.com/path name?q=hello world")
// "https://example.com/path%20name?q=hello%20world"

Utilisez encodeURI() lorsque vous avez une chaine d’URL complete et souhaitez la rendre sure sans casser sa structure.

encodeURIComponent()

Encode un composant d’URL (une seule valeur de parametre, un segment de chemin). Elle encode tout sauf A-Z a-z 0-9 - _ . ~ — y compris les caracteres reserves comme / ? & =.

encodeURIComponent("hello world&goodbye")
// "hello%20world%26goodbye"

Utilisez encodeURIComponent() lorsque vous construisez une URL piece par piece et devez encoder une valeur de parametre. Cela empeche la valeur d’etre interpretee comme de la structure URL.

La regle d’or

Lors de la construction d’URL a partir de valeurs dynamiques, encodez toujours les valeurs, jamais la structure :

// Correct
const url = `https://api.example.com/search?q=${encodeURIComponent(userInput)}`;

// Incorrect -- peut casser si userInput contient & ou =
const url = `https://api.example.com/search?q=${userInput}`;

// Incorrect -- encodeURI n'encodera pas & dans la valeur
const url = encodeURI(`https://api.example.com/search?q=${userInput}`);

Cas d’utilisation courants

• Parametres de requete : Lorsque vous transmettez des saisies utilisateur comme parametres de requete d’URL (termes de recherche, filtres, donnees de formulaire), chaque valeur de parametre doit etre encodee en pourcentage pour eviter de casser la structure de l’URL
• Appels d’API REST : Les points de terminaison d’API acceptant des parametres de chemin ou de requete avec des caracteres speciaux necessitent un encodage correct. Oublier d’encoder une barre oblique dans un nom de fichier, par exemple, creerait un chemin incorrect
• URL de redirection : Les flux OAuth et les systemes d’authentification unique transmettent frequemment des URL de rappel comme parametres de requete. L’URL de rappel entiere doit etre encodee pour que ses caracteres ?, & et = ne soient pas interpretes comme faisant partie de l’URL externe
• Noms de domaine internationalises (IDN) : Bien que les noms de domaine utilisent le Punycode (et non le percent-encoding), les portions chemin et requete des URL utilisent le percent-encoding pour les caracteres non-ASCII
• Attributs de liens HTML : Lors de l’integration d’URL dans les attributs HTML href, les caracteres comme & doivent etre a la fois encodes en pourcentage (pour la validite de l’URL) et encodes en entites HTML (pour la validite du HTML), par ex., & dans le code source HTML