URL encoding e Base64 encoding: qual è la differenza?

Cos'è l'URL encoding?

L'URL encoding, chiamato anche percent-encoding, è definito dalla RFC 3986 come il meccanismo per rappresentare in un URI i caratteri non ammessi o dotati di un significato speciale. Ogni carattere da codificare viene convertito in uno o più byte (usando UTF-8) e ciascun byte viene rappresentato con un segno di percentuale (%) seguito da due cifre esadecimali maiuscole.

Ad esempio, uno spazio diventa %20, una e commerciale diventa %26 e un carattere non ASCII come il simbolo dell'Euro diventa %E2%82%AC (tre byte UTF-8, ognuno percent-encoded).

// Esempi di URL encoding in JavaScript
encodeURIComponent('hello world');   // "hello%20world"
encodeURIComponent('price=10&qty=2'); // "price%3D10%26qty%3D2"
encodeURIComponent('cafe');         // "caf%C3%A9"

L'URL encoding è pensato specificamente per rendere gli URL sicuri e validi. Codifica soltanto i caratteri non consentiti o dotati di significato riservato negli URI, lasciando invariati i caratteri alfanumerici e alcuni simboli sicuri.

Cos'è il Base64 encoding?

Il Base64 encoding, definito dalla RFC 4648, è uno schema di codifica da binario a testo che rappresenta i dati binari usando un insieme di 64 caratteri ASCII: A-Z, a-z, 0-9, + e /, con = usato come riempimento (padding). Ogni tre byte in ingresso producono quattro caratteri in uscita.

Il Base64 è stato progettato per trasmettere dati binari attraverso canali che supportano in modo affidabile solo il testo, come le email (MIME) o l'incorporamento di dati in XML/JSON. Non è specifico degli URL e codifica tutti i byte in ingresso, non solo i caratteri speciali.

// Esempi di Base64 encoding in JavaScript
btoa('hello world');         // "aGVsbG8gd29ybGQ="
btoa('price=10&qty=2');      // "cHJpY2U9MTAmcXR5PTI="

// Per le stringhe Unicode, converti prima in UTF-8
function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
toBase64('cafe');           // "Y2Fmw6k="

Esiste anche una variante URL-safe del Base64 (Base64url) che sostituisce + con - e / con _, e spesso omette il padding =. Questa variante viene usata nei JWT, nei data URI all'interno degli URL e in altri contesti in cui i caratteri standard del Base64 andrebbero in conflitto con la sintassi degli URL.

Differenze principali

Caratteristica	URL encoding	Base64 encoding
Standard	RFC 3986	RFC 4648
Scopo	Rendere gli URL sicuri	Rappresentare dati binari come testo
Codifica	Solo i caratteri speciali/riservati	Tutti i byte in ingresso
Formato di output	Sequenze esadecimali %XX	A-Z, a-z, 0-9, +, /, =
Aumento di dimensione	Variabile (crescono solo i caratteri codificati)	Sempre ~33% più grande
Reversibile	Sì	Sì
Leggibile dall'uomo	In parte (i caratteri unreserved restano invariati)	No
URL-safe per impostazione predefinita	Sì (per progettazione)	No (contiene +, /, =)

Quando usare l'uno o l'altro

Usa l'URL encoding quando devi includere caratteri speciali in un URL, come valori dei parametri di query, segmenti del percorso o identificatori di frammento. L'URL encoding è la scelta corretta in ogni situazione in cui i dati devono essere incorporati all'interno della struttura di un URL.

Usa il Base64 encoding quando devi rappresentare come testo dati binari (immagini, file, payload cifrati), incorporare contenuti binari in JSON o XML, oppure trasmettere dati attraverso canali di solo testo. Il Base64 viene usato anche negli header dell'HTTP Basic Authentication e nei JSON Web Token (JWT).

// URL encoding: incorporare un termine di ricerca in un URL
const searchUrl = 'https://example.com/search?q=' +
  encodeURIComponent('C++ & Java');
// "https://example.com/search?q=C%2B%2B%20%26%20Java"

// Base64: incorporare un'immagine in CSS o HTML
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

// Base64: header HTTP Basic Auth
const credentials = btoa('username:password');
const header = 'Authorization: Basic ' + credentials;

Si possono combinare?

Sì, e in alcuni casi è necessario. Se devi passare dati codificati in Base64 come parametro di un URL, l'output Base64 standard può contenere i caratteri +, / e =, che hanno significati speciali negli URL. Hai due opzioni:

Opzione 1: applica l'URL encoding alla stringa Base64 prima di inserirla nell'URL. Il + diventa %2B, / diventa %2F ed = diventa %3D.

Opzione 2: usa la variante Base64url (RFC 4648 Sezione 5), che sostituisce + con -, / con _ e rimuove il padding. È l'approccio usato dai JWT e da molte API moderne.

// Opzione 1: applicare l'URL encoding al Base64 standard
const base64 = btoa('binary data here'); // "YmluYXJ5IGRhdGEgaGVyZQ=="
const urlSafe = encodeURIComponent(base64);
// "YmluYXJ5IGRhdGEgaGVyZQ%3D%3D"

// Opzione 2: codifica Base64url
function toBase64url(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}
toBase64url('binary data here');
// "YmluYXJ5IGRhdGEgaGVyZQ"