FlowingDev

Base64, expliqué : le traducteur universel pour les données binaires

Découvrez comment l'encodage Base64 transforme les données binaires comme les images et les fichiers en texte brut, permettant leur transmission sécurisée sur des systèmes conçus uniquement pour le texte.

Essayer l'outil: Outils Base64

En une phrase

Le Base64 est une astuce ingénieuse pour déguiser n'importe quelle donnée binaire (comme une image ou un fichier zip) en simple texte bien ennuyeux, afin qu'elle puisse transiter en toute sécurité par des systèmes qui ne comprennent que le texte.

Le problème que ça résout

Imaginez les débuts d'Internet. La plupart des systèmes fondamentaux, comme l'e-mail (SMTP) et les protocoles qui ont bâti le web, ont été conçus avec une hypothèse simple : ils ne traiteraient jamais que du texte. Plus précisément, ils ont été construits autour du jeu de caractères ASCII 7 bits — les 128 lettres, chiffres et symboles que vous trouvez sur un clavier anglais standard.

C'était très bien pour envoyer des messages, mais que se passe-t-il si vous voulez envoyer quelque chose qui n'est pas du simple texte ? Une image, un fichier audio, un programme ? Ces données sont binaires. C'est un flux d'octets où n'importe laquelle des 256 valeurs possibles pour un octet peut apparaître. Le problème, c'est que certaines de ces valeurs d'octets sont aussi utilisées comme des caractères de contrôle spéciaux dans les systèmes textuels. Par exemple, un octet pourrait signifier « fin de la transmission » ou « début d'une nouvelle ligne ».

Si vous essayiez d'envoyer un fichier image brut via un vieux serveur de messagerie, le serveur pourrait voir un octet aléatoire au milieu de vos données d'image, l'interpréter comme « OK, fin du message ! » et couper le reste de votre fichier. Votre magnifique photo de chat arrive sous la forme d'un fouillis de parasites numériques, si tant est qu'elle arrive.

C'est le problème pour lequel le Base64 a été conçu. Il a été introduit dans le cadre de la norme MIME (Multipurpose Internet Mail Extensions) pour créer un alphabet de caractères « sûr » auquel tout système de traitement de texte pouvait faire confiance. En encodant les données binaires dans cet ensemble limité de caractères, vous pouviez effectivement placer vos données fragiles dans un conteneur de transport standardisé et robuste que le système postal (le protocole textuel) ne risquerait pas d'abîmer.

Comment ça marche sous le capot

Le Base64 n'a rien de magique, et ce n'est certainement pas du chiffrement. C'est juste un chiffrement par substitution, systématique et réversible. Il sacrifie l'efficacité du stockage au profit de la sécurité du transport, augmentant la taille des données d'environ 33% au passage.

Voyons comment encoder le simple mot « Man ».

Des octets aux bits

D'abord, on prend notre chaîne de caractères en entrée et on récupère sa représentation binaire. En ASCII/UTF-8, « Man » correspond à trois octets :

Caractère Code ASCII Binaire sur 8 bits
M 77 01001101
a 97 01100001
n 110 01101110

On les colle ensuite bout à bout pour former un flux continu de 24 bits (3 octets x 8 bits/octet) : 010011010110000101101110

Le remaniement en 6 bits

Voici le cœur de l'astuce. Au lieu de lire ce flux par paquets de 8 bits (des octets), le Base64 le lit par paquets de 6 bits. Pourquoi 6 ? Parce que 2^6 égale 64, ce qui nous donne exactement 64 valeurs différentes possibles pour chaque paquet.

On regroupe donc notre flux de 24 bits : 010011 010110 000101 101110

On a maintenant quatre paquets de 6 bits. On peut convertir chacun d'eux en un nombre décimal :

Paquet de 6 bits Valeur décimale
010011 19
010110 22
000101 5
101110 46

La table de correspondance

L'étape finale consiste à faire correspondre ces valeurs décimales à l'alphabet « sûr » de 64 caractères du Base64. Cet alphabet se compose de A-Z (indices 0-25), a-z (indices 26-51), 0-9 (indices 52-61), et de deux caractères spéciaux, + et / (indices 62 et 63).

