Costruttore di URL

Anatomia di un URL, componente per componente

La grammatica che definisce ogni URL sul web vive in RFC 3986 «Uniform Resource Identifier (URI): Generic Syntax» (Berners-Lee, Fielding, Masinter, gennaio 2005). I browser in realtà usano una variante leggermente più tollerante definita nel WHATWG URL Living Standard. Entrambi concordano sui componenti:

• Schema, https, http, ftp, mailto, data, tel, sms, magnet, più gli schemi personalizzati delle applicazioni (myapp://). RFC 3986 richiede minuscole; WHATWG canonizza. Il registro degli Schemi URI dell'IANA ha l'elenco ufficiale degli schemi registrati.
• Autorità, userinfo@host:port. La forma a credenziali integrate user:password@ è deprecata per sicurezza: Chrome 64 (gennaio 2018) blocca i caricamenti di sottorisorse con credenziali nell'URL perché abilitavano trucchi di phishing.
• Host, un nome di dominio o un letterale IP. I nomi di dominio internazionalizzati come президент.рф vengono convertiti in ASCII via Punycode (RFC 3492, marzo 2003): quell'esempio diventa xn--d1abbgf6aiiy.xn--p1ai. I browser fanno la conversione in modo trasparente per la visualizzazione.
• Porta, inclusa solo quando non è quella di default per lo schema. Default: 80 (http), 443 (https), 21 (ftp), 22 (ssh), 25 (smtp), 5432 (postgres), 3306 (mysql), 6379 (redis).
• Percorso, segmenti separati da slash. Ogni segmento codifica in percentuale qualsiasi cosa al di fuori dell'insieme pchar definito in RFC 3986 §3.3. I segmenti-punto . e .. hanno semantica di rimozione (§5.2.4).
• Query, per convenzione coppie chiave-valore separate da &, ma RFC 3986 dice solo «stringa opaca dopo ?». La convenzione è formalizzata nell'algoritmo application/x-www-form-urlencoded di WHATWG.
• Frammento, tutto dopo #. Mai inviato al server. Usato da router di applicazioni single-page, ancore di link e token di flusso implicito OAuth.

Codifica percentuale: la trappola + versus %20

RFC 3986 §2.3 definisce i caratteri non riservati che non necessitano mai di codifica: A-Z a-z 0-9 - . _ ~. Tutto il resto, quando appare come dati all'interno di un componente URL, diventa %XX dove XX è il valore esadecimale del byte. I caratteri UTF-8 multi-byte si espandono in più triplette di percentuale: é (U+00E9, UTF-8 C3 A9) codifica come %C3%A9. La trappola classica è il carattere spazio: in un percorso o frammento di URL regolare, lo spazio codifica come %20; nelle stringhe di query codificate in form (l'algoritmo application/x-www-form-urlencoded condiviso dai form HTML e dal serializzatore di stringhe di query WHATWG), lo spazio codifica come +. Un server che decodifica dati di form converte + di nuovo in spazio; un server che tratta la query come URI generica non lo fa. Mescolare le due convenzioni corrompe silenziosamente i dati. Il pattern sicuro in JavaScript: usa new URLSearchParams per le query e encodeURIComponent per i singoli valori; la conformità alla spec è gestita per te.

Dove hai davvero bisogno di un costruttore di URL

• Link di marketing taggati UTM per Google Analytics (Urchin Tracking Module, in GA dal 2005): i cinque parametri canonici sono utm_source, utm_medium, utm_campaign, utm_content, utm_term, tutti minuscoli secondo le linee guida di Google.
• Richieste di autorizzazione OAuth 2.0 (RFC 6749, ottobre 2012): la spec impone response_type, client_id, redirect_uri, scope, state come parametri di query sull'endpoint di autorizzazione.
• Deep link mobile: uno schema app:// che l'OS instrada verso la tua app installata invece del browser, o un Android App Link / iOS Universal Link servito dal tuo dominio.
• Test del client API: https://api.example.com/v2/users?expand=projects&since=2024-01-01. Digitarli a mano fallisce coerentemente al passo «spazio dentro un valore».
• Cache buster CDN: ?v=2026-05-12-1 aggiunto agli URL degli asset statici in modo che un deploy invalidi la versione in cache. La stringa di query fa parte della chiave di cache.
• Servizi di trasformazione immagine (Cloudinary, imgix, Cloudflare Images): la trasformazione è codificata come parametri di query o segmenti di percorso. Una chiamata tipica assomiglia a ?w=800&q=85&fm=webp.
• Template email dove la pagina di destinazione legge i parametri via JS, spesso combinando tag UTM con un token o uid univoco per il tracciamento per destinatario.

