Frontend encoding cheat sheet: URL, Base64 and HTML entities

URL encoding

Use percent encoding for individual URL path segments and query values. encodeURIComponent protects reserved separators inside a value, while URL APIs are usually better for assembling a complete URL.

Base64 is transport encoding, not encryption

Base64 represents bytes with printable characters. Anyone can decode it, so it provides no secrecy. Use it for binary-to-text transport only when the surrounding protocol expects it.

HTML entities protect text contexts

Encode ampersands and angle brackets before placing untrusted text into HTML. Context matters: HTML text, attributes, URLs, CSS and JavaScript each need appropriate handling, so prefer framework escaping over manual string assembly.

Choose the output for its destination

Use URL Encoder / Decoder in its default encode direction with the text below. The ampersand becomes part of the value rather than a new query separator. Build the rest of the URL with the URL API, or paste the encoded value only where one component is expected. Encoding a whole address with encodeURIComponent would also encode its structural separators.

Compare the Base64 fixture and the HTML text fixture. They have different destinations and cannot be substituted for one another. Base64 output is still readable to anyone who decodes it, while HTML entities must be interpreted in an HTML text context to display the original characters.

a & b
a%20%26%20b

hello
aGVsbG8=

<b>A&B</b>
&lt;b&gt;A&amp;B&lt;/b&gt;

Decode only the layer you expect

A URL parameter containing %252F decodes once to %2F, not directly to a slash. Repeated decoding can turn data into path separators, so record whether the upstream system already decoded the parameter. URLSearchParams follows form-style query rules, including treating plus as space; XXF's decodeURIComponent-based tool does not use that same plus rule.

Use textContent or a framework's ordinary text rendering when showing untrusted strings. Encoding angle brackets does not make an arbitrary href safe, and it does not sanitize HTML that a page later inserts with innerHTML. Check the destination protocol, context and trust boundary separately.

• Encode one URL component at a time
• Document the number of decoding layers
• Treat Base64 as a representation, not a secret
• Prefer text rendering over manual HTML concatenation