Indice Car. Indice Car. Indice Car. Indice Car.
0 A 16 Q 32 g 48 w
1 B 17 R 33 h 49 x
... ... ... ... ... ... ... ...
19 T 22 W 5 F 46 u
... ... ... ... ... ... ... ...

En cherchant nos valeurs décimales dans la table :

  • 19 correspond à T
  • 22 correspond à W
  • 5 correspond à F
  • 46 correspond à u

Donc, l'encodage Base64 de « Man » est TWFu.

Gérer les restes (le padding)

Ça a parfaitement fonctionné parce que notre entrée (« Man ») faisait 3 octets de long, ce qui est un joli multiple de 24 bits. 24 est divisible à la fois par 8 et par 6, donc tout s'aligne. Mais que se passe-t-il si l'entrée n'est pas un multiple de 3 octets ?

C'est là que le caractère de padding = entre en jeu. Le Base64 exige que la chaîne encodée finale représente un nombre entier de groupes de 3 octets d'entrée. Si les données originales ne se terminent pas sur une frontière de 3 octets, du padding est ajouté à la sortie pour lui donner la bonne longueur.

  • Si votre entrée a un seul octet : par ex., « M » (01001101). On prend les 8 bits, on récupère les 6 premiers (010011, ce qui donne T), et il nous reste 2 bits (01). Le Base64 impose de compléter ces 2 bits avec quatre 0 pour former un paquet complet de 6 bits (010000, ce qui donne Q). Comme on a dû ajouter des bits de padding, on doit aussi ajouter des caractères de padding à la chaîne finale. La règle est d'ajouter des = jusqu'à ce que la longueur de la chaîne de sortie soit un multiple de 4. Ainsi, « M » devient TQ==.
  • Si votre entrée a deux octets : par ex., « Ma » (0100110101100001). On a 16 bits. On peut faire deux paquets complets de 6 bits (010011 -> T, 010110 -> W). Il nous reste 4 bits (0001). On les complète avec deux 0 pour faire 000100, ce qui donne E. On ajoute un = à la sortie pour que sa longueur soit un multiple de 4. Ainsi, « Ma » devient TWE=.

Le padding = ne représente aucune donnée réelle, mais il est crucial pour que les décodeurs puissent reconstruire correctement le binaire d'origine.

Exemples concrets

La page web auto-contenue

Un designer UX veut créer un prototype simple, sous la forme d'un fichier unique, pour le partager avec un client. La page a besoin du logo de l'entreprise et d'une police de caractères spécifique pour avoir le bon rendu. Normalement, cela impliquerait de créer un fichier HTML, un fichier image (logo.png), et un fichier de police (brand-font.woff2), puis de zipper le tout.

À la place, le designer utilise un outil en ligne pour encoder en Base64 le logo et la police. Il intègre les chaînes de texte obtenues directement dans la feuille de style en utilisant des data: URIs :

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

@font-face {
  font-family: 'BrandFont';
  src: url("data:font/woff2;base64,d09GMgABAAAAAAbwAA...") format('woff2');
}

Maintenant, il peut envoyer un unique fichier .html au client. Quand le client l'ouvre dans son navigateur, la page s'affiche parfaitement avec le logo et la police personnalisée, sans nécessiter de fichiers supplémentaires ni de serveur web.

La leçon : Le Base64 est parfait pour embarquer de petits assets binaires (images, polices, icônes) directement dans des fichiers texte comme du HTML, CSS ou SVG, créant ainsi des documents portables et auto-suffisants et réduisant le nombre de requêtes HTTP.

L'API qui ne parle que JSON

Un service backend génère des factures PDF pour les clients. L'application web frontend doit récupérer cette facture et permettre à l'utilisateur de la télécharger. Le problème, c'est que l'API qui connecte le backend et le frontend est une API REST moderne qui communique exclusivement en JSON. Le JSON est excellent pour les chaînes de caractères, les nombres et les booléens, mais il n'a aucun moyen natif de représenter un fichier PDF brut.

Le développeur backend résout ce problème en prenant les données binaires du PDF, en les encodant en Base64, et en plaçant l'énorme chaîne de caractères qui en résulte à l'intérieur d'un objet JSON :

{
  "invoiceId": "INV-2024-00123",
  "customer": "ACME Corp",
  "fileData": "JVBERi0xLjcKJeLjz9MKMSAwIG9iago8PC9UeXBlL0NhdGFsb2cvUGFn..."
}