Errori comuni

• Dimenticare di codificare & dentro un valore. Un valore «gatti & cani» messo ingenuamente in ?specie=gatti & cani diventa una chiave specie con valore gatti più una chiave vuota errante. Passa sempre attraverso encodeURIComponent.
• Doppia codifica. Chiamare encodeURIComponent su una stringa già codificata trasforma %20 in %2520. Facile quando un valore passa attraverso due sistemi che ciascuno «codifica difensivamente».
• Mismatch della barra finale. RFC 3986 dice che https://example.com/api e https://example.com/api/ sono risorse diverse. La maggior parte delle API REST le tratta in modo identico, ma alcune restituiscono redirect 308; scegli una forma canonica e documentala.
• Mescolare + e %20. Le stringhe di query codificate in form usano + per lo spazio; la codifica percentuale generica usa %20. Un percorso con + letterale sopravvive al copia-incolla ma fallisce quando un decoder di form lo legge.
• Credenziali integrate. https://user:pass@example.com è deprecato e bloccato per i caricamenti di sottorisorse in Chrome 64+. Usa l'header Authorization.
• Spoofing IDN. Il cirillico «а» (U+0430) è visivamente identico al latino «a». I browser mostrano Punycode quando un dominio mescola script, ma un URL costruito manualmente che punta a аpple.com (а cirillico) apre un sito diverso da apple.com. Usa Punycode (xn--...) per sicurezza, o resta con ASCII.
• Aggiungere // dopo schemi che non lo usano. mailto:, tel:, sms:, magnet: tutti saltano il // e vanno direttamente al percorso. mailto:user@example.com è corretto; mailto://... no.

Altre domande frequenti

Qual è la lunghezza massima di un URL?

RFC 3986 non pone limiti. In pratica: i browser limitano a circa 2.000 caratteri per la barra degli indirizzi (Internet Explorer 11 era 2.083; Chrome e Firefox tollerano di più ma troncano la visualizzazione); la maggior parte dei CDN e proxy limitano a 4.096 o 8.192; server come Apache e Nginx di default a 8.192 byte per la riga di richiesta. Se hai bisogno di più di 2.000 caratteri, passa al corpo POST.

Posso includere lo stesso parametro di query più volte?

Sì. ?tag=red&tag=blue&tag=green è valido. Come il server lo interpreta dipende dal framework: Express / Node.js parsifica a req.query.tag = ['red', 'blue', 'green']; PHP necessita della convenzione parentesi quadre ?tag[]=red&tag[]=blue; Rails parsifica a un array se usi le parentesi tag[]. Il metodo URLSearchParams.getAll('tag') restituisce sempre tutti i valori come array indipendentemente dallo stile delle parentesi.

I parametri di query influenzano la SEO?

I parametri di tracciamento (UTM, fbclid, gclid) generalmente non influenzano il ranking di ricerca organica. Il rischio è l'indicizzazione di contenuti duplicati: un URL taggato e la sua versione pulita sembrano due pagine diverse per un crawler. La correzione è un tag <link rel="canonical" href="clean-url"> che punta ogni variante taggata allo stesso URL canonico.

Cos'è un Template URI, e dovrei usarlo?

RFC 6570 (marzo 2012) definisce i Template URI: una sintassi per URL parametrizzati con segnaposti. Sono usati nelle specifiche OpenAPI / Swagger, JSON Hyper-Schema, e alcune API HATEOAS. Per la costruzione di URL quotidiana, la semplice concatenazione di stringhe attraverso questo builder è più semplice; i Template URI brillano quando documenti una superficie API e generi SDK client.

Viene inviato qualcosa a un server?

No. Ogni componente che digiti, la codifica e l'URL finale sono costruiti nel JavaScript del tuo browser. Nessuna chiamata di rete viene effettuata per assemblare l'URL. Apri la scheda Rete in DevTools e prova lo strumento: vedrai zero richieste in uscita durante la costruzione.