Command Palette

Search for a command to run...

Encodage en base64 expliqué : encodez et décodez comme un pro

Encodage en base64 expliqué : encodez et décodez comme un pro

T
Toolz Team
|Jun 18, 2026|15 min read

La première version du convertisseur Base64 que j'ai livrée sur Toolz.dev avait un bogue sur lequel je suis encore légèrement gêné. Cela a parfaitement fonctionné à chaque test que j'ai écrit - codé, décodé, aller-retour, terminé. Ensuite, quelqu'un a collé du texte contenant un emoji et a obtenu ceci :

Uncaught DOMException: InvalidCharacterError:
Failed to execute 'btoa' on 'Window': The string to be
encoded contains characters outside of the Latin1 range.

J'ai construit un outil d'encodage de texte et j'ai oublié que le texte inclut, vous savez, La plupart du texte. Chaque script non latin, chaque caractère accentué, chaque emoji - cassé. Mes tests étaient tous ASCII parce que je pense en ASCII. Ce bogue m'a appris plus sur Base64 que n'importe quelle lecture de spécifications, et je vous montrerai la solution plus tard, car cela déclenche presque tous ceux qui touchent btoa().

Base64 est l'une de ces choses que les développeurs utilisent quotidiennement - dans chaque JWT, chaque pièce jointe, chaque data: Uri — tout en regardant rarement sous le capot. Regardons sous le capot.

tl;dr : L'encodage en base64 convertit les données binaires en 64 caractères ASCII sécurisés afin qu'ils puissent parcourir des canaux textuels tels que JSON, URL et e-mail, au prix d'environ 33 % de frais généraux. c'est non Cryptage ; n'importe qui peut l'inverser instantanément. Pour encoder ou décoder dès maintenant, utilisez le côté client gratuit Convertisseur de base64 Sur Toolz.dev — Vos données ne quittent jamais le navigateur, ce qui compte lorsque vous décodez des jetons.


Qu'est-ce que l'encodage en base64 ?

Base64 est un schéma d'encodage binaire vers texte : il représente des octets arbitraires en utilisant seulement 64 caractères qui survivent à tous les systèmes de texte jamais construits. La spécification faisant autorité est RFC 4648 (2006), bien que l'encodage retourne à la RFC 1421 et à la confidentialité améliorée par la confidentialité en 1993, la base64 est plus ancienne que le navigateur Web.

L'alphabet :

  • A–Z → Valeurs 0–25
  • a–z → Valeurs 26–51
  • 0–9 → Valeurs 52–61
  • + → 62, / → 63
  • = → Rembourrage (pas une valeur, juste un remplissage)

Pourquoi ces 64 ? Parce qu'ils survivent sans être mutilés dans ASCII, EBCDIC et toutes les passerelles de messagerie jamais construites. Base64 est un traité de paix avec des décennies d'infrastructures réservées aux textes.

Le coût du traité : chaque octet de 3 entrées devient 4 caractères de sortie, une taxe de taille fixe de 33 %. Gardez ce chiffre dans votre tête, il décide de vraies questions d'architecture.


Comment fonctionne l'algorithme Base64 ?

Réponse plus courte que ce à quoi vous vous attendez : regroupez les bits de 8 s en 6 s, puis recherchez-les dans une table. 2⁶ = 64 — C'est de là que vient le nom.

codage Hi!:

Étape 1 — Octets en bits.

personnage ascii binaire
h 72 01001000
je 105 01101001
! 33 00100001

concaténé : 010010000110100100100001 — 24 bits.

Étape 2 : regroupez-vous en morceaux 6 bits.

010010 | 000110 | 100100 | 100001
  18   |   6    |   36   |   33

Étape 3 — Recherchez chaque valeur de l'alphabet.

18 → S, 6 → G, 36 → k, 33 → h. aussi Hi! encode pour SGkh.

C'est tout l'algorithme. Pas de calculs au-delà d'une table de recherche.

bourre Gère les entrées qui sont des multiples de 3 octets. Encoder juste Hi (2 octets = 16 bits) et vous ne pouvez remplir que des groupes de 6 bits et un bit de deux et un bit ; le codeur n'est pas le même que les bits et les ajouts. = Pour signaler combien de remplissage est le :

Hi  → SGk=    (2 bytes remaining → one '=')
H   → SA==    (1 byte remaining  → two '==')
Hi! → SGkh    (multiple of 3     → no padding)

Lorsque j'ai implémenté cela pour le convertisseur Toolz.Dev, le remplissage était l'endroit où vivaient tous mes bogues hors-par-un. Si vous avez déjà roulé en mode manuel Base64 – pour une entrevue de codage, par exemple – écrivez d'abord les tests de remplissage.

