Elaborazione 100% Lato Client • Zero Registri di Rete • Esecuzione Immediata
Curious TechieToolbox Sviluppatori
ENCODING5 min di lettura•Italiano EditionEsecuzione 100% Lato Client

Cos’è la Codifica URL (Percent-Encoding)?

Standard RFC 3986, caratteri riservati, traduzione byte UTF-8 e gestione delle query string.

CT
Curious-Techie Engineering TeamAutore Verificato

Web Protocols & Security Architecture Research

Pubblicato:
•
Aggiornato:
•5 min di lettura
Specifica Ufficiale:RFC 9110(IETF)
Revisionato da Curious-Techie Architecture Peer Review Group
Domanda Principale • Risposta Tecnica Immediata

Cos’è la Codifica URL (Percent-Encoding)?

TL;DR — Punti Chiave di Ingegneria

  • Il Percent-encoding traduce i caratteri non consentiti in sequenze esadecimali %HH (RFC 3986).
  • I delimitatori speciali come ? e & richiedono l’escape nei parametri di richiesta.
  • encodeURIComponent() protegge i valori; encodeURI() salvaguarda i percorsi.
  • Gli spazi sono convertiti in %20 o in + nei dati modulo.
// FONDAMENTI

Concetti Chiave e Architettura

Unreserved Characters

Safe

Characters permitted in any URI component without encoding: `ALPHA`, `DIGIT`, `-`, `_`, `.`, `~` (RFC 3986 Section 2.3).

Reserved Characters

Delimiters

Characters with reserved syntactic meaning (e.g. `?` initiates query, `#` initiates fragment, `/` separates path segments).

Percent Triplet (%XX)

Syntax

The 3-character sequence consisting of "%" followed by two hexadecimal digits (0-9, A-F) mapping to a specific byte.

application/x-www-form-urlencoded

Forms

Legacy HTML form encoding MIME type where spaces become `+` instead of `%20`, often handled via URLSearchParams.

UTF-8 Octet Multi-byte Encoding

Unicode

Non-ASCII characters (e.g. accented letters, emojis) are converted into multi-byte UTF-8 sequences, producing multiple percent triplets (e.g. "🚀" -> `%F0%9F%9A%80`).

Domanda Secondaria • Flusso di Esecuzione

Come funziona Cos’è la Codifica URL (Percent-Encoding)??

Risposta Diretta:

When a web application parses or constructs a URI, each component (scheme, authority, path, query, fragment) must respect delimiter boundaries. When encoding, the processor converts each character into its UTF-8 byte stream, checks whether each byte is in the unreserved set, and replaces any disallowed byte with `%` plus its uppercase 2-digit hexadecimal representation.

1

String to UTF-8 Byte Stream

Convert characters to raw byte octets according to UTF-8 encoding.

"€" (Euro symbol) -> [0xE2, 0x82, 0xAC]
2

Character Classification

Determine if character is unreserved, reserved-as-data, or reserved-as-delimiter.

"=" used as query value parameter must be encoded; used as key/value delimiter is preserved.
3

Hexadecimal Hex Transformation

Convert each prohibited byte into two hexadecimal characters.

0xE2 -> "E2", 0x82 -> "82", 0xAC -> "AC"
4

Percent Triplet Concatenation

Prefix each byte with "%" to generate the final escaped sequence.

"€" -> "%E2%82%AC"
5

URI Construction

Integrate safe percent triplets into target URI path or query string parameter.

https://api.curious-techie.com/search?currency=%E2%82%AC
Esempi Tecnici • Implementazione

Come implementare Cos’è la Codifica URL (Percent-Encoding)? nella pratica?

JavaScript: Safe Query Parameter Building using URL and URLSearchParams

typescript
// Constructing robust URLs using modern WHATWG URL API
const baseUrl = "https://api.curious-techie.com/v1/search";
const url = new URL(baseUrl);

// Set query params safely (handles percent encoding automatically!)
url.searchParams.set("q", "cryptographic hashing & signatures");
url.searchParams.set("redirect", "https://app.curious-techie.com/dashboard?view=full");
url.searchParams.set("symbol", "€");

console.log(url.toString());
// Output: https://api.curious-techie.com/v1/search?q=cryptographic+hashing+%26+signatures&redirect=https%3A%2F%2Fapp.curious-techie.com%2Fdashboard%3Fview%3Dfull&symbol=%E2%82%AC

// Reading and decoding params
const params = new URLSearchParams(url.search);
console.log(params.get("q")); // "cryptographic hashing & signatures" (auto decoded)

Dettagli di Ingegneria: Using the WHATWG URL API automatically applies correct percent-encoding to keys and values, avoiding manual concatenation errors.

The Critical Difference: encodeURI vs encodeURIComponent

javascript
const rawParam = "user/profile?role=admin&id=10";

// encodeURI leaves protocol and path delimiters intact:
console.log(encodeURI(rawParam));
// "user/profile?role=admin&id=10" (BROKEN if passed as a query value!)

// encodeURIComponent encodes ALL reserved syntax delimiters:
console.log(encodeURIComponent(rawParam));
// "user%2Fprofile%3Frole%3Dadmin%26id%3D10" (CORRECT for query values)

// Correct usage pattern:
const targetPage = "https://curious-techie.com/auth";
const callback = "https://curious-techie.com/welcome?lang=en";
const fullUrl = `${targetPage}?next=${encodeURIComponent(callback)}`;

Dettagli di Ingegneria: Never pass query parameter values through encodeURI; always use encodeURIComponent to ensure ?, &, and = do not corrupt the outer query structure.

Architettura di Produzione • Casi Reali

