Strumenti per sviluppatori · URL codificatore e decodificatore
Cosa codifica per te il costruttore URL: i set di codifica percentuale del browser
· Come funziona
codifica dell'URL javascript che cavolo web-API
URL API codifica silenziosamente in percentuale alcuni caratteri e lascia gli altri invariati, a seconda della parte di URL in cui finiscono. Questo post spiega i set di codifica WHATWG e come prevedere l'output.
Lo spazio che è diventato %20 e | che è rimasto: un caso concreto in cui new URL() ha parzialmente codificato un percorso
Quando viene eseguito il nuovo URL("https://example.com/hello world"), lo spazio diventa %20 in modo silenzioso. Ma il nuovo URL("https://example.com/hello|world") lascia la pipe intatta. Questa differenza non è casuale. Lo standard WHATWG URL definisce set di caratteri separati da codificare per ciascun componente URL: percorso, query, frammento e informazioni utente hanno ciascuno le proprie regole. Comprendere questi set significa prevedere cosa farà il costruttore.
Lo spazio necessita di codifica percentuale perché non è sicuro su HTTP e compromette la leggibilità. La pipe è diversa: non è un carattere riservato che divide la struttura, quindi il browser la lascia stare. Il confine tra sicurezza e leggibilità è tracciato da WHATWG, non da congetture. Il test di "ciao mondo" mostra la codifica; testare "ciao|mondo" rivela i confini di ogni parte URL.
Un URL, diversi set di codifica: percorso, query, frammento e informazioni utente hanno ciascuno il proprio elenco di caratteri di cui eseguire l'escape
Un URL contiene più regioni, ciascuna con le proprie regole di codifica. Il percorso segue un set, ne interroga un altro, un frammento un terzo, userinfo un quarto. Uno spazio diventa %20 nel percorso e nella query. Un segno di uguale rimane nella query, dove separa chiavi e valori, ma encodeURIComponent lo trasforma in %3D. Il costruttore URL conosce il suo contesto e applica le regole corrette per ciascuna parte.
I set di codifica sono precisi e piccoli. Il percorso ha il proprio elenco di caratteri; la query ha un elenco simile ma diverso. Ciò riflette quali personaggi hanno un significato strutturale. Una barra divide i segmenti del percorso, quindi encodeURIComponent lo codifica come %2F. Nel frammento può esistere una barra senza rompere nulla. Comprendere le regole WHATWG significa prevedere l'output senza eseguire codice.
Perché la codifica percentuale è unidirezionale: ciò che rimane codificato rimane tale
Il costruttore URL esegue la normalizzazione unidirezionale. Passa "%20" al nuovo URL e produce %20 invariato. Il costruttore lo riconosce come già codificato e lo lascia stare. Questo è il motivo per cui la doppia codifica è importante: codifica una volta, passa attraverso il costruttore e la codifica si mantiene. Il costruttore non decodifica, reinterpreta e ricodifica; si legge in avanti.
Questa proprietà unidirezionale influisce sulle applicazioni che considerano URL.href canoniche. Se concateni l'input dell'utente con il tuo percorso, l'input viene normalizzato ma non decodificato. Un valore come "my+file" rimane così com'è o diventa "my%2Bfile" in alcuni contesti. Il codice successivo che utilizza decodeURIComponent potrebbe leggere più come spazio dai dati del modulo. Il costruttore si normalizza una volta; dopodiché, il tuo valore è fisso.
Esempio funzionante: passaggio della stessa stringa disordinata tramite new URL() e lettura di href, pathname e searchParams: tre visualizzazioni diverse
Prendi "hello world&foo=bar|test#anchor" e inseriscilo nel nuovo URL con diversi componenti. Lo spazio diventa %20 ovunque. La e commerciale nel percorso rimane (nessun significato strutturale lì), ma rimane anche nella query (separa i parametri, quindi la normalizzazione perderebbe il confine tra "q=" e "foo=bar"). La pipe e l'hash si comportano diversamente in base alla posizione.
La lettura di href, pathname e searchParams mostra tre diverse visualizzazioni. pathname mostra il percorso codificato senza schema, host o query. searchParams fornisce parametri decodificati, quindi "ciao+mondo" dai dati del modulo diventa uno spazio. La proprietà search preserva la stringa letterale. href mostra il URL completo normalizzato. Questi coesistono su un oggetto; quale utilizzare dipende dal passaggio successivo.
URLSearchParams e la regola di codifica del modulo: perché produce + per gli spazi mentre pathname produce %20
URLSearchParams applica la codifica del modulo: lo spazio diventa più, non %20. il nuovo URLSearchParams({q: "hello world"}) produce "q=hello+world", non "q=hello%20world". Questa è la regola storica application/x-www-form-urlencoded. Ma se passi questa stringa come query grezza al nuovo URL, il più rimane più; solo URLSearchParams lo decodifica come spazio. Il costruttore è fedele a ciò che vede.
Questa differenza del segno più causa bug comuni. Un URL dalla barra degli indirizzi utilizza %20 per gli spazi. I dati del modulo utilizzano più. Se decodifichi con decodeURIComponent (che legge più letteralmente) invece di URLSearchParams.get, gli spazi diventano caratteri più. Il codificatore e decodificatore URL mostra entrambi: incolla "ciao+mondo" e confronta le modalità del componente e del modulo per vedere dove appare lo spazio.
Confronto con encodeURI: dove i due concordano e dove divergono
Il costruttore URL e encodeURIComponent sono strumenti diversi. encodeURIComponent codifica quasi tutto tranne lettere, cifre e - _ non riservate. ! ~ * '( ). Non presuppone alcun contesto. Il costruttore URL analizza un URL effettivo e applica le regole WHATWG per componente. encodeURIComponent trasforma "hello/world" in "hello%2Fworld"; il nuovo URL vede le barre come separatori di percorso. Stesso input, output diverso.
Utilizza encodeURIComponent durante la creazione di un URL concatenando i pezzi. Utilizza URLSearchParams o il costruttore URL per URL completi o parziali. Non utilizzare encodeURIComponent sull'intero URL; rovinerai lo schema. Confronta il risultato con l'intento. Il browser applica le opinioni sulla struttura URL e il nuovo URL le implementa. Il codificatore e decodificatore URL mostra entrambe le viste affiancate.
Cosa non copre: analisi dell'host, IDNA e schemi speciali e non speciali
Lo standard WHATWG URL è la fonte della verità, anche se leggerlo richiede pazienza. I set di codifica sono definiti in frammenti di algoritmo, non in semplici elenchi. In pratica, comprendere il principio è più importante che memorizzare gli insiemi. Il percorso consente più caratteri (le barre sono strutturali); la query ha le sue regole; Il frammento ha meno restrizioni (gestito lato client, mai inviato ai server). Ogni componente ha le sue regole; sapere questo ti dice dove cercare.
La normalizzazione e la convalida sono confini diversi. Il costruttore normalizza: pulisce la codifica percentuale, applica le regole dei componenti, fornisce la forma canonica. Non convalida: vengono lanciati caratteri non validi, ma vengono accettati host vuoti. Il costruttore è severo riguardo al formato ma indulgente riguardo all'interpretazione. Per la conformità esatta alle specifiche, leggi la sezione dei byte con codifica percentuale di WHATWG. Per la creazione di tutti i giorni, utilizza URLSearchParams, URL API ed esempi reali.
Conclusione: il parser ha delle opinioni: come il codificatore e decodificatore URL mostra la semplice codifica percentuale di un valore o un indirizzo in modo da poterlo confrontare con ciò che ha prodotto il browser
Le funzionalità WHATWG non supportate qui includono l'analisi dell'host con conversione IDNA (nomi di dominio internazionali in ASCII) e la gestione di schemi speciali e non speciali. File: gli URL utilizzano l'autorizzazione con doppia barra; dati: gli URL no. Il costruttore applica queste regole. La conversione dei nomi host e la determinazione dello stato speciale appartengono alla lettura delle specifiche, non alla codifica percentuale. Questo è importante quando si creano URL con schemi diversi.
Metti alla prova la tua costruzione URL confrontando l'interpretazione del browser con le aspettative. Crea con il nuovo URL, leggi le proprietà che contano: href per il modulo completo, nome percorso per percorso, ricerca per query non elaborata, searchParams per decodificato. Se l'output ti sorprende, incollalo nel codificatore e decodificatore URL e segui la trasformazione passo dopo passo. Lo strumento mostra l'output normalizzato insieme alla codifica grezza, rivelando la differenza. Comprendere i set WHATWG significa comprendere le scelte del browser e come lavorare con essi.