Lesson 4
Base64 in URLs and Data URIs
Standard vs URL-safe variants and `data:` scheme usage.
URLs, query strings, and cookie-adjacent channels treat + and / awkwardly—and = padding interacts badly with sloppy concatenation logic. Specialized Base64URL dialects reorder the alphabet to reduce escaping needs.
This lesson separates MIME Base64, RFC 4648 URL-safe, and pragmatic data: usage patterns.
Standard vs URL-safe alphabets
Classic Base64 uses 62 → '+' and 63 → '/'.
URL-safe implementations (informally “base64url”) typically:
- remap
+' → '-' - remap
/' → '_' - often omit padding when allowed by the spec you follow (JWT’s JWS uses unpadded base64url for segments)
Never mix encoders and decoders across dialects without conversion. A token generated with +// will break when pasted into a path segment unless you percent-encode or switch alphabets consistently.
Percent-encoding still happens
Even URL-safe Base64 can include characters that need encoding in strict URL parser contexts—hyphen & underscore fare better than plus & slash but do not abolish layering rules altogether. Always assemble URLs with typed builder APIs (URLSearchParams, framework helpers) rather than brittle string templating around raw payloads.
JWT quick cross-check
Decoded manually for learning is fine—just remember JWT header/payload are JSON UTF-8 bytes → base64url without padding. If you see +, you might be staring at PEM or MIME output instead.
data: URIs
Embed tiny assets inline:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Pieces:
| Part | Meaning |
|---|---|
| MIME type hint | Helps the browser interpret bytes |
;base64, sentinel | Says what follows is Base64-encoded bytes |
| payload | Concatenated (often long) ASCII chunk |
Pros: fewer HTTP requests for microscopic icons during prototyping.
Cons:
- Cached separately from stylesheet bundling efficiencies
- Bloats HTML/CSS source sharply (≈33% inflation before gzip context effects)
- Content Security Policy and email clients may disallow
Production usually prefers hashed static files/CDN—not because Base64 fails, because engineering trade-offs favor caching & separation.
Very large payloads
Huge data: URIs degrade editor performance and blow DOM memory. Streams, blobs, object URLs (URL.createObjectURL) fit large binary better on the web platform.
Key takeaway
URL contexts pressure two dimensions: character set friendliness and padding ergonomics. Choose the variant your spec mandates (JWT vs PEM vs MIME) and funnel conversions through proven libraries—not ad hoc string replacements that forget edge bytes.