L'encodage URL expliqué : Pourquoi %20 signifie espace

Qu'est-ce que l'encodage URL ?

Chaque fois que vous voyez %20 dans une URL, vous voyez l'encodage URL en action.

L'encodage URL (également appelé encodage en pourcentage) est le processus de conversion des caractères qui ne sont pas autorisés dans les URL dans un format qui peut être transmis en toute sécurité. Il remplace les caractères dangereux par un signe % suivi de deux chiffres hexadécimaux représentant le code ASCII du caractère.

Par exemple :

Un espace devient %20
Un signe @ devient %40
Un dièse # devient %23
Un slash / devient %2F

C'est pourquoi une recherche Google pour « hello world » produit une URL comme :

https://www.google.com/search?q=hello%20world

L'espace entre « hello » et « world » ne peut pas exister dans une URL, il est donc encodé en %20.

Pourquoi les URL ont besoin d'encodage

Les URL ont des règles strictes sur les caractères autorisés. Ces règles proviennent de la RFC 3986, la spécification officielle de la syntaxe URI.

Caractères sûrs (aucun encodage nécessaire)

Ces caractères peuvent apparaître dans les URL sans encodage :

A-Z  a-z  0-9
-  _  .  ~

Les lettres, les chiffres, les traits d'union, les underscores, les points et les tildes sont toujours sûrs.

