Encodage URL (Percent Encoding) : Ce que %20 et %3A signifient vraiment

Vous avez vu %20, %3A ou %2F dans une URL ? Ce sont des caractères encodés en pourcentage — le mécanisme qui permet aux URL de transporter des caractères spéciaux en toute sécurité. Ce guide explique exactement comment fonctionne l'encodage URL.

Essayez notre outil d'encodage/décodage URL pour encoder ou décoder n'importe quelle chaîne →

Qu'est-ce que l'encodage URL (Percent Encoding) ?

L'encodage URL, appelé formellement percent encoding, est un mécanisme défini dans la RFC 3986 pour représenter les caractères non autorisés ou ayant une signification spéciale dans un URI. Il remplace chaque caractère cible par un signe % suivi de deux chiffres hexadécimaux.

Les URL ne peuvent contenir qu'un ensemble limité de caractères ASCII. Les caractères sont divisés en caractères réservés (avec une signification structurelle comme /, ?, &) et non réservés (lettres, chiffres, -, _, ., ~). Tout le reste doit être encodé.

Par exemple, un espace (ASCII 32, hex 0x20) devient %20. Un deux-points (ASCII 58, hex 0x3A) devient %3A.

// URL encoding in action
Original:  https://example.com/search?q=hello world&lang=en
Encoded:   https://example.com/search?q=hello%20world&lang=en

// Reserved characters and their encoded forms:
//   space → %20    : → %3A    / → %2F
//   ? → %3F        & → %26    = → %3D
//   # → %23        + → %2B    @ → %40

Table de référence des caractères encodés

Voici une table de référence rapide des caractères les plus couramment encodés.

Comment fonctionne l'encodage URL (étape par étape)

Le processus suit trois étapes : (1) prendre le caractère, (2) le convertir en séquence d'octets UTF-8, (3) encoder chaque octet en %XX. Pour les caractères ASCII, cela produit un seul triplet. Pour les caractères UTF-8 multi-octets, chaque octet est encodé séparément.

Voici plusieurs exemples pour illustrer ce processus :

// Step-by-step: How characters become percent-encoded

// Example 1: ASCII character (space)
// Character: " " (space)
// ASCII code: 32 → hex: 0x20
// Encoded:    %20

// Example 2: ASCII character (ampersand)
// Character: "&"
// ASCII code: 38 → hex: 0x26
// Encoded:    %26

// Example 3: Multi-byte UTF-8 (accented letter)
// Character: "é"
// Unicode: U+00E9
// UTF-8 bytes: 0xC3 0xA9 (2 bytes)
// Encoded:     %C3%A9

// Example 4: Multi-byte UTF-8 (Chinese character)
// Character: "中"
// Unicode: U+4E2D
// UTF-8 bytes: 0xE4 0xB8 0xAD (3 bytes)
// Encoded:     %E4%B8%AD

// Example 5: Multi-byte UTF-8 (emoji)
// Character: "🚀"
// Unicode: U+1F680
// UTF-8 bytes: 0xF0 0x9F 0x9A 0x80 (4 bytes)
// Encoded:     %F0%9F%9A%80

Les langages modernes gèrent cela automatiquement. Utilisez les fonctions intégrées montrées dans ce guide ou notre outil en ligne.

Encodez et décodez avec notre outil URL Encoder →

encodeURI vs encodeURIComponent en JavaScript

JavaScript fournit deux fonctions d'encodage URL. Choisir la mauvaise est une source courante de bugs.

encodeURI() encode un URI complet en préservant les caractères structurels : : / ? # [ ] @ ! $ & ' ( ) * + , ; =.

// encodeURI() — preserves URL structure
const url = 'https://example.com/path name?q=hello world';
encodeURI(url);
// → "https://example.com/path%20name?q=hello%20world"
// ✓ :// / ? = are NOT encoded (structure preserved)

encodeURIComponent() encode un composant d'URI (comme une valeur de paramètre). Il encode tout sauf les lettres, chiffres et - _ . ~ ! ' ( ) *.

// encodeURIComponent() — encodes everything for use as a value
const value = 'price=100&discount=20%';
encodeURIComponent(value);
// → "price%3D100%26discount%3D20%25"
// ✓ = & % ARE encoded (they're data, not structure)

