Strumenti per sviluppatori · URL codificatore e decodificatore
encodeURI vs encodeURIComponent: quali caratteri ciascuno lascia da solo
· Come funziona
codifica dell'URL javascript flusso di lavoro dello sviluppatore
Le due funzioni JavaScript differiscono esattamente di undici caratteri e la scelta di quella sbagliata interrompe URL o non riesce a sfuggire a un valore. Questo post spiega i set e fornisce una regola che puoi ricordare.
La ricerca che ha restituito tutto perché & in "R&D" ha suddiviso la query: un bug concreto derivante dalla funzione sbagliata
Una ricerca per R&D può restituire accidentalmente risultati per R se il codice costruisce manualmente ?q=R&D. La e commerciale è un separatore tra i parametri di query; non viene conservato come parte di q a meno che non si codifichi il valore. Scegliere encodeURI per quel piccolo pezzo è l'errore, non un bug del server. L'opzione più sicura nel codice dell'applicazione è spesso URLSearchParams, ma la comprensione delle due primitive JavaScript rende molto più semplice il debug del codice esistente.
Ciò che condividono entrambe le funzioni: il set non riservato che non toccano mai e la codifica percentuale UTF-8 che applicano entrambe
Entrambi i metodi lasciano ASCII lettere, cifre e la punteggiatura senza riserve - _ . ! ~ * ' ( ) intatto secondo le regole di codifica di JavaScript. Convertono i caratteri nonASCII in UTF-8 byte prima di scrivere triplette percentuali: é diventa %C3%A9, non un singolo Latin-1 byte. Codificano anche uno spazio come %20. La codifica percentuale riguarda la conservazione della struttura di un URI; non si tratta di escape HTML, convalida dell'input o protezione contro script dannosi nella pagina ricevente.
Gli undici caratteri solo codificaURI conserva — ; , / ? : @ & = + $ # e perché ciascuno ha un significato strutturale in un URL
encodeURI conserva inoltre undici caratteri strutturali che encodeURIComponent codifica: ; , / ? : @ & = + $ #. Per un indirizzo completo, lasciando da soli la barra e il punto interrogativo si preservano il percorso e la sintassi della query. Per un valore di query, lasciando & o = through cambierebbe l'elenco dei parametri, mentre un # senza caratteri di escape può iniziare un frammento. Le funzioni differiscono proprio perché una è pensata per un intero indirizzo e l'altra per un componente all'interno di quell'indirizzo.
Una regola che vale: i valori ottengono encodeURIComponent, gli URL completi ottengono encodeURI e perché "complete URL" è più raro di quanto sembri
I valori ottengono quasi sempre encodeURIComponent; gli indirizzi completi e già strutturati sono il caso meno comune per encodeURI. Per un URL che stai costruendo a livello di codice, utilizza URL API per gestire il percorso e i parametri di ricerca invece di concatenare un mix di parti codificate e grezze. Non codificare un intero URL con encodeURIComponent e quindi aspettarsi che barre e due punti continuino a comportarsi come separatori. Al contrario, non inserire il termine della query di un utente tramite encodeURI e lasciare attiva la sua e commerciale.
Esempio realizzato: la stessa stringa in entrambe le funzioni: una tabella di output per un valore con spazi, &, / e un accento
Prendi ricerca e sviluppo/caffetteria come valore di query. encodeURIComponent restituisce R%26D%20%2F%20caf%C3%A9, proteggendo la e commerciale e la barra. encodeURI restituisce R&D%20/%20caf%C3%A9, preservando la punteggiatura strutturale; un ingenuo prefisso ?q= ora creerebbe un delimitatore non intenzionale. Entrambi codificano lo spazio e l'accento, quindi un test che utilizza solo "ciao mondo" non coglie l'importante distinzione. Confronta le stringhe generate in ToolAcre, quindi incollale in un parser URL e controlla quanti parametri di query vengono visualizzati.
Errori comuni: codifica di un URL completo con encodeURIComponent e decodifica con la controparte sbagliata
La codifica di un URL completo come un componente produce %3A%2F%2F dove un consumatore si aspettava ://. La decodifica di un intero indirizzo prima di convalidarlo può reintrodurre separatori riservati con nuovi significati. Evitare inoltre la doppia codifica di un valore che già contiene %26: il segno di percentuale stesso può diventare %25, quindi un secondo livello di decodifica potrebbe cambiare nuovamente significato. Associa encodeURIComponent a decodeURIComponent per un componente e tratta gli escape percentuali non corretti come errori di input.
Cosa non copre: codifica dei moduli con + e creazione di URL con URLSearchParams
La codifica della query del modulo HTML utilizza un segno più per uno spazio in application/x-www-form-urlencoded, che è distinto dall'output %20 di queste due funzioni. URLSearchParams gestisce queste regole del modulo per te. Questo articolo non tratta la normalizzazione del percorso, la conversione del nome host Unicode o la decisione se è sicuro richiedere un URL decodificato; La codifica URL è un passaggio di rappresentazione, non una politica di autorizzazione.
Conclusione: codifica le parti, non il tutto: come il codificatore e decodificatore URL mostra entrambe le modalità in modo da poter vedere la differenza sul tuo input
Il confine memorizzabile è costituito dalle parti rispetto al tutto: il valore di un parametro è una parte, quindi utilizza encodeURIComponent o URLSearchParams. Il codificatore e decodificatore URL mostra entrambe le funzioni del browser per la stessa stringa e mantiene l'esperimento locale. Testare l'input contenente &, =, #, barra e un accento prima di decidere che due codificatori sono intercambiabili.