Caractères réservés (doivent être encodés lorsqu'ils sont utilisés comme données)

Ces caractères ont une signification spéciale dans les URL :

| Caractère | Signification | Encodé | |---|---|---| | / | Séparateur de chemin | %2F | | ? | Début de la query string | %3F | | & | Séparateur de paramètres | %26 | | = | Séparateur clé-valeur | %3D | | # | Identifiant de fragment | %23 | | @ | Séparateur d'infos utilisateur | %40 | | : | Séparateur de port | %3A | | + | Espace (dans les formulaires) | %2B |

Lorsque ces caractères apparaissent comme des données (et non comme des éléments structurels), ils doivent être encodés.

Par exemple, si une requête de recherche contient &, elle doit être encodée :

# Mauvais — le & casse la query string
?search=Tom & Jerry&page=1

# Correct — le & dans le terme de recherche est encodé
?search=Tom%20%26%20Jerry&page=1

Caractères dangereux (toujours encoder)

Ces caractères ne sont jamais sûrs dans les URL :

espace  "  <  >  {  }  |  \  ^  `

Ils doivent toujours être encodés en pourcentage.

Encodages courants que vous verrez

| Caractère | Encodé | Vu dans | |---|---|---| | Espace | %20 ou + | Requêtes de recherche, noms de fichiers | | @ | %40 | Adresses e-mail dans les URL | | # | %23 | Hashtags, références d'ancres | | & | %26 | Termes de recherche contenant « and » | | = | %3D | Valeurs contenant des signes égal | | / | %2F | Chemins de fichiers dans les paramètres de requête | | ? | %3F | Questions dans les requêtes de recherche | | % | %25 | Le signe pourcentage lui-même | | + | %2B | Signes plus dans les numéros de téléphone | | é | %C3%A9 | Caractères accentués français | | 日 | %E6%97%A5 | Caractères CJK (UTF-8) |

Espace : %20 vs +

Il existe deux façons d'encoder un espace dans une URL :

%20 — utilisé dans les chemins d'URL et l'encodage moderne
+ — utilisé dans les soumissions de formulaires HTML (application/x-www-form-urlencoded)

Les deux représentent un espace, mais ils sont utilisés dans des contextes différents :

Chemin d'URL :   /mon%20fichier.pdf    ← %20
Query string :   ?nom=John+Doe         ← + (encodage formulaire)
Query string :   ?nom=John%20Doe       ← %20 (également valide)

Lors du décodage, votre parseur doit gérer les deux formats.

L'encodage URL en JavaScript

Encodage

JavaScript propose deux fonctions :

// encodeURIComponent — encode tout sauf A-Z a-z 0-9 - _ . ~
encodeURIComponent("hello world & goodbye")
// → "hello%20world%20%26%20goodbye"

// encodeURI — encode mais préserve les caractères structurels de l'URL
encodeURI("https://example.com/path?q=hello world")
// → "https://example.com/path?q=hello%20world"

Règle : Utilisez encodeURIComponent() pour les valeurs de paramètres de requête. Utilisez encodeURI() pour les URL complètes.

Décodage

decodeURIComponent("hello%20world%20%26%20goodbye")
// → "hello world & goodbye"

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

L'encodage URL en Python

from urllib.parse import quote, unquote

# Encodage
quote("hello world & goodbye")
# → "hello%20world%20%26%20goodbye"

# Décodage
unquote("hello%20world%20%26%20goodbye")
# → "hello world & goodbye"

Erreurs courantes

1. Double encodage

Si vous encodez une chaîne qui est déjà encodée, vous obtenez un double encodage :

Original :          hello world
Premier encodage :  hello%20world
Double encodage :   hello%2520world  ← %25 est l'encodage de %

%2520 signifie que le % de %20 a été ré-encodé. C'est un bug très courant qui casse les URL silencieusement.

2. Encoder toute l'URL

// Mauvais — encode aussi les :// et /
encodeURIComponent("https://example.com/path")
// → "https%3A%2F%2Fexample.com%2Fpath"

// Bon — n'encodez que les valeurs de paramètres
const base = "https://example.com/search";
const query = encodeURIComponent("hello world");
const url = `${base}?q=${query}`;
// → "https://example.com/search?q=hello%20world"

3. Oublier de décoder

Lorsque vous lisez des paramètres d'URL, décodez-les toujours :

// URL: ?nom=John%20Doe
const params = new URLSearchParams(window.location.search);
const nom = params.get('nom');
// → "John Doe" (automatiquement décodé)

URLSearchParams gère automatiquement le décodage. Si vous analysez les chaînes de requête manuellement, vous devez appeler decodeURIComponent() vous-même.

4. Ne pas encoder les entrées utilisateur

Si vous construisez des URL à partir d'entrées utilisateur sans encodage, les caractères spéciaux peuvent casser l'URL ou créer des vulnérabilités de sécurité :

// Dangereux — l'entrée utilisateur pourrait contenir & ou = ou d'autres caractères spéciaux
const url = `/search?q=${userInput}`;

// Sûr
const url = `/search?q=${encodeURIComponent(userInput)}`;

C'est particulièrement important pour prévenir les attaques par injection.

UTF-8 et caractères internationaux

Les URL modernes supportent les caractères internationaux via l'encodage UTF-8 :

é → %C3%A9 (2 octets en UTF-8)
ñ → %C3%B1 (2 octets en UTF-8)
日 → %E6%97%A5 (3 octets en UTF-8)
😀 → %F0%9F%98%80 (4 octets en UTF-8)

Chaque octet de la représentation UTF-8 est individuellement encodé en pourcentage. C'est pourquoi les caractères non-ASCII produisent de longues chaînes encodées.

Les navigateurs modernes affichent les caractères internationaux dans la barre d'adresse mais les envoient encodés sur le réseau.

Décoder les URL en toute sécurité

Lorsque vous travaillez avec des URL contenant des données sensibles (endpoints d'API, chemins internes, paramètres d'authentification), faites attention à l'endroit où vous les décodez.

Les décodeurs d'URL en ligne traitent vos données sur leurs serveurs. Si votre URL contient des chemins d'API internes, des jetons d'authentification ou des paramètres de requête sensibles, vous exposez ces informations à un tiers.

Utilisez un décodeur qui s'exécute entièrement dans votre navigateur. Aucune donnée ne doit quitter votre machine.

Le Décodeur URL de FmtDev traite tout localement. Vos URL ne quittent jamais votre navigateur.

Points clés à retenir

L'encodage URL remplace les caractères dangereux par % suivi de valeurs hexadécimales
Les espaces deviennent %20 dans les URL et + dans les formulaires
Utilisez encodeURIComponent() pour les valeurs de paramètres, encodeURI() pour les URL complètes
Attention au double encodage — il casse les URL silencieusement
Encodez toujours les entrées utilisateur avant de les mettre dans une URL
Les caractères internationaux sont encodés en séquences UTF-8 multi-octets
Pour les URL sensibles, décodez localement — n'utilisez jamais d'outils en ligne