Le décodage est l'image miroir : les caractères reviennent à des valeurs de 6 bits, regroupent en octets 8 bits, supprimant le remplissage.

Base64 encoding process diagram showing binary conversion, 6-bit grouping, and character mapping


Où rencontrez-vous réellement en base64 ?

JWTS - Le grand

Chaque jeton Web JSON est composé de trois segments encodés en base64URL rejoints par des points : en-tête, charge utile, signature. Le débogage d'authentification est à 50 %.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U

Décodez le premier segment et vous obtenez {"alg":"HS256","typ":"JWT"}. La seconde vous donne les réclamations. Mon flux de travail lorsqu'un jeton se comporte mal : diviser aux points, décoder chaque partie dans le Convertisseur de base64, puis collez le JSON dans le Formateur JSON pour bien le lire. deux pâtes, et vous savez si le exp La réclamation est votre problème.

Cela vaut la peine de dire clairement : les charges utiles JWT sont Lisible par toute personne détenant le jeton. La signature cesse de falsifier, pas de lire. J'ai examiné les bases de code qui ont incorporé des données sensibles dans les réclamations, car le charabia a l'air implicite. Ce n'est pas le cas.

JWT being decoded with Base64 converter showing header, payload, and signature parts

URI de données

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

L'intégration de petits actifs en ligne enregistre une requête HTTP. Ma règle d'or de la création d'une interface utilisateur WordPress riche en images : ça vaut le coup sous ~ 5 Ko, au-delà de 10 Ko, vous gonflez le document de 33 % pour enregistrer une requête de multiplexe HTTP/2.

Les secrets de Kubernetes — et une diatribe

apiVersion: v1
kind: Secret
data:
  password: cGFzc3dvcmQ=   # decodes to "password"

Les secrets de Kubernetes sont encodés en base64 et la fausse sécurité implique est alarmante. Cette valeur décode en une seule pâte. Base64 existe ici, donc les valeurs binaires survivent à YAML — un mise en forme décision, pas une sécurité. Si votre histoire de secrets se termine à "ils sont basés64 dans etc.", cela n'a pas commencé.

Le reste de la liste

En-têtes d'authentification HTTP de base (Authorization: Basic dXNlcjpwYXNz Décode en plaine user:pass — donc https-uniquement). Pièces jointes par e-mail via MIME. Blobs binaires dans les charges utiles JSON, car JSON n'a pas de type binaire.


