Qu'est-ce que l'encodage d'URL et pourquoi en avons-nous besoin ?

L'encodage d'URL, également connu sous le nom d'encodage en pourcentage, est un mécanisme fondamental pour encoder les informations dans les URL. Si vous avez déjà vu %20 ou %3F dans une adresse web, vous avez rencontré l'encodage d'URL en action.

Pourquoi l'encodage d'URL existe

Les URL (Uniform Resource Locators) ont été conçues aux débuts d'Internet avec des limitations strictes. Elles ne peuvent contenir qu'un ensemble spécifique de caractères ASCII :

• Lettres : A-Z, a-z
• Chiffres : 0-9
• Caractères sûrs : -, _, ., ~

Mais voici le problème : les applications web doivent transmettre toutes sortes de données via les URL - y compris des espaces, des symboles spéciaux et des caractères de toutes les langues humaines. L'encodage d'URL résout ce défi.

Le problème que l'encodage d'URL résout

Les caractères réservés ont une signification spéciale

Certains caractères dans les URL ont des objectifs spécifiques :

Que se passe-t-il sans encodage ?

Imaginez que vous voulez rechercher "Tom & Jerry" :

❌ Mauvais : example.com/search?q=Tom & Jerry

Le navigateur interprète & comme un séparateur de paramètres, ce qui fait deux paramètres :

• q=Tom (incomplet !)
• Jerry (qu'est-ce que c'est ?)

Avec l'encodage :

✅ Bon : example.com/search?q=Tom%20%26%20Jerry

Maintenant c'est clair : un paramètre q avec la valeur "Tom & Jerry".

Les caractères internationaux ne sont pas en ASCII

Le jeu de caractères ASCII original n'inclut pas :

• Caractères chinois : 中文
• Écriture arabe : العربية
• Émojis : 😀
• Lettres accentuées : café, naïve

L'encodage d'URL rend tous ces caractères transmissibles.

Comment fonctionne l'encodage d'URL

Le processus d'encodage suit une règle simple :

Remplacer les caractères spéciaux par % suivi de deux chiffres hexadécimaux représentant la valeur du caractère.

Encodages de caractères courants

Comment fonctionne l'hexadécimal

Chaque caractère a un code ASCII. La représentation hexadécimale (base 16) rend l'encodage compact :

Caractère espace :
- Code ASCII : 32 (décimal)
- Hexadécimal : 20
- Encodé : %20

Esperluette (&) :
- Code ASCII : 38 (décimal)
- Hexadécimal : 26
- Encodé : %26

UTF-8 et caractères internationaux

Pour les caractères en dehors de l'ASCII (essentiellement tout ce qui n'est pas en anglais), l'encodage d'URL utilise UTF-8 :

1. Convertir le caractère en octets UTF-8
2. Encoder chaque octet comme %XX

Exemples

Caractère chinois "中" :

Caractère : 中
Octets UTF-8 : E4 B8 AD (3 octets)
Encodé : %E4%B8%AD

Émoji "😀" :

Caractère : 😀
Octets UTF-8 : F0 9F 98 80 (4 octets)
Encodé : %F0%9F%98%80

Cela rend chaque caractère de chaque langue transmissible via les URL !

Cas d'utilisation dans le monde réel

1. Requêtes de recherche

Lorsque vous recherchez quelque chose sur Google :

Ce que vous tapez : "best coffee in tokyo"
Ce que l'URL devient : ?q=best%20coffee%20in%20tokyo

2. Soumissions de formulaires

Les formulaires HTML avec method="GET" encodent les données du formulaire :

<form method="GET" action="/search">
  <input name="product" value="women's shoes" />
  <input name="size" value="7" />
</form>

Soumet vers : /search?product=women%27s%20shoes&size=7

3. Requêtes API

Construction d'appels API RESTful avec paramètres :

Original : /api/users?name=John Doe&[email protected]
Encodé : /api/users?name=John%20Doe&email=john%40example.com

4. Authentification

