URL Encoding : Le Guide Complet pour les Développeurs Web

Vous avez probablement déjà vu ces chaînes de caractères étranges dans vos URLs : %20, %3F, %26… C’est l’encodage URL en action, aussi appelé percent encoding. Que vous cherchiez à encoder une URL en ligne gratuitement, à comprendre comment encoder les caractères spéciaux dans une URL, ou à résoudre un problème d’encodage URL en PHP ou JavaScript, ce guide est fait pour vous.

L’encodage URL est essentiel pour transmettre des données correctement entre le navigateur et le serveur. Sans lui, les espaces, accents et caractères spéciaux comme &, ? ou = casseraient vos URLs ou seraient interprétés incorrectement. C’est un problème courant qui peut causer des bugs difficiles à diagnostiquer dans vos applications web et APIs.

Dans ce guide complet, nous allons démystifier l’encodage URL et vous montrer comment utiliser notre encodeur URL pour convertir une URL en format encodé rapidement et efficacement. Vous apprendrez également à décoder une URL avec accents et à éviter les erreurs courantes.

Qu’est-ce que l’encodage URL ?

L’encodage URL, aussi appelé percent encoding, est un mécanisme qui permet de représenter les caractères spéciaux dans une URL de manière sûre. Les URLs ne peuvent contenir qu’un ensemble limité de caractères ASCII, donc tout caractère en dehors de cet ensemble doit être encodé.

Comment ça fonctionne ?

Chaque caractère spécial est remplacé par un signe % suivi de sa valeur hexadécimale en ASCII ou UTF-8 :

CaractèreEncodéExplication
Espace%20 ou +Le plus courant
é%C3%A9UTF-8 sur 2 octets
&%26Séparateur de paramètres
?%3FDébut query string
=%3DAssignation de valeur

Pourquoi encoder les URLs ?

1. Éviter les ambiguïtés

Certains caractères ont une signification spéciale dans les URLs :

https://example.com/search?q=rock&roll&page=1

Sans encodage, le navigateur interprète &roll comme un nouveau paramètre au lieu d’une partie de la recherche. La version correcte :

https://example.com/search?q=rock%26roll&page=1

2. Supporter les caractères internationaux

Les URLs ne supportent nativement que les caractères ASCII. Pour inclure des accents ou des caractères non-latins :

# Incorrect (peut ne pas fonctionner)
https://example.com/café

# Correct
https://example.com/caf%C3%A9

3. Transmettre des données sécurisées

Dans les formulaires et les APIs, l’encodage URL garantit que vos données arrivent intactes au serveur.

Caractères réservés : la liste complète

Voici les caractères qui ont une signification spéciale dans les URLs et qui doivent être encodés s’ils font partie de vos données :

Caractères réservés généraux

CaractèreCodeUtilisation normale
:%3ASéparateur protocole/port
/%2FSéparateur de chemin
?%3FDébut des paramètres
#%23Fragment (ancre)
[%5BIPv6 littéral
]%5DIPv6 littéral
@%40Identifiant utilisateur

Caractères réservés dans les query strings

CaractèreCodeUtilisation normale
&%26Séparateur de paramètres
=%3DAssignation key=value
+%2BReprésente un espace

Le cas particulier des espaces : %20 ou + ?

Pourquoi encoder les espaces dans une URL ? Parce que l’espace est un caractère non autorisé dans les URLs. C’est une question fréquente : faut-il utiliser URL encode espace %20 ou + ?

Dans le chemin de l’URL

Utilisez toujours %20 :

https://example.com/mon%20document.pdf

Dans les paramètres de query string

Les deux sont techniquement valides, mais il y a des nuances :

  • + : Convention historique des formulaires HTML (application/x-www-form-urlencoded)
  • %20 : Standard RFC 3986, plus universel

Notre recommandation : Utilisez %20 pour être compatible avec toutes les situations. Notre encodeur URL utilise cette convention par défaut.

Utiliser notre encodeur URL

