Base64 expliqué : encodage, cas d'utilisation et pièges à éviter

Base64 : un outil fondamental souvent mal compris

Base64 est l'un de ces outils que tout développeur utilise régulièrement sans forcément comprendre son fonctionnement interne. On le croise dans les JWT, les Data URIs, les pièces jointes email, les APIs REST... Pourtant, de nombreuses confusions persistent — notamment la croyance que Base64 « protège » les données. Décortiquons cet encodage essentiel.

Comment fonctionne Base64 : l'algorithme pas à pas

Le principe de Base64 est de convertir des données binaires en texte ASCII en utilisant un alphabet de 64 caractères imprimables : A-Z (26) + a-z (26) + 0-9 (10) + + et / (2).

Le processus d'encodage

Grouper par 3 octets : les données binaires sont prises par blocs de 3 octets (24 bits)
Diviser en 4 groupes de 6 bits : chaque bloc de 24 bits est découpé en 4 groupes de 6 bits
Convertir : chaque groupe de 6 bits (valeur 0-63) est remplacé par le caractère correspondant dans l'alphabet Base64
Padding : si les données ne sont pas un multiple de 3, des caractères = sont ajoutés

Exemple concret : encodons le texte Hi

Texte : H         i
ASCII : 72        105
Binaire : 01001000  01101001

Groupes de 6 bits : 010010  000110  1001xx
                    18      6       36 (avec padding)

Base64 : S         G        k       =
Résultat : "SGk="

Le résultat est 4 caractères pour 2 octets d'entrée, soit une augmentation de 100% pour ce petit exemple. En général, l'augmentation est d'environ 33% (ratio 4/3).

Les variantes de Base64

Base64 Standard (RFC 4648)

L'alphabet standard utilise A-Za-z0-9+/ avec le padding =. C'est la variante utilisée par la plupart des fonctions btoa(), base64_encode(), etc.

Base64URL (RFC 4648 §5)

Remplace + par - et / par _, et omet souvent le padding. Conçu pour être utilisé directement dans les URLs et les noms de fichiers. C'est la variante utilisée par JWT.

MIME Base64

Identique au standard mais avec des sauts de ligne tous les 76 caractères. Utilisé dans les emails (pièces jointes) et les anciens systèmes.

Cas d'utilisation concrets

1. Data URIs : intégrer des images dans le code

Les Data URIs permettent d'inclure des petites images directement dans le HTML ou CSS, évitant une requête HTTP supplémentaire :

/* CSS - Image de fond en Base64 */
.icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUh...);
}

/* HTML - Image inline */
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..." alt="icone">

Recommandation : réservez cette technique aux fichiers de moins de 10-15 Ko. Au-delà, une image externe avec cache HTTP sera plus performante.

2. JSON Web Tokens (JWT)

Un JWT est composé de trois parties séparées par des points, chacune encodée en Base64URL :

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U
|___ Header ___|.___ Payload ___|._______ Signature _______|

Chaque partie peut être décodée avec un simple atob() pour lire le contenu (sauf la signature). Utilisez notre décodeur JWT pour inspecter vos tokens facilement.

3. Authentification HTTP Basic

Le schéma HTTP Basic Auth encode les identifiants en Base64 :

Authorization: Basic dXNlcjpwYXNzd29yZA==
// Décodé : "user:password"

Attention : ce n'est PAS du chiffrement ! Sans HTTPS, les identifiants transitent en clair (Base64 est réversible instantanément).

4. Upload de fichiers via API JSON

JSON ne supporte pas les données binaires nativement. Pour envoyer un fichier via une API JSON, on l'encode en Base64 :

{
  "nom_fichier": "photo.jpg",
  "contenu": "base64_encoded_data_here...",
  "type_mime": "image/jpeg"
}

Pour les gros fichiers, préférez multipart/form-data qui est beaucoup plus efficace (pas d'augmentation de 33%).

Les pièges courants à éviter

Confondre encodage et chiffrement : Base64 ne fournit aucune sécurité. C'est une transformation réversible sans clé. N'utilisez jamais Base64 pour « protéger » des données sensibles.
Encoder des fichiers volumineux : l'augmentation de 33% plus la consommation mémoire rendent Base64 inadapté aux gros fichiers. Un fichier de 10 Mo devient 13.3 Mo de texte.
Oublier le charset : btoa() en JavaScript ne gère que les caractères Latin-1. Pour l'UTF-8, utilisez : btoa(unescape(encodeURIComponent(texte))).
Confondre Base64 et Base64URL : remplacer manuellement + par - et / par _ est une source d'erreurs. Utilisez les fonctions dédiées.
Double encodage : encoder en Base64 des données déjà en Base64 est une erreur fréquente lors de la chaîne de traitement.

Implémentation dans les langages courants

// JavaScript
const encoded = btoa('Hello');           // "SGVsbG8="
const decoded = atob('SGVsbG8=');        // "Hello"

// Python
import base64
encoded = base64.b64encode(b'Hello')     # b'SGVsbG8='
decoded = base64.b64decode(b'SGVsbG8=')  # b'Hello'

// PHP
$encoded = base64_encode('Hello');       // "SGVsbG8="
$decoded = base64_decode('SGVsbG8=');    // "Hello"

Conclusion

Base64 est un outil fondamental du développement web — simple en concept mais avec des subtilités importantes. L'essentiel à retenir : c'est un encodage (pas un chiffrement), il augmente la taille de 33%, et il existe plusieurs variantes selon le contexte d'utilisation. Testez vos encodages et décodages avec notre encodeur Base64 en ligne — tout se passe dans votre navigateur, vos données restent privées.

Base64 Encodage JWT Data URI