Les URL de redirection OAuth contiennent souvent des URL de rappel encodées :

/oauth/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback

5. Liens de partage

Les boutons de partage sur les réseaux sociaux encodent l'URL partagée :

https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Farticle&text=Check%20this%20out%21

Quand encoder

Toujours encoder :

✅ Entrée utilisateur dans les paramètres de requête ✅ Données de formulaire avec caractères spéciaux ✅ Texte international (chinois, arabe, émojis, etc.) ✅ Chemins de fichiers avec espaces ✅ Adresses e-mail dans les URL ✅ Données JSON dans les URL

Généralement pas besoin d'encoder :

❌ Le chemin lui-même (sauf s'il contient des caractères spéciaux) ❌ Le nom de domaine ❌ Le protocole (https://) ❌ La ponctuation standard sous votre contrôle

Comment encoder les URL

JavaScript

// Pour les valeurs de paramètres (le plus courant)
const query = "hello world!";
const encoded = encodeURIComponent(query);
// Résultat : "hello%20world%21"

// Pour les URL complètes
const url = "https://example.com/search?q=hello world";
const encoded = encodeURI(url);
// Résultat : "https://example.com/search?q=hello%20world"

Python

from urllib.parse import quote, quote_plus

# Encodage standard
text = "hello world!"
encoded = quote(text)  # 'hello%20world%21'

# Encodage plus (pour les données de formulaire)
encoded = quote_plus(text)  # 'hello+world%21'

PHP

// Pour les valeurs de paramètres
$query = "hello world!";
$encoded = urlencode($query);  // "hello+world%21"

// Pour usage général
$encoded = rawurlencode($query);  // "hello%20world%21"

Pièges courants

1. Oublier d'encoder l'entrée utilisateur

// ❌ Dangereux - se casse avec des caractères spéciaux
const url = `/search?q=${userInput}`;

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

2. Double encodage

// ❌ Mauvais - encoder deux fois
const text = "hello world";
const encoded = encodeURIComponent(encodeURIComponent(text));
// Résultat : "hello%2520world" (cassé !)

// ✅ Bon - encoder une fois
const encoded = encodeURIComponent(text);
// Résultat : "hello%20world"

3. Ne pas décoder après transmission

// ❌ Mauvais - afficher le texte encodé aux utilisateurs
console.log(params.get('name'));  // "John%20Doe"

// ✅ Bon - décoder pour l'affichage
console.log(decodeURIComponent(params.get('name')));  // "John Doe"

Meilleures pratiques

1. Toujours encoder l'entrée utilisateur avant de la mettre dans les URL
2. Utiliser les fonctions intégrées - n'essayez pas d'encoder manuellement
3. Choisir la bonne fonction - encodeURIComponent() pour les paramètres
4. Décoder lors de la lecture - ne montrez pas %20 aux utilisateurs
5. Tester avec des caractères spéciaux - y compris espaces, &, =, #
6. Tester avec du texte international - chinois, arabe, émojis
7. Ne pas mettre de données sensibles dans les URL - même encodées, elles sont visibles

Tester vos URL

Vous voulez expérimenter avec l'encodage d'URL ? Essayez ces outils gratuits :

• Encodeur d'URL - Encodez le texte en toute sécurité pour les URL
• Décodeur d'URL - Décodez les chaînes encodées en pourcentage
• Analyseur d'URL - Visualisez tous les composants d'une URL

Conclusion

L'encodage d'URL est un concept simple mais essentiel pour le développement web. Il garantit que :

• Les caractères spéciaux ne cassent pas les URL
• Le texte international peut être transmis
• Les données circulent en toute sécurité entre client et serveur
• Les URL fonctionnent de manière cohérente sur tous les systèmes

Rappelez-vous : En cas de doute, encodez-le ! Vos URL (et vos utilisateurs) vous en remercieront.

---

Essayez notre encodeur d'URL gratuit pour encoder vos URL instantanément, ou utilisez le décodeur d'URL pour décoder les chaînes encodées en pourcentage !