// Correct pattern: build URL piece by piece
const base = 'https://api.example.com/search';
const query = 'Tom & Jerry: The Movie';
const fullUrl = base + '?q=' + encodeURIComponent(query);
// → "https://api.example.com/search?q=Tom%20%26%20Jerry%3A%20The%20Movie"

Règle : Utilisez toujours encodeURIComponent() pour les valeurs de paramètres. N'utilisez encodeURI() que pour encoder une URL complète.

// Comparison table — which characters get encoded?
//
// Character  encodeURI()  encodeURIComponent()
// ─────────  ───────────  ────────────────────
// space      %20          %20
// /          /  (kept)    %2F (encoded)
// ?          ?  (kept)    %3F (encoded)
// &          &  (kept)    %26 (encoded)
// =          =  (kept)    %3D (encoded)
// #          #  (kept)    %23 (encoded)
// :          :  (kept)    %3A (encoded)
// +          +  (kept)    %2B (encoded)
// @          @  (kept)    %40 (encoded)
// é          %C3%A9       %C3%A9
// 中         %E4%B8%AD    %E4%B8%AD

Encodage URL dans différents langages

Chaque langage majeur a des fonctions intégrées pour l'encodage URL :

JavaScript

// JavaScript — encodeURIComponent / URLSearchParams
// Encode a query parameter value
encodeURIComponent('hello world&key=val');
// → "hello%20world%26key%3Dval"

// Decode
decodeURIComponent('hello%20world%26key%3Dval');
// → "hello world&key=val"

// URLSearchParams (auto-encodes, uses + for spaces)
const params = new URLSearchParams({ q: 'Tom & Jerry', page: '1' });
params.toString(); // → "q=Tom+%26+Jerry&page=1"

Python

# Python 3 — urllib.parse
from urllib.parse import quote, quote_plus, unquote, urlencode

# Path encoding (spaces → %20)
quote('hello world/file')        # → "hello%20world/file"
quote('hello world/file', safe='')  # → "hello%20world%2Ffile"

# Query value encoding (spaces → +)
quote_plus('hello world&key=val')  # → "hello+world%26key%3Dval"

# Build query string from dict
urlencode({'q': 'Tom & Jerry', 'page': '1'})
# → "q=Tom+%26+Jerry&page=1"

# Decode
unquote('%E4%B8%AD%E6%96%87')  # → "中文"

Java

// Java — URLEncoder (spaces → +)
import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

String encoded = URLEncoder.encode(
    "hello world&key=val", StandardCharsets.UTF_8
);
// → "hello+world%26key%3Dval"

String decoded = URLDecoder.decode(encoded, StandardCharsets.UTF_8);
// → "hello world&key=val"

Go

// Go — net/url package
package main
import "net/url"

// Query value encoding (spaces → +)
url.QueryEscape("hello world&key=val")
// → "hello+world%26key%3Dval"

// Path segment encoding (spaces → %20)
url.PathEscape("hello world/file")
// → "hello%20world%2Ffile"

// Build URL safely with url.Values
vals := url.Values{}
vals.Set("q", "Tom & Jerry")
vals.Encode() // → "q=Tom+%26+Jerry"

PHP

<?php
// PHP — urlencode (spaces → +) / rawurlencode (spaces → %20)
urlencode('hello world&key=val');
// → "hello+world%26key%3Dval"

rawurlencode('hello world&key=val');
// → "hello%20world%26key%3Dval"

http_build_query(['q' => 'Tom & Jerry', 'page' => 1]);
// → "q=Tom+%26+Jerry&page=1"

urldecode('hello%20world');  // → "hello world"
?>

Ruby

# Ruby — CGI / URI
require 'cgi'
require 'uri'

CGI.escape('hello world&key=val')
# → "hello+world%26key%3Dval"

URI.encode_www_form('q' => 'Tom & Jerry', 'page' => '1')
# → "q=Tom+%26+Jerry&page=1"

CGI.unescape('hello%20world')  # → "hello world"

Erreurs courantes d'encodage URL

1. Double encodage

