L'encodage d'URL expliqué — Tout ce que vous devez savoir

Introduction : qu'est-ce que l'encodage d'URL ?

L'encodage d'URL, également connu sous le nom de percent-encoding, est un mécanisme permettant de convertir des caractères en un format pouvant être transmis en toute sécurité dans les URL. Puisque les URL ne peuvent contenir qu'un ensemble limité de caractères du jeu de caractères ASCII, tout caractère en dehors de cet ensemble — ou tout caractère ayant une signification particulière dans la syntaxe des URL — doit être encodé.

Avez-vous déjà vu %20 dans une URL et vous êtes-vous demandé ce que cela signifiait ? Ou avez-vous eu des problèmes avec des liens cassés contenant des caractères spéciaux ? Ce guide vous donnera une compréhension approfondie du fonctionnement de l'encodage d'URL et de son importance.

Besoin d'encoder ou de décoder rapidement une URL ? Utilisez notre outil Encodeur/Décodeur d'URL — il gère automatiquement toutes les règles d'encodage.

Pourquoi l'encodage d'URL existe

Les URL ont été conçues aux débuts d'internet, quand les systèmes avaient un support limité des jeux de caractères. La spécification originale des URL (RFC 1738, publiée en 1994) restreignait les URL à un petit sous-ensemble de caractères ASCII. C'était une décision pragmatique garantissant que les URL fonctionneraient sur différents systèmes, réseaux et protocoles.

Le problème est que le monde réel nécessite bien plus que l'ASCII de base :

• Espaces dans les noms de fichiers : mon document.pdf doit être encodé en mon%20document.pdf
• Caractères internationaux : le français, le chinois, l'arabe et d'autres scripts nécessitent un encodage
• Caractères spéciaux dans les données : les paramètres de requête peuvent contenir des caractères comme &, =, # qui ont une signification particulière dans les URL
• Données binaires : parfois des données binaires doivent être incluses dans les URL

L'encodage d'URL résout tous ces problèmes en fournissant un mécanisme d'échappement universel.

Comment fonctionne le percent-encoding

L'algorithme de percent-encoding est simple :

1. Prendre le caractère à encoder
2. Le convertir en sa représentation en octets (UTF-8 pour les caractères non-ASCII)
3. Pour chaque octet, écrire un % suivi de deux chiffres hexadécimaux

Exemples

Caractère	Octets UTF-8	Encodé en pourcentage
Espace	0x20	%20
!	0x21	%21
#	0x23	%23
$	0x24	%24
&	0x26	%26
+	0x2B	%2B
/	0x2F	%2F
=	0x3D	%3D
?	0x3F	%3F
@	0x40	%40

Caractères multi-octets

Les caractères non-ASCII nécessitent plusieurs octets en UTF-8 et produisent donc plusieurs séquences encodées en pourcentage :

Caractère	Octets UTF-8	Encodé
é (avec accent)	0xC3 0xA9	%C3%A9
à	0xC3 0xA0	%C3%A0
Signe euro	0xE2 0x82 0xAC	%E2%82%AC
Kanji japonais	0xE3 0x81 0x8B	%E3%81%8B
Emoji (sourire)	0xF0 0x9F 0x98 0x80	%F0%9F%98%80

Essayez d'encoder ces caractères vous-même avec notre outil URL Encoder.

Structure des URL et caractères réservés

Pour bien comprendre l'encodage d'URL, vous devez comprendre la structure d'une URL :

https://user:pass@www.example.com:8080/path/to/page?key=value&foo=bar#section
|_____|  |______| |_______________|____||___________|_________________|_______|
schéma  info user     hôte         port   chemin        requête       fragment

Caractères réservés

Les caractères réservés ont des significations particulières dans les URL. Si vous souhaitez les utiliser comme données (plutôt que comme délimiteurs), ils doivent être encodés en pourcentage.

Caractère	Rôle dans l'URL	Forme encodée
:	Sépare le schéma, le port, les infos utilisateur	%3A
/	Sépare les segments de chemin	%2F
?	Commence la chaîne de requête	%3F
#	Commence le fragment	%23
@	Sépare les infos utilisateur de l'hôte	%40
&	Sépare les paramètres de requête	%26
=	Sépare la clé de la valeur dans la requête	%3D
+	Espace dans les chaînes de requête (héritage)	%2B

Caractères non réservés