Le cryptage Base64 est-il ? (Non. S'il vous plaît, non.)

Vaut sa propre section parce que l'idée fausse refuse de mourir.

Base64 est un interprétation, comme écrire un nombre en hexadécimal. Pas de clé. Pas de secret. Le décodage ne nécessite rien d'autre que la table de l'alphabet imprimée publiquement dans la RFC 4648. Tout ce qui est protégé par la base64-" est protégé de la manière dont une lettre est protégée par la rédaction en cursive.

Si les données ont besoin de confidentialité : chiffrer correctement (AES-GCM ou Libsodium), à ce moment- Base64-Encodez le texte chiffré si le canal a besoin de texte. Encodage et cryptage composent une amende - ce ne sont tout simplement pas des substituts. Et si vous avez besoin d'intégrité plutôt que de secret, c'est un travail de hasch - le générateur de hasch Couvre SHA-256 et ses amis.


Comment Base64 se compare-t-il à Hex, encodage d'URL et Base85 ?

Base64 Hex (base16) Encodage URL/pourcentage ASCII85
Taille aérienne +33 % +100 % 0 à 200 %, dépendant du contenu +25 %
alphabet 64 caractères 16 caractères ASCII + %XX évasions 85 caractères
Sortie lisible par l'homme non Sorte de — Bordures d'octets visibles Surtout, pour l'entrée ASCII non
URL-safe par défaut Non (+, /, =) oui Oui, par définition non
vous le rencontrerez dans JWT, MIME, URI de données Hasards, adresses MAC, codes de couleur Chaînes de requête internes PDF

Comment je choisis : jeter un sort sur Lorsque les humains lisent ou comparent la sortie - sommes de contrôle, résumés, tout ce qui est débogué par globe oculaire. Pourcentage-encodage Pour le texte d'URL, jamais binaire. Base64 Pour la croisement binaire d'un canal de texte, la plupart des cas réels. ASCII85 Jamais volontairement, les économies de 8 % n'ont pas encore justifié les questions de compatibilité.


Qu'est-ce que la base64 de sécurité URL et pourquoi existe-t-il ?

La base standard64 a un problème : + signifie "espace" dans les chaînes de requête, / est le séparateur de chemin, = Délimite les paramètres. Mettez un jeton standard-Base64 dans une URL et un middleware, quelque part, le mutile – par intermittence et uniquement en production. Demandez-moi comment je sais.

La section 5 de la RFC 4648 définit le correctif, généralement appelé Base64URL :

étalonnage Url-safe
+ -
/ _
= bourre généralement juste omis

Même algorithme, deux caractères échangés, le remplissage a été supprimé. Les JWT utilisent exclusivement Base64URL, ce qui explique exactement pourquoi coller un segment JWT dans un décodeur Standard-Base64 strict échoue parfois sur un errant - ou _. le Convertisseur Toolz.dev Gère les deux variantes, car un décodeur qui rejette la moitié de la base64 du monde réel n'est pas vraiment un décodeur.

Règle d'or : si la chaîne codée touchera un jour une URL, un nom de fichier ou un en-tête HTTP, utilisez la variante URL-Safe dès le début. La mise à niveau est une découverte et une remplacement plus une prière.


Comment encoder et décoder en code ?

Javascript — Le piège dans lequel je suis tombé

Voici la version naïve, celle que j'ai expédiée :

btoa('Hello')      // "SGVsbG8=" — great!
btoa('café ☕')    // InvalidCharacterError — the bug from my intro

btoa Il est antérieur à la gestion des Unicodes modernes et n'accepte que le latin-1. L'approche moderne correcte passe explicitement par les octets UTF-8 :

// Encode: string → UTF-8 bytes → Base64
const bytes = new TextEncoder().encode('café ☕');
const encoded = btoa(String.fromCharCode(...bytes));   // "Y2Fmw6kg4piV"

// Decode: Base64 → bytes → string
const decoded = new TextDecoder().decode(
  Uint8Array.from(atob(encoded), c => c.charCodeAt(0))
); // "café ☕"

(Dans Node.js, sautez la cérémonie : Buffer.from(str, 'utf8').toString('base64').)

python

import base64

encoded = base64.b64encode('café ☕'.encode('utf-8')).decode('ascii')
decoded = base64.b64decode(encoded).decode('utf-8')

# URL-safe variant — note -_ instead of +/
token = base64.urlsafe_b64encode(b'binary\xfb\xff').decode('ascii')

Python rend la bonne chose évidente : vous moût Passez des octets, de sorte que l'étape Encode-to-UTF-8 ne peut pas être oubliée. je souhaite btoa avait été conçu avec la même colonne vertébrale.

PHP

$encoded = base64_encode('café ☕');   // handles bytes as-is — PHP strings ARE bytes
$decoded = base64_decode($encoded);

// URL-safe requires manual translation — a WordPress-plugin-developer classic:
$urlSafe = rtrim(strtr($encoded, '+/', '-_'), '=');

celui strtr/rtrim La ligne est apparue dans chaque base de code PHP sur laquelle j'ai déjà travaillé, y compris WP Adminify. PHP n'a jamais obtenu de variante intégrée de sécurité URL, nous continuons donc tous à écrire les deux mêmes lignes.


Questions fréquentes

A quoi sert l'encodage Base64 ?

Il convertit les données binaires en texte ASCII afin de pouvoir passer par des systèmes qui ne gèrent que du texte : charges utiles JSON, URL, e-mail (MIME), en-têtes HTTP. Vous le rencontrez le plus souvent dans les jetons JWT, data: URI pour les images en ligne, les secrets Kubernetes et les charges utiles API transportant des fichiers. C'est un format de transport, pas un format de stockage ou de sécurité.

Base64 est-il la même chose que le cryptage ?

Non, et confondre les deux causes de véritables incidents de sécurité. Base64 n'a pas de clé - le décodage ne nécessite que la table d'alphabet public et prend une colle dans n'importe quel décodeur. Chiffrez d'abord avec un algorithme réel (AES-GCM), puis encodez le texte chiffré si le canal a besoin de texte.

Pourquoi Base64 agrandie 33 % des données ?

Chaque caractère Base64 contient 6 bits d'informations mais occupe un octet complet de 8 bits, de sorte que 3 octets d'entrée deviennent toujours 4 caractères de sortie — 4/3 ≈ 1,33. C'est un coût fixe du format, inévitable par conception. Si la taille est importante, compressez avant d'encoder, jamais après - la sortie codée semble aléatoire et se comprime terriblement.

Quelle est la différence entre Base64 et Base64url ?

Base64url Swaps + pour - et / pour _, et laisse généralement tomber le = Padding, de sorte que la sortie survit aux URL, noms de fichiers et en-têtes sans s'échapper. Sinon, le même algorithme est défini dans la section 5 de la RFC 4648. Les JWT utilisent uniquement Base64URL, c'est pourquoi les décodeurs standard-Base64 stricts s'étouffent parfois.

Pourquoi btoa() lance-t-il invalidCharacterError ?

Votre chaîne contient des caractères en dehors du latin-1 - un emoji, un caractère accentué, un script non occidental. btoa est une API des années 1990 qui est antérieure à la gestion sensée Unicode. Encodez d'abord en UTF-8 octets avec TextEncoder, puis Base64 les octets, j'ai expédié ce bogue exact dans un outil de production, donc pas de jugement.

Comment savoir si une chaîne est en base64 ?

Utilise uniquement la base64 valide A–Z, a–z, 0–9, +, / (ou -, _ Pour une sécurité URL), en option =, avec une longueur qui est un multiple de 4 lorsqu'elle est rembourrée. Mais beaucoup de mots ordinaires correspondent également à ce modèle - cafe est valide Base64 qui décode en octets de garbage. Le test réel est de le décoder et de vérifier si la sortie est significative.

Pourquoi ma chaîne Base64 a-t-elle une nouvelle ligne parasite à la fin ?

parce que echo en ajoute un avant base64 jamais le voir, alors echo "hunter2" | base64 Encode huit octets, pas sept. printf ou echo -n à la place. C'est la première cause des secrets de Kubernetes qui se présentent bien dans le manifeste et échouent au moment de l'exécution : le mot de passe décodé comporte une fin de course invisible. \n. le base64 La commande enveloppe également la sortie à 76 colonnes sur certains systèmes — Pass -w 0 sur GNU Coreutils pour le supprimer.

Comment décoder un jeton JWT à la main ?

Divisez le jeton à ses deux points, prenez le premier segment (en-tête) et le second (charge utile) et passez chacun à Décodeur de base64 — Ils sont basés sur Base64url, alors utilisez un outil qui accepte - et _. Ensuite, formatez le JSON résultant dans un Formateur JSON pour lire les revendications. Ne collez jamais de jetons de production dans des outils côté serveur, uniquement côté client.

Comment coder une image ou un fichier en base64 ?

Lisez le fichier sous forme d'octets, puis base64 ces octets et préparez un en-tête Data-URI comme data:image/png;base64, Ainsi, un navigateur peut le rendre en ligne. En Javascript, FileReader.readAsDataURL() Effectue les deux étapes pour vous ; sur la ligne de commande, base64 logo.png Imprime l'encodage brut. Gardez-le sur de petits actifs - la taxe sur la taille de 33 % fait de Base64 un mauvais ajustement pour tout ce qui est grand, et les URI de données gonflées gonflent votre HTML ou CSS.

Comment décoder Base64 en Javascript, Python ou le terminal ?

Dans JavaScript moderne, décodez Unicode en toute sécurité avec new TextDecoder().decode(Uint8Array.from(atob(str), c => c.charCodeAt(0))) plutôt que nu atob. En Python, base64.b64decode(str) Renvoie les octets — appel .decode('utf-8') pour le texte. Dans un terminal, echo "aGk=" | base64 -d (ou --decode). Tous les trois attendent la base64 standard, alors traduisez -/_ repartir à +// Tout d'abord, si vous gérez une chaîne Base64url.


Le plat à emporter

Base64 est un truc de bit-shuffling vieux de 30 ans qui supporte tranquillement la moitié du Web moderne - jetons d'authentification, pièces jointes, ressources en ligne, secrets qui sont secrets. Comprenez le regroupement 6 bits, respectez la taxe de 33 %, ne la confondez jamais avec le cryptage et optez pour la variante de sécurité URL partout où une URL est impliquée. C'est 95% de la maîtrise pratique de Base64.

Pour la partie pratique, le Convertisseur Base64 sur Toolz.dev Est-ce que l'encodage standard et sécurisé par les URL est entièrement dans votre navigateur, construit par quelqu'un qui a appris la leçon Unicode à la dure, vous n'avez donc pas à le faire.

Plus dans cette série : le Guide des outils de codage couvre le reste des utilitaires de drivers de tous les jours, Guide de construction de Regex s'attaque aux autres développeurs de compétences prétendant avoir, et depuis la moitié de la base64 de débogage se termine dans JSON, le Guide d'outils ultimes de JSON est la prochaine lecture naturelle.


Articles connexes :

Frequently Asked Questions

It converts binary data into ASCII text so it can pass through systems that only handle text: JSON payloads, URLs, email (MIME), HTTP headers. You meet it most often in JWT tokens, data: URIs for inline images, Kubernetes Secrets, and API payloads carrying files. It's a transport format, not a storage or security format.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!