Topic

Web encoding: Base64, URLs, and JWTs

Learn to distinguish text, bytes, URL components, and tokens so each layer can be encoded, diagnosed, and converted without changing meaning.

Web encoding is not one operation. Base64 represents bytes with a text alphabet, percent encoding protects data inside a URL, a query string organizes an ordered parameter list, and a JWT combines JSON, Base64URL, and a signature whose validity is not established by reading the payload. This path organizes those layers so you can choose the right tool and diagnosis instead of applying transformations blindly.

Start with the context

  • For text, establish its character encoding—usually UTF-8—then choose standard Base64 or Base64URL according to the protocol.
  • When building an address, distinguish a complete URL, path segment, query value, and form field. Each context preserves different delimiters.
  • When inspecting a token, treat its header and payload as untrusted until a library verifies the signature, algorithm, and claims.

Preserve the exact input and state the expected contract. Validate the outer layer before decoding it: alphabet and padding for Base64, escapes and UTF-8 for a URL, or segment count for a JWT. Only then interpret the recovered content.

This order separates truncated input from a Unicode problem, double encoding from a literal percent sign, and a readable JWT date from a genuinely valid token. The linked tools process data locally in the browser; even so, avoid pasting active credentials on a device you do not control.

Tools

Tools for this topic

Guides

Guides in a recommended order

  1. How to fix invalid Base64: incorrect padding and lengthDiagnose Base64 padding, length, alphabet, and trailing-bit errors without hiding truncated or corrupted data.
  2. Base64 and UTF-8: encode accents and emoji correctlyLearn why btoa fails or produces mojibake with Unicode and how to convert UTF-8 text and Base64 without losing characters.
  3. Base64 for text, files, and Data URLs: what changesDistinguish UTF-8 text, file bytes, and Data URLs so you do not copy prefixes, lose media types, or interpret binary as text.
  4. Base64 vs Base64URLLearn when to use + and / or - and _, how padding works, and why compact JWT segments use Base64URL.
  5. Base64 is not encryptionDistinguish encoding, encryption, and hashing, and learn why anyone can recover Base64 text without a key.
  6. How URL percent-encoding worksLearn which characters to encode in a URL component, how UTF-8 becomes percent triplets, and why + does not always mean space.
  7. encodeURI vs encodeURIComponent: which one to useChoose the right function for a complete URL or an individual value without breaking &, =, ?,
  8. How to fix URIError: URI malformed in JavaScriptFind incomplete percent escapes, invalid UTF-8 bytes, and lone Unicode surrogates that cause URI malformed errors.
  9. How to detect and fix a double-encoded URLRecognize patterns such as %2520, find the boundary that encoded twice, and remove one layer without activating hidden delimiters.
  10. Spaces in URLs: %20 vs +Learn when a space becomes %20 or +, how to preserve a literal plus sign, and which encoding belongs to each context.
  11. Repeated query string parameters: how to preserve every valueLearn how repeated parameters work, why plain objects lose values, and when to use getAll, append, or an ordered list.
  12. Decoding a JWT does not verify its signatureLearn what a JWT decoder reveals, which checks are still missing, and why unverified claims must never authorize an action.
  13. JWT exp, iat, and nbf time claims explainedConvert and distinguish the exp, iat, and nbf claims in a JWT without confusing decoding with security validation.

Reviewed on by Tools in a Tab.