Ces caractères n'ont jamais besoin d'être encodés dans une URL :

• Lettres : A-Z et a-z
• Chiffres : 0-9
• Tiret : -
• Point : .
• Underscore : _
• Tilde : ~

Le caractère espace : %20 vs +

L'encodage des espaces est l'un des aspects les plus déroutants de l'encodage d'URL :

• %20 : l'encodage correct en pourcentage d'un espace, utilisé dans les segments de chemin
• + : un encodage alternatif pour l'espace, mais valide uniquement dans les chaînes de requête (du format application/x-www-form-urlencoded)

Chemin:  https://example.com/mes%20documents/fichier%20nom.pdf  (correct)
Chemin:  https://example.com/mes+documents/fichier+nom.pdf      (INCORRECT - + est littéral)

Requête: https://example.com/search?q=bonjour+monde             (correct)
Requête: https://example.com/search?q=bonjour%20monde           (aussi correct)

Bonne pratique : Utilisez %20 dans les segments de chemin et + ou %20 dans les chaînes de requête. En cas de doute, %20 fonctionne toujours.

L'encodage d'URL dans différents langages de programmation

JavaScript

JavaScript propose plusieurs fonctions pour l'encodage d'URL, chacune avec une portée différente :

// encodeURIComponent - Encoder un composant d'URI (valeur de paramètre)
encodeURIComponent('bonjour monde & au revoir')
// Résultat : "bonjour%20monde%20%26%20au%20revoir"

// encodeURI - Encoder une URI complète (préserve les caractères de structure URL)
encodeURI('https://example.com/chemin avec espaces?q=bonjour monde')
// Résultat : "https://example.com/chemin%20avec%20espaces?q=bonjour%20monde"

// decodeURIComponent - Décoder un composant d'URI
decodeURIComponent('bonjour%20monde%20%26%20au%20revoir')
// Résultat : "bonjour monde & au revoir"

Différence clé entre encodeURI et encodeURIComponent :

Fonction	N'encode PAS	Cas d'utilisation
encodeURI	:, /, ?, #, &, =, @, +	Encoder une URL complète
encodeURIComponent	Seulement les caractères non réservés	Encoder une valeur de paramètre

L'API URLSearchParams

JavaScript moderne fournit URLSearchParams pour gérer les chaînes de requête :

// Créer des chaînes de requête
const params = new URLSearchParams();
params.set('nom', 'Jean Dupont');
params.set('ville', 'Paris');
params.set('interets', 'programmation & design');
console.log(params.toString());

// Analyser des chaînes de requête
const url = new URL('https://example.com/search?q=bonjour+monde&page=2');
console.log(url.searchParams.get('q'));   // "bonjour monde"
console.log(url.searchParams.get('page')); // "2"

Python

from urllib.parse import quote, unquote, urlencode, parse_qs

# Encoder une chaîne pour une utilisation dans un chemin URL
quote('bonjour monde/chemin')  # 'bonjour%20monde/chemin' (/ non encodé)
quote('bonjour monde/chemin', safe='')  # 'bonjour%20monde%2Fchemin'

# Décoder une chaîne encodée en pourcentage
unquote('bonjour%20monde')  # 'bonjour monde'

# Construire des chaînes de requête
params = {'q': 'bonjour monde', 'categorie': 'livres & médias'}
urlencode(params)

Java

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

// Encoder
String encoded = URLEncoder.encode("bonjour monde & plus", StandardCharsets.UTF_8);
// Résultat : "bonjour+monde+%26+plus"

// Décoder
String decoded = URLDecoder.decode("bonjour+monde+%26+plus", StandardCharsets.UTF_8);
// Résultat : "bonjour monde & plus"

PHP

// Encodage URL (espaces comme +)
urlencode('bonjour monde & plus');  // "bonjour+monde+%26+plus"

// Encodage URL brut (espaces comme %20)
rawurlencode('bonjour monde & plus');  // "bonjour%20monde%20%26%20plus"

// Construire une chaîne de requête
http_build_query(['q' => 'bonjour monde', 'page' => 1]);
// "q=bonjour+monde&page=1"

UTF-8 et caractères internationaux dans les URL

La norme IRI

Les Internationalized Resource Identifiers (IRI, définis dans la RFC 3987) étendent les URL pour prendre en charge les caractères Unicode. Cependant, lors de la transmission, les IRI sont convertis en URI avec le percent-encoding UTF-8.