Notre encodeur URL simplifie l’encodage et le décodage de vos URLs. Voici comment l’utiliser efficacement :

Encoder une URL

  1. Collez votre texte ou URL dans la zone de saisie
  2. Cliquez sur “Encoder”
  3. Copiez le résultat encodé

Exemple pratique :

Entrée : Recherche : été 2025 & vacances
Sortie : Recherche%20%3A%20%C3%A9t%C3%A9%202025%20%26%20vacances

Décoder une URL avec accents

Le processus inverse fonctionne aussi simplement. Décoder une URL avec accents est particulièrement utile quand vous recevez des données encodées depuis un formulaire ou une API :

Entrée : caf%C3%A9%20cr%C3%A8me
Sortie : café crème

Cas d’utilisation dans le développement

Encoder une URL pour API REST

Lorsque vous devez encoder une URL pour API REST, il est crucial d’encoder correctement vos paramètres pour éviter les erreurs de transmission :

// JavaScript
const searchTerm = "café & thé";
const url = `https://api.example.com/search?q=${encodeURIComponent(searchTerm)}`;
// Résultat : https://api.example.com/search?q=caf%C3%A9%20%26%20th%C3%A9
// PHP
$searchTerm = "café & thé";
$url = "https://api.example.com/search?q=" . urlencode($searchTerm);
# Python
from urllib.parse import quote
search_term = "café & thé"
url = f"https://api.example.com/search?q={quote(search_term)}"

Construction de liens dynamiques

Dans vos applications web, encodez les valeurs utilisateur avant de les intégrer aux URLs :

// Mauvais - vulnérable aux injections
const link = `/product/${productName}`;

// Bon - sécurisé
const link = `/product/${encodeURIComponent(productName)}`;

Formulaires HTML

Les navigateurs encodent automatiquement les données de formulaire, mais si vous construisez des requêtes manuellement :

const formData = new URLSearchParams();
formData.append('name', 'Jean-François');
formData.append('city', 'Montréal');
// Résultat : name=Jean-Fran%C3%A7ois&city=Montr%C3%A9al

Erreurs courantes et comment les éviter

1. Double encodage

Le piège classique : encoder une URL déjà encodée.

Original : café
Premier encodage : caf%C3%A9 ✓
Double encodage : caf%25C3%25A9 ✗

Solution : Toujours décoder d’abord si vous avez un doute, puis ré-encoder si nécessaire.

2. Oublier d’encoder les paramètres

// Problème : le & coupe le paramètre
?search=rock&roll&page=1
// Le serveur reçoit : search=rock, roll=undefined, page=1

// Solution
?search=rock%26roll&page=1
// Le serveur reçoit : search=rock&roll, page=1

3. Encoder l’URL entière

N’encodez pas la structure de l’URL, seulement les données :

// Incorrect - casse l'URL
encodeURIComponent("https://example.com/search?q=test")
// Résultat : https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

// Correct - encode seulement la valeur
"https://example.com/search?q=" + encodeURIComponent("test & value")

4. Problèmes d’encodage avec les accents

Si vous voyez des caractères comme é au lieu de é, vous avez probablement un problème d’encodage de caractères (UTF-8 vs Latin-1).

Solution : Assurez-vous que toute votre chaîne de traitement utilise UTF-8 :

  • Headers HTTP : Content-Type: text/html; charset=utf-8
  • Méta HTML : <meta charset="utf-8">
  • Base de données : Utilisez utf8mb4 en MySQL

Outils complémentaires

Pour un workflow complet de développement web, découvrez aussi :

Conclusion

L’encodage URL est une compétence fondamentale pour tout développeur web. En comprenant quand et comment encoder vos URLs, vous éviterez de nombreux bugs liés à la transmission de données et améliorerez la robustesse de vos applications.

Notre encodeur URL est là pour vous aider au quotidien : que ce soit pour encoder rapidement une chaîne de caractères, décoder une URL mystérieuse, ou debugger un problème de transmission de données.

Essayez-le dès maintenant et simplifiez votre workflow de développement !