Base64 use cases

A JWT is three Base64URL-encoded JSON objects separated by dots: a header, a payload (claims), and a signature. The header and payload are human-readable once decoded — no key needed. This makes Base64 decoding a routine debugging task for auth flows.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9   ← header
.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNTE2MjM5MDIyfQ   ← payload
.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c   ← signature

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNTE2MjM5MDIyfQ

{"sub":"1234567890","name":"Alice","iat":1516239022}

The data URI scheme embeds binary assets directly in HTML, CSS, or SVG, eliminating an HTTP request. Small images, SVG icons, and critical fonts are the most common targets. The browser decodes the Base64 synchronously during parsing, so the asset is immediately available with no additional HTTP request.

data:<mediatype>;base64,<base64-encoded-data>

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");

<link rel="icon" href="data:image/png;base64,iVBORw0KGgo..." />

SMTP was designed to carry 7-bit ASCII text. Sending any binary file — a PDF, an image, a spreadsheet — requires encoding it as Base64 inside a MIME multipart message. Every email client and server in use today handles this encoding and decoding transparently.

Content-Type: application/pdf; name="report.pdf"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="report.pdf"

JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwKL0xlbmd0aCAzIDAgUgo+...

JSON has no native binary type. When a REST or GraphQL API needs to transmit binary content — a generated image, a signed token, an encrypted blob, or a file chunk — it Base64-encodes the bytes and stores them as a JSON string. This is also how the Web Crypto API returns raw key material.

{
  "id": "img_42",
  "format": "image/webp",
  "data": "UklGRlYAAABXRUJQVlA4IEoAAADQAQCdASo..."
}

const key = await crypto.subtle.generateKey(
  { name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]
);
const raw = await crypto.subtle.exportKey("raw", key);
const b64 = btoa(String.fromCharCode(...new Uint8Array(raw)));

PEM (Privacy-Enhanced Mail) format stores cryptographic objects — TLS certificates, RSA keys, ECDSA keys, SSH public keys, GPG keys — as Base64-encoded DER data wrapped in ASCII header and footer lines. Any time you copy an SSH key or paste a certificate into a config file, you are handling Base64.

-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2a2rwplBQLzHPZe5TNJT
...
-----END PUBLIC KEY-----

MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2a2rwplBQLzHPZe5TNJT

HTTP Basic Auth encodes the username and password as Base64 and sends them in the Authorization header on every request. This is not encryption — the credentials can be decoded instantly. Always use Basic Auth over HTTPS, never plain HTTP.

username:password  →  dXNlcm5hbWU6cGFzc3dvcmQ=

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Build tools like Vite and webpack automatically inline small assets (typically under 4–8 KB) as Base64 data URIs to eliminate HTTP round-trips. Custom icon fonts, small SVG sprites, and critical background images are common targets. For offline-first PWAs this technique ensures assets are available even without a network connection.

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

// vite.config.ts
export default {
  build: {
    assetsInlineLimit: 4096,  // bytes; files smaller than this are inlined
  },
};

WebSocket supports both text and binary frames. Some libraries or intermediaries (logging proxies, older firewalls) only pass text frames reliably. In these environments, binary protocol messages are Base64-encoded before sending and decoded on receipt — a common pattern in browser-based SSH terminals, RDP clients, and IoT dashboards.

// Sender
const bytes = new Uint8Array([0x01, 0x02, 0x03]);
const b64 = btoa(String.fromCharCode(...bytes));
socket.send(JSON.stringify({ type: "bin", data: b64 }));

// Receiver
const msg = JSON.parse(event.data);
const decoded = Uint8Array.from(atob(msg.data), c => c.charCodeAt(0));