Chaque caractère d'une adresse Web doit provenir d'un petit ensemble sûr sur lequel les navigateurs, les serveurs, les proxys et les journaux s'accordent tous. Lorsque vous devez placer quelque chose à l'extérieur d'un lien - un espace, une esperluette, une lettre accentuée ou un emoji - il doit d'abord être codé en URL. L'encodage URL, également appelé encodage en pourcentage, est la norme qui remplace ces caractères par un signe de pourcentage suivi de leur valeur d'octet en hexadécimal, de sorte qu'un espace devient %20 et & devient %26. Ce guide explique ce qu'est l'encodage URL, quels caractères en ont besoin, comment fonctionne le format %XX et le choix encodeURIComponent vs encodeURI qui fait trébucher la plupart des développeurs - avec des exemples concrets que vous pouvez copier.
Réponse rapide
Le codage URL (codage en pourcentage) remplace les caractères non sécurisés ou réservés dans un URL par un % suivi de deux chiffres hexadécimaux représentant l'octet du caractère en UTF-8. Un espace devient %20, une esperluette devient %26 et un e (é) accentué devient %C3%A9. Utilisez encodeURIComponent pour les valeurs individuelles que vous déposez dans un URL et encodeURI pour un URL complet que vous ne souhaitez pas diviser.
Qu'est-ce que l'encodage URL ?
Le codage URL est un moyen de représenter des caractères dans un localisateur de ressources uniforme (URL) en utilisant uniquement un jeu de caractères limité et universellement sûr. La norme URL (RFC 3986) autorise l'apparition littérale d'une poignée de caractères seulement : les lettres ASCII A-Z et a-z, les chiffres 0-9 et quelques symboles. Tout le reste - les espaces, la plupart des signes de ponctuation et tous les caractères non anglais - doit être converti en une séquence codée en pourcentage avant de pouvoir voyager en toute sécurité à l'intérieur d'un lien.
La raison en est que les URL traversent de nombreux systèmes et que certains caractères ont une signification particulière pour ces systèmes. Un espace peut être supprimé silencieusement ou transformé en +, un # démarre le fragment et un ? démarre la chaîne de requête. Le codage en pourcentage supprime l'ambiguïté en transformant tout caractère problématique en un code signifiant « ce sont des données, pas un délimiteur ».
Caractères réservés ou non réservés
La spécification URL divise les caractères en groupes. Savoir lequel est lequel vous indique exactement ce qui doit être codé et ce qui doit être laissé tel quel.
Caractères non réservés (jamais codés)
Ces caractères peuvent toujours être utilisés en toute sécurité tels quels n'importe où dans un URL et ne doivent pas être codés :
- Lettres majuscules : A-Z
- Lettres minuscules : a à z
- Chiffres : 0-9
- Quatre symboles : trait d'union (-), trait de soulignement (_), point (.) et tilde (~)
Caractères réservés (encodés lorsqu'ils sont utilisés comme données)
Les caractères réservés ont un rôle spécial dans un URL : ils agissent comme des délimiteurs qui séparent une partie d'une autre. Ils ne sont en sécurité que lorsqu'ils font ce travail. Si un caractère réservé apparaît à l'intérieur d'une valeur plutôt que comme séparateur, il doit être codé afin qu'il ne soit pas confondu avec un délimiteur.
- Délimiteurs de chemin et d'autorité : / : @
- Délimiteurs de requêtes et de fragments : ? # & =
- Sous-délimiteurs : ! $ & ' ( ) * + , ; =
Par exemple, le & dans https://example.com/search?q=cats&sort=new sépare deux paramètres de requête et reste donc littéral. Mais si vous recherchez l'expression "chats et chiens", le & à l'intérieur de cette valeur doit devenir %26 - sinon le serveur lit &dogs comme deuxième paramètre.
Le format %XX expliqué
Le codage en pourcentage suit une règle simple : un signe de pourcentage (%) suivi de deux chiffres hexadécimaux. Ces deux chiffres sont la valeur d'un seul octet écrit en base 16 (00 en FF, soit 0-255 en décimal). Pour coder un caractère, vous recherchez sa valeur en octet et l'écrivez après le %.
- L'espace est de 32 en décimal, soit 20 en hexadécimal - donc un espace devient %20.
- L'esperluette & est 38 décimal = 26 hex - donc & devient %26.
- Le signe égal = est 61 décimal = hexadécimal 3D - donc = devient %3D.
- Le point d'interrogation ? est 63 décimal = 3F hex - alors ? devient %3F.
Les caractères dans la plage ASCII (0-127) sont constitués d'un seul octet, ils codent donc toujours selon une séquence %XX. Les caractères en dehors de l'ASCII sont d'abord convertis en leurs octets UTF-8 - qui peuvent être de deux, trois ou quatre octets - et chaque octet devient son propre %XX. C'est pourquoi la lettre accentuée é (U+00E9) code en %C3%A9 : sa forme UTF-8 est constituée des deux octets C3 et A9.
encodeURIComponent vs encodeURI - quand utiliser chacun
JavaScript vous offre deux fonctions intégrées pour le codage en pourcentage, et choisir la mauvaise est l'erreur de codage URL la plus courante. La différence réside dans les caractères réservés qu'ils laissent seuls.
encodeURIComponent - pour une seule valeur
encodeURIComponent encode presque tout ce qui n'est pas un caractère non réservé, y compris les délimiteurs réservés /? : @ & = + $ #. Utilisez-le pour une seule donnée que vous insérez dans un URL : une valeur de paramètre de requête, un segment de chemin ou un champ de formulaire. Parce qu'il échappe à & et =, une valeur qui les contient ne brisera pas la chaîne de requête environnante.
encodeURI - pour un URL entier
encodeURI est conçu pour coder un URL complet et déjà assemblé. Il laisse les délimiteurs réservés intacts - :, /, ?, #, & et = passent inchangés - de sorte que le URL conserve sa structure. Il code uniquement des caractères qui ne sont jamais valides nulle part, comme les espaces. Utilisez-le lorsque vous disposez d'un URL complet pouvant contenir un caractère illégal et que vous ne souhaitez pas modifier ses parties.
Règle générale
Encodez les parties, pas le tout. Créez un URL en exécutant d'abord encodeURIComponent sur chaque valeur individuelle, puis joignez-les avec &, =, / et ? délimiteurs vous-même. Accédez à encodeURI uniquement lorsque vous recevez une chaîne URL complète à nettoyer.
Deux remarques pratiques : encodeURIComponent n'échappe pas aux caractères ! ' ( ) *, donc un analyseur strict peut avoir besoin de les remplacer manuellement. Et n'encodez jamais une chaîne déjà encodée - cela transforme chaque % en %25, donc %20 devient %2520, un bug classique de double encodage qui produit des liens rompus.
Exemples travaillés
Voici à quoi ressemblent les caractères courants avant et après l’encodage. Chaque ligne se lit comme un caractère - ce que c'est - sous forme codée.
- Espace - séparateur de mots - %20 (un + est également utilisé pour les espaces dans les chaînes de requête ; voir ci-dessous)
- & - esperluette - %26
- = - signe égal - %3D
- ? - point d'interrogation - %3F
- / - barre oblique - %2F
- # - démarrage du hachage/fragment - %23
- + - signe plus - %2B
- é - e avec un accent aigu (non-ASCII, 2 UTF-8 octets) - %C3%A9
- 😀 - emoji (4 UTF-8 octets) - %F0%9F%98%80
Encoder une valeur avec des espaces et des symboles
Supposons que vous souhaitiez transmettre l'expression de recherche « chats et chiens = amusant » comme valeur de requête unique. L'exécution d'encodeURIComponent dessus produit cats%20%26%20dogs%20%3D%20fun. Chaque espace, le & et le = sont échappés, donc le tout est traité comme une valeur plutôt que comme trois paramètres distincts.
Un exemple de chaîne de requête complète
En l'assemblant, imaginez une page de recherche qui prend une requête et une catégorie. Vous encodez chaque valeur séparément, puis assemblez le URL :
- Valeur brute de la requête : chats et chiens
- Valeur brute de la catégorie : pets/animals
- Requête codée : cats%20%26%20dogs
- Catégorie codée : pets%2Fanimals
- URL final : https://example.com/search?q=cats%20%26%20dogs&category=pets%2Fanimals
Notez que les & et = entre q=... etcategory=... restent littéraux car ils font leur travail de délimiteurs, tandis que le & à l'intérieur de la valeur de requête et le / à l'intérieur de la valeur de catégorie sont codés car ce sont des données. C'est exactement ce que vous donne l'encodage de chaque valeur avec encodeURIComponent, puis l'assemblage des éléments vous-même.
Espace : %20 ou + ?
Dans le chemin d'un URL, un espace est toujours de %20. Dans une chaîne de requête, l'ancien codage de formulaire (application/x-www-form-urlencoded) utilise plutôt + pour un espace. Les deux décodent en espace, mais ils ne sont pas interchangeables partout - lors du décodage, vérifiez si la source a utilisé %20 ou + afin de restaurer correctement le texte original.
Questions fréquemment posées
Qu’est-ce que le codage URL en termes simples ?
L'encodage URL est un moyen d'inclure en toute sécurité des caractères spéciaux dans une adresse Web en les remplaçant par un % et un code à deux chiffres. Étant donné que les URL ne peuvent contenir qu'un ensemble limité de caractères, tout le reste - comme un espace, une esperluette ou une lettre accentuée - est converti en son équivalent codé en pourcentage (un espace devient %20) afin que le lien reste valide.
Pourquoi les URL contiennent-ils %20 ?
%20 est la forme codée en pourcentage d'un espace. Les espaces ne sont pas autorisés dans un URL, donc lorsqu'un lien en contient un - souvent à partir d'un nom de fichier ou d'un terme de recherche - il est remplacé par %20. Lorsque la page se charge, le serveur ou le navigateur décode %20 dans un espace.
Quelle est la différence entre encodeURI et encodeURIComponent ?
encodeURIComponent code une valeur unique et échappe aux délimiteurs réservés (& = ? / #), ce qui la rend appropriée pour un paramètre de requête ou un segment de chemin. encodeURI code un URL entier et laisse ces délimiteurs intacts afin que l'adresse conserve sa structure. Utilisez encodeURIComponent pour les pièces et encodeURI pour un URL complet.
Quels caractères doivent être codés en URL ?
Uniquement les caractères non réservés - A-Z, a-z, 0-9 et - _ . ~ - sont toujours en sécurité. Tout le reste doit être codé lorsqu'il apparaît à l'intérieur d'une valeur : les espaces, la plupart des signes de ponctuation, les délimiteurs réservés (/ ? : @ & = + $ , ; # ! ' ( ) *), et tous les caractères non-ASCII comme les lettres accentuées et les emoji.
Le codage URL est-il le même que le chiffrement ou Base64 ?
L'encodage URL n'est pas un cryptage et n'offre aucune sécurité. Il s'agit d'une transformation de texte entièrement réversible qui permet uniquement aux caractères de voyager en toute sécurité dans un URL, et n'importe qui peut le décoder instantanément. Il diffère également de Base64, qui réencode les données binaires dans un alphabet de 64 caractères dans un but différent.
Comment décoder une chaîne codée en URL ?
Inversez le processus : chaque séquence %XX est reconvertie en l'octet qu'elle représente, et les octets consécutifs sont lus au format UTF-8 pour récupérer des caractères comme é ou emoji. Dans JavaScript, decodeURIComponent fait cela ; un outil de décodage URL fait de même dans votre navigateur et affiche une erreur claire si l'entrée a une séquence mal formée comme un % solitaire.
Encoder ou décoder un URL instantanément
Utilisez l'[Encodeur/Décodeur URL] gratuit (/developer-tools/url-encoder-decoder) pour encoder en pourcentage n'importe quel texte ou décoder un URL codé - basculez entre encodeURIComponent et encodeURI en un clic, et tout s'exécute dans votre navigateur.