Référence d'encodage URL et d'encodage en pourcentage
L'encodage en pourcentage représente des octets arbitraires sous la forme d'un signe pourcentage (%) suivi de deux chiffres hexadécimaux. Les caractères non ASCII sont convertis en octets UTF-8 avant d'être encodés en pourcentage selon l'ensemble d'encodage en pourcentage du composant d'URL spécifique.
Inspecteur d'encodage en pourcentage
hello%20world
Pipeline d'octets UTF-8 : comment les caractères deviennent encodés en pourcentage
WHATWG URL §4.4 & Unicode 18.0
L'encodage en pourcentage opère strictement sur des octets de 8 bits, et non directement sur des caractères Unicode. Quand un caractère non ASCII est introduit dans une URL, il est d'abord sérialisé en ses octets UTF-8, puis chaque octet résultant est représenté par un signe pourcentage (%) suivi de deux chiffres hexadécimaux majuscules.
Une erreur technique courante consiste à supposer que U+20AC devient %20AC. Cela produit un espace (%20) suivi des lettres littérales AC ! Dans un traitement d'URL conforme aux normes, chaque caractère non ASCII doit d'abord être converti en octets UTF-8.
Gestion des espaces : quand utiliser %20 plutôt que +
Désambiguïsation critique
L'une des sources de confusion les plus fréquentes chez les développeurs est de savoir si les espaces dans les URL doivent être encodés en %20 ou en +. La réponse est strictement dépendante du contexte :
Encodage des chemins, fragments et composants
L'espace est encodé en %20
hello world
hello%20world
+ littéral :
a+b → a+b (préservé)
- Utilisé par
encodeURIComponent()etencodeURI(). - Obligatoire dans les chemins d'URL (ex.
/articles/my%20story/). - Dans ce contexte,
+représente un signe plus littéral, pas un espace.
application/x-www-form-urlencoded
L'espace est encodé en +
hello world
hello+world
+ littéral :
a+b → a%2Bb (échappé !)
- Utilisé par les soumissions de formulaires HTML (
POST/GET) etURLSearchParams. - Utilisé dans les chaînes de requête au format de données de formulaire (ex.
?q=my+search). - Comme
+signifie espace, un signe plus littéral doit être encodé en%2B.
Si un utilisateur recherche C++ dans un paramètre de requête au format application/x-www-form-urlencoded, envoyer ?q=C++ fait que le serveur reçoit C (deux espaces !). Pour préserver les signes plus, le client doit le sérialiser en ?q=C%2B%2B.
Tableau de référence des caractères sensible au contexte
Matrice de normesContrairement aux tableaux statiques qui n'affichent qu'une seule valeur, cette matrice de référence montre comment les délimiteurs réservés et les caractères spéciaux sont encodés selon les différents composants d'URL :
| Car. | Nom et point de code | Octets UTF-8 | Composant (encodeURIComponent) |
Données de formulaire (URLSearchParams) |
Segment de chemin | Rôle structurel dans les URL |
|---|---|---|---|---|---|---|
| Space |
Space
U+0020
|
20
|
%20
|
+
|
%20
|
Delimiter in HTTP headers, illegal unencoded in URIs |
| & |
Ampersand
U+0026
|
26
|
%26
|
%26
|
%26
|
Separates parameter pairs in query string and form data |
| + |
Plus Sign
U+002B
|
2B
|
%2B
|
%2B
|
%2B
|
Represents space in form-urlencoded; literal plus must be %2B |
| / |
Forward Slash (Solidus)
U+002F
|
2F
|
%2F
|
%2F
|
%2F
|
Hierarchical segment delimiter in URI path |
| ? |
Question Mark
U+003F
|
3F
|
%3F
|
%3F
|
%3F
|
Introduces query string component |
| # |
Number Sign (Hash)
U+0023
|
23
|
%23
|
%23
|
%23
|
Introduces fragment/anchor identifier |
| = |
Equals Sign
U+003D
|
3D
|
%3D
|
%3D
|
%3D
|
Separates parameter name from value in query string |
| % |
Percent Sign
U+0025
|
25
|
%25
|
%25
|
%25
|
Introduces percent-encoded byte triplets (%HH) |
| : |
Colon
U+003A
|
3A
|
%3A
|
%3A
|
%3A
|
Terminates scheme; separates userinfo and port number |
| @ |
At Sign
U+0040
|
40
|
%40
|
%40
|
%40
|
Separates userinfo credentials from host authority |
| € |
Euro Sign
U+20AC
|
E2 82 AC
|
%E2%82%AC
|
%E2%82%AC
|
%E2%82%AC
|
Requires 3 UTF-8 bytes (E2 82 AC) before percent-encoding |
| é |
Latin Small Letter E with Acute
U+00E9
|
C3 A9
|
%C3%A9
|
%C3%A9
|
%C3%A9
|
Requires 2 UTF-8 bytes (C3 A9) before percent-encoding |
| 😀 |
Grinning Face Emoji
U+1F600
|
F0 9F 98 80
|
%F0%9F%98%80
|
%F0%9F%98%80
|
%F0%9F%98%80
|
Requires 4 UTF-8 bytes (F0 9F 98 80) before percent-encoding |
Comparaison des API JavaScript et web : quelle fonction utiliser ?
Guide du développeurChoisir la mauvaise fonction d'encodage en JavaScript est l'une des causes les plus fréquentes d'URL cassées et de vulnérabilités de sécurité. Voici la comparaison normative de référence :
encodeURIComponent()
JavaScript (ECMAScript)
) :
%20
/) :
Encoded as %2F
encodeURI()
JavaScript (ECMAScript)
) :
%20
/) :
Preserved as /
URLSearchParams
Web Standards API (Browser & Node.js)
) :
+ (plus sign)
/) :
Encoded as %2F
new URL(href)
WHATWG URL Standard (Browser & Node.js)
) :
%20 in path and hash; + in searchParams
/) :
Preserves structural path separators
Modèle d'implémentation moderne recommandé
// 1. Parameter Value Encoding (Safe for query values)
const rawParam = "hello/world & co";
const encodedParam = encodeURIComponent(rawParam);
// → "hello%2Fworld%20%26%20co"
// 2. Query String Construction with URLSearchParams (Best practice)
const params = new URLSearchParams({ search: "C++ language", filter: "active" });
// → "search=C%2B%2B+language&filter=active" (Note: + for space, %2B for literal plus)
// 3. Complete URL Building with new URL()
const url = new URL("https://example.com/api/search");
url.search = params.toString();
// → "https://example.com/api/search?search=C%2B%2B+language&filter=active"
Cas limites : échappements mal formés et pièges du double encodage
Sécurité et analyseSéquences de pourcentage mal formées
Selon le standard d'URL du WHATWG §4.4, si un signe pourcentage (%) n'est pas suivi de deux chiffres hexadécimaux ASCII, il est conservé comme caractère littéral plutôt que de déclencher une erreur fatale.
| Entrée mal formée | Décodage WHATWG | Avertissement du validateur |
|---|---|---|
100% |
100% |
Signe pourcentage isolé ; doit être encodé en %25 s'il s'agit de données littérales |
%2 |
%2 |
Séquence d'échappement incomplète ; second chiffre hexadécimal manquant |
%GG |
%GG |
Caractères non hexadécimaux après % |
%20 (double encode) |
%2520 |
% encodé en %25 ; le double encodage modifie la signification des données |
Piège de sécurité du double encodage
Comme le signe pourcentage est lui-même encodé en %25, encoder une chaîne déjà encodée en change le sens :
hello world
hello%20world
hello%2520world
Les décodeurs doivent exécuter strictement une seule passe de décodage par action afin d'empêcher des vulnérabilités de sécurité telles que le directory traversal (%252E%252E%252F → %2E%2E%2F).