IRI:  https://example.com/café
URI:  https://example.com/caf%C3%A9

IRI:  https://example.com/search?q=résumé
URI:  https://example.com/search?q=r%C3%A9sum%C3%A9

Noms de domaine internationalisés (IDN)

Les noms de domaine avec des caractères non-ASCII utilisent l'encodage Punycode :

Unicode:  https://café.fr
Punycode: https://xn--caf-dma.fr

Problèmes courants et solutions

Problème 1 : Double encodage

Le double encodage se produit quand une URL déjà encodée est encodée à nouveau :

Original :        bonjour monde
Premier encodage : bonjour%20monde
Double encodage :  bonjour%2520monde  (%25 est l'encodage de %)

Solution : Vérifiez si l'entrée est déjà encodée avant de l'encoder :

function safeEncodeURIComponent(str) {
  try {
    const decoded = decodeURIComponent(str);
    if (decoded !== str) {
      return str; // Déjà encodé
    }
  } catch (e) {
    // Échec du décodage -- encoder à nouveau
  }
  return encodeURIComponent(str);
}

Problème 2 : Encoder l'URL entière au lieu de ses composants

// INCORRECT : Encoder l'URL entière
const url = 'https://api.example.com/search?q=bonjour monde';
const encoded = encodeURIComponent(url);
// "https%3A%2F%2Fapi.example.com%2Fsearch%3Fq%3Dbonjour%20monde"
// C'est complètement inutilisable comme URL !

// CORRECT : Encoder uniquement le composant qui en a besoin
const baseUrl = 'https://api.example.com/search';
const query = encodeURIComponent('bonjour monde');
const correctUrl = `${baseUrl}?q=${query}`;
// "https://api.example.com/search?q=bonjour%20monde"

Problème 3 : Ne pas encoder les caractères spéciaux dans les paramètres API

// Bug : & dans la valeur casse la chaîne de requête
const apiUrl = `https://api.example.com/search?q=Tom & Jerry&page=1`;
// Cela crée TROIS paramètres : q=Tom, Jerry, page=1

// Correction : Encoder la valeur du paramètre
const apiUrl = `https://api.example.com/search?q=${encodeURIComponent('Tom & Jerry')}&page=1`;
// Correct : q=Tom%20%26%20Jerry&page=1

Tableau de référence de l'encodage d'URL

Caractère	Décimal	Hex	Encodé	Description
(espace)	32	20	%20	Espace
!	33	21	%21	Point d'exclamation
"	34	22	%22	Guillemet double
#	35	23	%23	Dièse / délimiteur de fragment
$	36	24	%24	Signe dollar
%	37	25	%25	Signe pourcentage (caractère d'échappement)
&	38	26	%26	Esperluette / délimiteur de requête
/	47	2F	%2F	Slash / délimiteur de chemin
:	58	3A	%3A	Deux-points
=	61	3D	%3D	Signe égal
?	63	3F	%3F	Point d'interrogation / délimiteur de requête
@	64	40	%40	Arobase

Conclusion

L'encodage d'URL est un concept fondamental du développement web qui affecte toute application travaillant avec des URL. Comprendre le fonctionnement du percent-encoding, quand utiliser encodeURIComponent versus encodeURI, et comment différents langages de programmation gèrent l'encodage d'URL vous évitera des bugs subtils et des problèmes de sécurité.

Points clés :

1. encodeURIComponent pour les valeurs, encodeURI pour les URL complètes en JavaScript
2. Les espaces peuvent être %20 ou + — %20 est toujours sûr
3. Les caractères non-ASCII utilisent UTF-8 avant le percent-encoding
4. Attention au double encodage — l'erreur d'encodage d'URL la plus courante
5. Utiliser URLSearchParams en JavaScript pour construire des chaînes de requête en toute sécurité
6. Toujours encoder les entrées utilisateur avant de les inclure dans des URL

Pour encoder et décoder rapidement des URL, mettez en favori notre outil Encodeur/Décodeur d'URL.

Ressources associées

• Outil Encodeur/Décodeur d'URL — Encoder et décoder des URL instantanément
• Encodeur/Décodeur Base64 — Encodage Base64URL
• Formateur JSON — Formater du JSON avec des données URL
• Générateur de hachage — Générer des hachages de chaînes URL