Lorsque le frontend reçoit ce JSON, il lit la chaîne fileData, la décode du Base64 pour retrouver les données binaires originales du PDF, et utilise une API du navigateur pour déclencher le téléchargement du fichier pour l'utilisateur.

La leçon : Le Base64 est la lingua franca pour faire transiter des données binaires à travers des formats purement textuels comme le JSON et le XML. C'est la manière standard de gérer les uploads/téléchargements de fichiers via des APIs.

Le secret éphémère dans l'URL

Vous en avez vu des millions : les liens de réinitialisation de mot de passe. Un lien typique pourrait ressembler à https://example.com/reset?token=.... Ce token doit souvent transporter plusieurs informations : l'ID de l'utilisateur, un timestamp d'expiration, et une signature cryptographique pour empêcher toute modification.

Combiner ces éléments peut produire une chaîne de données binaires. On ne peut pas simplement balancer des données binaires brutes dans une URL ; elles seraient corrompues ou rejetées. La solution est d'encoder le token binaire en Base64. C'est exactement ce que font des standards comme les JWT (JSON Web Tokens). Un JWT est composé de trois parties encodées en Base64 et séparées par des points.

Mais il y a un piège ! L'alphabet Base64 standard inclut + et /. Ces caractères ont une signification spéciale dans les URLs et peuvent casser le routage. Cela a mené à la création d'une variante « URL-safe » (sûre pour les URLs) du Base64, qui remplace + par - et / par _.

La leçon : Le Base64 rend les données binaires sûres pour les URLs, mais il faut utiliser la variante URL-safe pour éviter les conflits avec les caractères réservés.

Erreurs et pièges courants

  • « C'est du chiffrement ! » Eh non. C'est l'idée fausse numéro un. Le Base64 est un encodage, pas un chiffrement. Il n'offre aucune confidentialité. C'est comme écrire un message en verlan : n'importe qui connaissant la règle peut l'inverser instantanément. N'utilisez jamais le Base64 pour cacher des secrets ; utilisez du vrai chiffrement pour ça.
  • Alourdir vos données. L'encodage Base64 augmente la taille des données d'environ 33% (car chaque 3 octets en entrée deviennent 4 octets en sortie). Pour de petites icônes ou des tokens, c'est négligeable. Pour un fichier vidéo de 10 Mo, vous ajoutez plus de 3 Mo de surcharge. Cela peut ralentir les réponses d'API et augmenter les coûts de bande passante.
  • Oublier les caractères non compatibles avec les URLs. Si vous mettez des données encodées en Base64 dans un paramètre de requête ou un segment de chemin d'URL, vous devez utiliser la variante URL-safe (qui remplace + et /) ou encoder la sortie pour les URLs. Un + qui traîne peut être mal interprété comme un espace, et un / peut être vu comme un séparateur de chemin, ce qui mène à des liens cassés et des erreurs 404.
  • Mal gérer le padding. Même si de nombreux décodeurs modernes sont indulgents avec un padding = manquant, la spécification l'exige pour garantir le bon fonctionnement. Supprimer ou mal calculer le padding peut faire échouer les décodeurs stricts. Le mieux est de traiter le padding comme faisant partie intégrante de la chaîne encodée.

Pourquoi vous devriez le garder à l'œil

Pensez au Base64 chaque fois que vous faites face à ce dilemme : « J'ai des données binaires, mais je dois les envoyer via un canal qui ne parle que le texte. » C'est un outil fondamental pour le transport et la compatibilité des données.

Utilisez-le quand vous avez besoin de :

  • Embarquer de petites images, des SVG ou des polices directement en HTML/CSS.
  • Envoyer un fichier (PDF, image, etc.) dans une charge utile (payload) JSON ou XML.
  • Encoder des données binaires pour les utiliser dans une URL ou un cookie.
  • Travailler avec des standards comme les JWT, qui utilisent le Base64 comme brique de base.

Ce n'est pas quelque chose qu'on utilise tous les jours, mais savoir ce que c'est et quand l'utiliser vous évitera d'innombrables heures de débogage de données corrompues et d'erreurs de transmission mystérieuses.

Pour aller plus loin

Théorie bouclée. Place à la pratique — 100 % dans ton navigateur.

Essayer l'outil: Outils Base64