Encodage URL vs encodage Base64 : quelle est la différence ?

Qu'est-ce que l'encodage URL ?

L'encodage URL, également appelé percent-encoding, est défini par la RFC 3986 comme le mécanisme permettant de représenter dans un URI les caractères interdits ou dotés d'une signification particulière. Chaque caractère à encoder est converti en un ou plusieurs octets (à l'aide d'UTF-8), et chaque octet est représenté par un signe pourcentage (%) suivi de deux chiffres hexadécimaux en majuscules.

Par exemple, un espace devient %20, une esperluette devient %26, et un caractère non-ASCII comme le signe Euro devient %E2%82%AC (trois octets UTF-8, chacun encodé en pourcentage).

// Exemples d'encodage URL en JavaScript
encodeURIComponent('hello world');   // "hello%20world"
encodeURIComponent('price=10&qty=2'); // "price%3D10%26qty%3D2"
encodeURIComponent('cafe');         // "caf%C3%A9"

L'encodage URL est spécifiquement conçu pour rendre les URL sûres et valides. Il n'encode que les caractères qui ne sont pas autorisés ou qui ont une signification réservée dans les URI, en laissant intacts les caractères alphanumériques et quelques symboles sûrs.

Qu'est-ce que l'encodage Base64 ?

L'encodage Base64, défini par la RFC 4648, est un schéma d'encodage binaire-vers-texte qui représente des données binaires à l'aide d'un jeu de 64 caractères ASCII : A-Z, a-z, 0-9, + et /, le caractère = servant de remplissage (padding). Chaque groupe de trois octets en entrée produit quatre caractères en sortie.

Base64 a été conçu pour transmettre des données binaires sur des canaux qui ne prennent en charge de façon fiable que le texte, comme le courrier électronique (MIME) ou l'intégration de données dans du XML/JSON. Il n'est pas propre aux URL et encode l'ensemble des octets d'entrée, et non seulement les caractères spéciaux.

// Exemples d'encodage Base64 en JavaScript
btoa('hello world');         // "aGVsbG8gd29ybGQ="
btoa('price=10&qty=2');      // "cHJpY2U9MTAmcXR5PTI="

// Pour les chaines Unicode, encodez d'abord en UTF-8
function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
toBase64('cafe');           // "Y2Fmw6k="

Il existe également une variante compatible avec les URL de Base64 (Base64url) qui remplace + par - et / par _, et qui omet souvent le remplissage =. Cette variante est utilisée dans les JWT, les data URI dans les URL et d'autres contextes où les caractères standard de Base64 entreraient en conflit avec la syntaxe des URL.

Différences essentielles

Caractéristique	Encodage URL	Encodage Base64
Standard	RFC 3986	RFC 4648
Objectif	Rendre les URL sûres	Représenter des données binaires en texte
Encode	Uniquement les caractères spéciaux/réservés	Tous les octets d'entrée
Format de sortie	Séquences hexadécimales %XX	A-Z, a-z, 0-9, +, /, =
Augmentation de taille	Variable (seuls les caractères encodés grossissent)	Toujours ~33 % plus volumineux
Réversible	Oui	Oui
Lisible par un humain	Partiellement (les caractères non réservés restent)	Non
Compatible URL par défaut	Oui (par conception)	Non (contient +, /, =)

Quand utiliser l'un ou l'autre

Utilisez l'encodage URL lorsque vous devez inclure des caractères spéciaux dans une URL, tels que des valeurs de paramètres de requête, des segments de chemin ou des identifiants de fragment. L'encodage URL est le bon choix pour toute situation où des données doivent être intégrées dans une structure d'URL.

Utilisez l'encodage Base64 lorsque vous devez représenter des données binaires (images, fichiers, charges utiles chiffrées) sous forme de texte, intégrer du contenu binaire dans du JSON ou du XML, ou transmettre des données via des canaux exclusivement textuels. Base64 est également utilisé dans les en-têtes d'authentification HTTP Basic et dans les JSON Web Tokens (JWT).

// Encodage URL : intégration d'un terme de recherche dans une URL
const searchUrl = 'https://example.com/search?q=' +
  encodeURIComponent('C++ & Java');
// "https://example.com/search?q=C%2B%2B%20%26%20Java"

// Base64 : intégration d'une image dans du CSS ou du HTML
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

// Base64 : en-tete d'authentification HTTP Basic
const credentials = btoa('username:password');
const header = 'Authorization: Basic ' + credentials;

Peut-on les combiner ?

Oui, et dans certains cas c'est indispensable. Si vous devez transmettre des données encodées en Base64 comme paramètre d'URL, la sortie Base64 standard peut contenir les caractères +, / et =, qui ont des significations particulières dans les URL. Vous avez deux options :

Option 1 : encodez en URL la chaîne Base64 avant de la placer dans l'URL. Le + devient %2B, le / devient %2F et le = devient %3D.

Option 2 : utilisez la variante Base64url (RFC 4648 section 5), qui remplace + par -, / par _ et supprime le remplissage. C'est l'approche utilisée par les JWT et de nombreuses API modernes.

// Option 1 : encoder en URL du Base64 standard
const base64 = btoa('binary data here'); // "YmluYXJ5IGRhdGEgaGVyZQ=="
const urlSafe = encodeURIComponent(base64);
// "YmluYXJ5IGRhdGEgaGVyZQ%3D%3D"

// Option 2 : encodage Base64url
function toBase64url(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}
toBase64url('binary data here');
// "YmluYXJ5IGRhdGEgaGVyZQ"