Dove e perché si utilizza Cos’è la Codifica URL (Percent-Encoding)? in produzione?

OAuth 2.0 & OpenID Connect Authorization Flows

Passing the client callback `redirect_uri` and encrypted `state` tokens in the authorization URL.

Authorization servers require the `redirect_uri` to be strictly percent-encoded to prevent parameter injection attacks.

Search Engine Deep Links and Unicode Tags

Generating clean canonical URLs for technical tags containing symbols like C++, C#, or international language characters.

Paths like `/tags/c%2B%2B` preserve the plus symbol without being stripped or treated as whitespace by web servers.

Errori Comuni e Anti-pattern

Quali sono gli errori comuni con Cos’è la Codifica URL (Percent-Encoding)??

Anti-Pattern: Using `encodeURI()` on individual query parameter values

Impatto: Reserved delimiters like `&` and `=` in the value remain unencoded, corrupting the query string into unexpected split parameters.

Correzione Raccomandata: Always use `encodeURIComponent()` or `URLSearchParams` for parameter values.

Anti-Pattern: Double Encoding URLs (%2520 bug)

Impatto: Encoding an already-encoded URL transforms `%20` into `%2520`, resulting in literal `%20` text appearing on the screen instead of spaces.

Correzione Raccomandata: Only encode raw, unencoded input values once; never pass an assembled URL back through encoding functions.

Anti-Pattern: Confusing `+` and `%20` across HTTP specs

Impatto: Using `+` inside URI path segments represents a literal plus character, but in `application/x-www-form-urlencoded` query strings it represents a space.

Correzione Raccomandata: Follow RFC 3986 strictly: use `%20` for paths; rely on standard URL parsers for form-encoded queries.

Modellazione delle Minacce • Vettori di Attacco

Quali sono i rischi e le implicazioni di sicurezza di Cos’è la Codifica URL (Percent-Encoding)??

Path Traversal via Nested Percent-Encoding

CWE-22 Improper Limitation of a Pathname to a Restricted Directory

Vulnerabilità: WAF or proxy decodes `%2e%2e%2f` once to `../`, or decodes `%252e%252e%252f` to bypass path restriction filters.

Strategia di Mitigazione: Normalize and validate paths AFTER all URL decoding has completed; verify paths resolve within root directory boundaries.

Server-Side Request Forgery (SSRF) via Encoded Delimiters

OWASP Top 10 A10:2021 Server-Side Request Forgery (SSRF)

Vulnerabilità: Attacker passes percent-encoded credentials or newline injections (`%0d%0a`) into backend HTTP client URLs.

Strategia di Mitigazione: Use strict URL parser objects rather than string interpolation; validate hostnames against an IP allowlist.
Diagnostica • Risoluzione Causa Radice

Come diagnosticare e risolvere errori con Cos’è la Codifica URL (Percent-Encoding)??

Sintomi e Indicazioni Cliniche: Plus signs "+" in query strings are unexpectedly replaced with empty spaces on the server

Analisi Tecnica della Causa Principale:
  • Server parser defaults to application/x-www-form-urlencoded specification where "+" signifies space
Soluzione Verificata in Produzione: Percent-encode literal plus signs as `%2B` in query string parameter values.

Sintomi e Indicazioni Cliniche: URIError: URI malformed during `decodeURIComponent()`

Analisi Tecnica della Causa Principale:
  • Input string contains an incomplete percent sequence (e.g. "item%2" or "%FF" invalid UTF-8 sequence)
Soluzione Verificata in Produzione: Wrap decoding in a `try...catch` block or validate percent triplets match `/%[0-9a-fA-F]{2}/g`.
Knowledge Base • Risposte Tecniche Dirette

Domande Frequenti su Cos’è la Codifica URL (Percent-Encoding)?

Q:What is the difference between URL encoding and percent-encoding?

Risposta Diretta:There is no difference; percent-encoding is the formal technical term defined in RFC 3986, while "URL encoding" is the colloquial industry name for the same mechanism.

Both terms refer to replacing non-ASCII or reserved characters with a percent symbol "%" followed by two hexadecimal digits representing the byte in UTF-8.

Q:Should a space be encoded as "+" or "%20"?

Risposta Diretta:In standard RFC 3986 URI paths and headers, space must always be encoded as "%20". In query strings submitted via HTML forms (application/x-www-form-urlencoded), "+" is permitted as an alias for space.

Modern REST APIs and WHATWG specifications prefer "%20" consistently across both paths and queries to prevent ambiguity.

Sezione 12 • Utilità Interattive

Strumenti Correlati

Esecuzione 100% Lato Client

Companion Interactive Tool100% Client-Side Execution

Test & Verify with URL Encoder / Decoder

Encode and decode URL parameters and query strings (RFC 3986).

Companion Interactive Tool100% Client-Side Execution

Test & Verify with Base64 Encoder / Decoder

Encode and decode Base64 strings and UTF-8 text client-side.

Companion Interactive Tool100% Client-Side Execution

Test & Verify with Hex ↔ Text Converter

Convert plain text to hexadecimal bytes and hex strings back to text.

Companion Interactive Tool100% Client-Side Execution

Test & Verify with HTTP Header Analyzer

Analyze raw or live HTTP response headers for caching and architecture.

Glossario

Percent-Encoding
A mechanism to encode arbitrary data in a URI using only US-ASCII characters.
Reserved Characters
Characters that have special structural meaning within a URI, such as "/", "?", "&", and "#".
Unreserved Characters
Characters that are allowed in any URI without being percent-encoded (A-Z, a-z, 0-9, "-", "_", ".", "~").