Le double encodage survient quand on encode une chaîne déjà encodée. %20 devient %2520. Encodez toujours une seule fois.

// Double encoding — a very common bug
const value = 'hello world';
const encoded = encodeURIComponent(value);  // "hello%20world"

// BUG: encoding again
encodeURIComponent(encoded);
// → "hello%2520world"  (%20 → %25 + 20)
// Server decodes to "%20" (literal) instead of " " (space)

// FIX: encode raw values exactly once

2. Encoder l'URL entière

Passer une URL complète à encodeURIComponent() casse la structure. N'encodez que les valeurs individuelles.

// WRONG: encoding entire URL
encodeURIComponent('https://example.com/api?q=test');
// → "https%3A%2F%2Fexample.com%2Fapi%3Fq%3Dtest"  (broken!)

// CORRECT: encode only the parameter value
'https://example.com/api?q=' + encodeURIComponent('test value');
// → "https://example.com/api?q=test%20value"

3. Espace : + vs %20

Les formulaires HTML utilisent + pour les espaces. La RFC 3986 utilise %20. Pour les API, préférez %20.

// Space encoding: + vs %20
// HTML form submission (application/x-www-form-urlencoded):
//   "hello world" → "hello+world"

// RFC 3986 (URI standard):
//   "hello world" → "hello%20world"

// JavaScript functions:
encodeURIComponent('hello world');  // → "hello%20world" (RFC 3986)
new URLSearchParams({q: 'hello world'}).toString(); // → "q=hello+world" (form)

4. Oublier d'encoder les paramètres

Ne pas encoder les valeurs utilisateur dans les chaînes de requête est un risque de sécurité et cause des URL cassées.

// Missing encoding breaks URLs
const search = 'Tom & Jerry';

// WRONG: unencoded & splits the value
'/search?q=' + search;
// → "/search?q=Tom & Jerry"
// Server sees: q="Tom " and Jerry="" (two params!)

// CORRECT: encode the value
'/search?q=' + encodeURIComponent(search);
// → "/search?q=Tom%20%26%20Jerry"
// Server sees: q="Tom & Jerry" (one param)

Bonnes pratiques pour l'encodage URL

Encodez toujours les entrées utilisateur avant de les insérer dans des chaînes de requête ou des segments de chemin.

Utilisez les fonctions de bibliothèque comme encodeURIComponent() ou urllib.parse.quote() de Python.

Testez avec des caractères spéciaux : & = ? / # + % et des caractères non-ASCII.

Utilisez Base64 URL-safe pour les données binaires dans les URL.

// Best practice: use URL / URLSearchParams API
const url = new URL('https://api.example.com/search');
url.searchParams.set('q', 'Tom & Jerry: The Movie');
url.searchParams.set('lang', 'en');
url.toString();
// → "https://api.example.com/search?q=Tom+%26+Jerry%3A+The+Movie&lang=en"
// All encoding handled automatically!

// URL-safe Base64 (avoids + and / in URLs)
// Standard:  "SGVsbG8gV29ybGQ=" (may contain + / =)
// URL-safe:  "SGVsbG8gV29ybGQ"  (uses - _ instead)

Base64 Encoder →URL Parser →

Questions fréquentes

Pourquoi l'espace est-il encodé en %20 ?

L'espace a le code ASCII 32, soit 0x20 en hexadécimal. Le percent encoding représente un octet par % suivi de sa valeur hex.

Quelle est la différence entre + et %20 ?

%20 vient de la RFC 3986. + vient du format application/x-www-form-urlencoded. %20 est plus universel.

Faut-il encoder l'URL entière ?

Non. Encodez uniquement les composants individuels. Les caractères structurels doivent rester non encodés.

Quelle différence entre encodeURI et encodeURIComponent ?

encodeURI() préserve les caractères structurels. encodeURIComponent() les encode. Utilisez encodeURIComponent() pour les valeurs de paramètres.

Comment décoder une chaîne encodée URL ?

En JavaScript : decodeURIComponent(). En Python : urllib.parse.unquote(). En PHP : urldecode().

L'encodage URL est un concept fondamental du web. Gardez ce guide en favori pour référence rapide.

Essayez notre outil URL Encoder/Decoder →