Perché esistono i caratteri codificati negli URL?
Un URL può contenere solo un sottoinsieme di caratteri ASCII. Spazi, caratteri accentati, simboli speciali come &, =, ? hanno significati specifici nella struttura di un URL oppure non sono trasmissibili in modo affidabile attraverso tutti i protocolli di rete.
La soluzione è il percent-encoding (o URL encoding): ogni carattere non sicuro viene sostituito con il simbolo % seguito dai due cifre esadecimali che rappresentano il suo valore nel charset UTF-8.
Come funziona il percent-encoding
Il processo è semplice:
- Prendi il carattere da codificare (es. lo spazio)
- Converti il suo codice UTF-8 in esadecimale (spazio = 32 dec = 20 hex)
- Aggiungi il prefisso
%: lo spazio diventa%20
Per caratteri multi-byte come gli accenti italiani, ogni byte viene codificato separatamente. La "è" in UTF-8 è codificata con due byte: C3 e A8, quindi diventa %C3%A8.
Caratteri comuni e loro codifica
| Carattere | Descrizione | Codifica URL |
|---|---|---|
| spazio | Spazio | %20 (o +) |
| ! | Punto esclamativo | %21 |
| # | Hash (fragment) | %23 |
| & | Ampersand | %26 |
| = | Uguale | %3D |
| ? | Query string | %3F |
| à | A accent grave | %C3%A0 |
| è | E accent grave | %C3%A8 |
| @ | Chiocciola | %40 |
| / | Slash | %2F |
Caratteri sicuri: non vanno codificati
Alcuni caratteri sono "unreserved" e non richiedono codifica: lettere da A-Z e a-z, cifre 0-9, e i simboli - _ . ~. Tutto il resto è potenzialmente problematico e andrebbe codificato.
encodeURI vs encodeURIComponent in JavaScript
JavaScript offre due funzioni native per la codifica URL con comportamento diverso:
encodeURI(url): codifica un URL completo. NON codifica i caratteri strutturali dell'URL come / ? = & # : @ perché fanno parte della struttura. Utile quando hai un URL completo e vuoi renderlo sicuro senza romperne la struttura.
encodeURIComponent(valore): codifica un singolo componente (tipicamente il valore di un parametro query). Codifica ANCHE / ? = & #. Da usare quando inserisci un valore in un parametro URL.
Esempio pratico: se hai un URL come /cerca?q=caffè latte, devi usare encodeURIComponent solo sul valore: /cerca?q=caff%C3%A8%20latte.
%20 vs + nelle query string
Storicamente, i form HTML codificavano gli spazi come + nel formato application/x-www-form-urlencoded. Il + è specifico di questo contesto. Lo standard RFC 3986 usa %20. In pratica, entrambi funzionano nella maggior parte dei casi, ma %20 è più corretto e portabile.
URL encoding nella vita pratica
- Parametri di ricerca:
?q=pasta+al+pomodoroo?q=pasta%20al%20pomodoro - Link con caratteri speciali: URL di Wikipedia con accenti o apostrofi
- API REST: valori nei path parameter o query string
- Email negli URL: la @ in un'email in un parametro diventa
%40 - Redirect URL: l'URL di destinazione come parametro va sempre codificato
FAQ
Perché lo spazio è un carattere non sicuro negli URL. Viene sostituito con %20 che rappresenta il valore esadecimale del carattere spazio (32 decimale = 20 esadecimale) nella codifica ASCII/UTF-8.
encodeURI codifica un URL completo lasciando intatti i caratteri strutturali. encodeURIComponent codifica un singolo componente, codificando anche /, ?, =, &. Usa encodeURIComponent per i valori dei parametri query.
Tecnicamente sì con la specifica IRI. In pratica molti sistemi richiedono la codifica percent-encoding. La codifica dipende dal sistema UTF-8: à diventa %C3%A0 perché in UTF-8 è rappresentato dai byte C3 e A0.
I browser moderni gestiscono spesso la codifica automaticamente. Ma nelle API e nei link generati da codice, i caratteri non codificati possono causare errori, truncature del parametro o vulnerabilità di sicurezza.