- Encodeur / Décodeur URL en ligne

Qu'est-ce que l'encodage d'URL et pourquoi est-il nécessaire ?

Les URLs ne peuvent contenir que des caractères autorisés par la norme RFC 3986. Les espaces, accents, caractères spéciaux (&, =, ?, #…) doivent être encodés en percent-encoding (aussi appelé URL encoding) avant d'être transmis dans une requête HTTP. Sans cet encodage, le navigateur ou le serveur interprète mal l'URL et la requête échoue.

L'encodage percent-encoding remplace chaque caractère problématique par %XX où XX est la valeur hexadécimale de l'octet UTF-8 correspondant. Par exemple, l'espace devient %20, le é devient %C3%A9.

Les trois standards supportés par cet outil

Cas concret : URL mal formée

Imaginons que vous transmettez un terme de recherche contenant un espace et un esperluette dans un paramètre GET :

// ❌ URL invalide — le serveur reçoit 3 paramètres distincts
https://example.com/search?q=café & viennoiseries&lang=fr

// ✅ Avec encodeURIComponent sur la valeur
https://example.com/search?q=caf%C3%A9%20%26%20viennoiseries&lang=fr

Sans encodage, le & est interprété comme séparateur de paramètres et l'espace tronque la valeur. L'encodage garantit que le serveur reçoit exactement la chaîne attendue.

encodeURIComponent vs encodeURI : quelle différence ?

La confusion entre ces deux fonctions JavaScript est l'une des sources d'erreurs les plus fréquentes en développement web. Voici comment les distinguer clairement.

encodeURIComponent — pour les valeurs de paramètres

encodeURIComponent encode tous les caractères qui ont une signification dans une URL (y compris /, ?, #, =, &). C'est la fonction à utiliser pour encoder la valeur d'un paramètre, jamais l'URL entière.

// Encoder une valeur de paramètre (JavaScript)
const searchTerm = 'café & boulangerie';
const url = 'https://example.com/search?q=' + encodeURIComponent(searchTerm);
// → https://example.com/search?q=caf%C3%A9%20%26%20boulangerie

// Décoder
const decoded = decodeURIComponent('caf%C3%A9%20%26%20boulangerie');
// → "café & boulangerie"

encodeURI — pour les URLs complètes

encodeURI est conçue pour encoder une URL entière tout en préservant sa structure. Elle ne touche pas aux caractères réservés comme /, ?, #, = et & qui ont un rôle syntaxique dans l'URL.

// Encoder une URL complète avec espaces (JavaScript)
const rawUrl = 'https://example.com/articles/développement web/guide 2024';
const safeUrl = encodeURI(rawUrl);
// → https://example.com/articles/d%C3%A9veloppement%20web/guide%202024

// ⚠️ encodeURI ne touche pas aux & = ? — ne l'utilisez pas pour les valeurs
const wrong = encodeURI('a & b'); // → "a%20&%20b" — le & N'est PAS encodé !

Règle mnémotechnique

• Valeur d'un paramètre GET → encodeURIComponent
• URL complète à nettoyer → encodeURI
• URL construite dynamiquement → new URL() + URLSearchParams
• PHP côté serveur → urlencode() (valeur) ou rawurlencode() (RFC 3986)

Encodage Base64 texte : btoa, atob et le problème UTF-8

Base64 est un schéma d'encodage qui convertit des données binaires en une chaîne de 64 caractères imprimables ASCII (A-Z, a-z, 0-9, +, /, =). Il est omniprésent dans les data URIs, les tokens d'authentification JWT, les emails MIME et les API REST.

Cet outil gère le texte (contrairement au convertisseur image→Base64 qui gère les fichiers binaires). Il utilise un double encodage UTF-8→Base64 pour supporter les accents et caractères non-ASCII.

Le piège de btoa avec les caractères non-ASCII

La fonction native btoa() du navigateur ne supporte que les caractères Latin-1 (ISO-8859-1). Tenter d'encoder un é ou un € déclenche une InvalidCharacterError. La solution canonique est d'encapsuler avec encodeURIComponent :

// ❌ Erreur avec les accents
btoa('café'); // → InvalidCharacterError

// ✅ Méthode sûre UTF-8 (JavaScript)
function b64Encode(str) {
    return btoa(unescape(encodeURIComponent(str)));
}

function b64Decode(str) {
    return decodeURIComponent(escape(atob(str)));
}

b64Encode('café');  // → "Y2Fmw6k="
b64Decode('Y2Fmw6k='); // → "café"

Cas d'usage courants du Base64 texte

• Tokens HTTP Basic Auth : Authorization: Basic base64(user:password)
• Payload JWT : header et payload encodés en Base64URL (variante sans +/=)
• Data URIs : data:text/html;base64,<contenu HTML encodé>
• Transfert JSON : encoder des chaînes contenant des guillemets ou retours à la ligne
• Obfuscation légère : masquer des paramètres dans un hash d'URL (pas un chiffrement)

Base64URL — la variante pour les URLs

Le Base64 standard utilise + et / qui ont une signification dans les URLs. La variante Base64URL (utilisée dans les JWT) remplace + par -, / par _ et supprime le padding =. Pour la convertir :

// Standard Base64 → Base64URL
function toBase64URL(b64) {
    return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

// Base64URL → Standard Base64
function fromBase64URL(b64url) {
    let b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
    while (b64.length % 4) b64 += '=';
    return b64;
}

URLSearchParams : la bonne pratique pour construire des URLs en JavaScript

Encoder manuellement les paramètres avec encodeURIComponent est fastidieux et source d'erreurs. L'API URLSearchParams (ES2016, supportée par tous les navigateurs modernes et Node.js 10+) gère l'encodage automatiquement.

Construire une URL avec des paramètres encodés

// Construire des paramètres de requête
const params = new URLSearchParams({
    q:    'café & viennoiseries',
    lang: 'fr',
    page: 1
});

const url = 'https://example.com/search?' + params.toString();
// → https://example.com/search?q=caf%C3%A9+%26+viennoiseries&lang=fr&page=1
// Note : URLSearchParams encode l'espace en + (application/x-www-form-urlencoded)

// Avec l'API URL (recommandé)
const fullUrl = new URL('https://example.com/search');
fullUrl.searchParams.set('q', 'café & viennoiseries');
fullUrl.searchParams.set('lang', 'fr');
console.log(fullUrl.toString());
// → https://example.com/search?q=caf%C3%A9+%26+viennoiseries&lang=fr

Parser une URL existante

// Lire les paramètres d'une URL
const url = new URL('https://example.com/search?q=caf%C3%A9&lang=fr&page=2');

console.log(url.searchParams.get('q'));    // → "café"
console.log(url.searchParams.get('lang')); // → "fr"
console.log(url.searchParams.get('page')); // → "2"

// Itérer sur tous les paramètres
url.searchParams.forEach((value, key) => {
    console.log(`${key} = ${value}`);
});
// q = café
// lang = fr
// page = 2

Équivalents PHP côté serveur

<?php
// Encoder (valeur de paramètre) — RFC 3986
$encoded = rawurlencode('café & viennoiseries');
// → caf%C3%A9%20%26%20viennoiseries

// Encoder (formulaire HTML — espace en +)
$encoded = urlencode('café & viennoiseries');
// → caf%C3%A9+%26+viennoiseries

// Décoder
$decoded = rawurldecode('caf%C3%A9%20%26%20viennoiseries');
// → "café & viennoiseries"

// Parser une query string
parse_str('q=caf%C3%A9&lang=fr', $params);
// $params = ['q' => 'café', 'lang' => 'fr']

// Construire une query string
$qs = http_build_query(['q' => 'café', 'lang' => 'fr']);
// → q=caf%C3%A9&lang=fr

Erreurs fréquentes et pièges à éviter

Double encodage accidentel

Le double encodage survient quand on encode une URL déjà encodée. Le % lui-même devient %25 et l'URL est illisible.

// ❌ Double encodage
const alreadyEncoded = 'caf%C3%A9';
encodeURIComponent(alreadyEncoded); // → "caf%25C3%25A9" — mauvais !

// ✅ Décoder d'abord, puis encoder si nécessaire
decodeURIComponent(alreadyEncoded); // → "café"
encodeURIComponent('café');         // → "caf%C3%A9"

Utiliser encodeURI pour des valeurs de paramètres

// ❌ encodeURI pour une valeur — dangereux
const value = 'a=1&b=2';
'https://api.com/data?payload=' + encodeURI(value);
// → https://api.com/data?payload=a=1&b=2
// Le serveur voit : payload=a, b=2 — deux paramètres !

// ✅ encodeURIComponent pour les valeurs
'https://api.com/data?payload=' + encodeURIComponent(value);
// → https://api.com/data?payload=a%3D1%26b%3D2 — correct

Décoder des données non encodées

// decodeURIComponent lève une URIError si % est mal formé
try {
    decodeURIComponent('%ZZ'); // → URIError: URI malformed
} catch (e) {
    console.error('URI invalide :', e.message);
}

// Toujours décoder dans un try/catch en production
function safeDecode(str) {
    try {
        return decodeURIComponent(str);
    } catch {
        return str; // Retourner tel quel si invalide
    }
}

Checklist de débogage URL

• Vérifier si les espaces sont %20 (RFC 3986) ou + (form-data)
• Contrôler les %25 inattendus (signe de double encodage)
• S'assurer que & et = dans les valeurs sont encodés en %26 et %3D
• Valider l'encodage des accents : é → %C3%A9, à → %C3%A0
• En PHP, utiliser rawurlencode (RFC 3986) plutôt que urlencode (espace en +)

Questions fréquentes

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

%20 est l'encodage RFC 3986 (URL encoding standard). Le + représente l'espace dans le format application/x-www-form-urlencoded (soumissions de formulaires HTML). Les deux sont valides selon le contexte : utilisez %20 dans les paths, + ou %20 dans les query strings (les serveurs modernes acceptent les deux).

Le Base64 est-il un chiffrement ?

Non. Base64 est un encodage, pas un chiffrement. Toute donnée Base64 peut être décodée instantanément sans clé. Il ne faut jamais l'utiliser pour protéger des informations sensibles — ce n'est pas une sécurité, c'est de l'obfuscation triviale.

Puis-je encoder une URL entière avec encodeURIComponent ?

Techniquement oui, mais le résultat sera inutilisable car ://, /, ? et = seront encodés. Utilisez encodeURI pour une URL entière, et encodeURIComponent uniquement pour les valeurs des paramètres.

Comment encoder une URL en PHP pour l'intégrer dans du HTML ?

Deux étapes distinctes : 1) encoder l'URL avec rawurlencode sur les parties variables, 2) échapper pour le HTML avec htmlspecialchars :

<?php
$term = 'café & viennoiseries';
$url  = 'https://example.com/search?q=' . rawurlencode($term);
echo '<a href="' . htmlspecialchars($url, ENT_QUOTES, 'UTF-8') . '">Rechercher</a>';
// → <a href="https://example.com/search?q=caf%C3%A9%20%26%20viennoiseries">Rechercher</a>

Quel outil utiliser en Node.js pour encoder une URL ?

En Node.js, les mêmes fonctions JS (encodeURIComponent, encodeURI) sont disponibles. Pour les URLs, préférez l'API URL (built-in depuis Node 10) : new URL(path, base).toString(). Pour les paramètres : new URLSearchParams(obj).toString().

Comment décoder une URL dans la barre d'adresse ?

Dans la console du navigateur (F12 → Console), tapez simplement : decodeURIComponent(location.href) pour l'URL courante, ou collez n'importe quelle URL encodée dans notre outil ci-dessus et cliquez Décoder.

Cet outil envoie-t-il mes données à un serveur ?

Non. Tout le traitement se fait 100% dans votre navigateur via JavaScript. Aucune donnée n'est transmise à un serveur externe. Vous pouvez l'utiliser en toute sécurité pour des URLs ou textes confidentiels.

Conclusion

L'encodage d'URL est une compétence fondamentale que tout développeur web doit maîtriser. Retenir la règle principale suffit pour éviter 90% des bugs : encodeURIComponent pour les valeurs, encodeURI pour les URLs entières, URLSearchParams pour construire proprement.

Pour le Base64 texte, pensez toujours à la compatibilité UTF-8 avec le double encodage btoa(unescape(encodeURIComponent(str))), et rappelez-vous que Base64 n'est pas du chiffrement. Notre outil gère ces cas automatiquement et fonctionne entièrement côté client — copiez le résultat en un clic et intégrez-le directement dans votre code.