Strumenti per sviluppatori · URL codificatore e decodificatore
Perché + diventa uno spazio quando decodifichi una stringa di query e quando no
· Come funziona
codifica dell'URL javascript flusso di lavoro dello sviluppatore
Se + significa spazio dipende da quale decoder chiami. Questo post spiega come decodeURIComponent, URLSearchParams e i framework del server trattano + e come evitare di trasformare un vero vantaggio in uno spazio.
Perché + diventa uno spazio quando decodifichi una stringa di query e quando no
Gli invii dei moduli HTML utilizzano il formato application/x-www-form-urlencoded, dove lo spazio diventa più. Un server che riceve name=Alice+Smith sostituisce ciascun segno più con uno spazio prima di estrarre il valore. Quando un plus reale appartiene ai dati, come in un calcolo 5+3, arriva al server come 5 3 dopo il passaggio di decodifica del modulo. Questa conversione invisibile è la radice della confusione.
La decodifica JavaScript produce risultati diversi a seconda della funzione utilizzata. URLSearchParams considera il segno più come uno spazio, corrispondente al comportamento del server. Ma decodeURIComponent lascia il plus intatto, trattandolo alla lettera. Questa asimmetria tra le funzioni è il motivo per cui lo stesso input viene decodificato in modo diverso. Uno sviluppatore che si aspetta che entrambi i decodificatori producano lo stesso risultato scopre che non è così.
Due codifiche che si assomigliano: RFC 3986 codifica percentuale rispetto a application/x-www-form-urlencoded
Due standard di codifica sembrano simili ma funzionano in modo diverso. RFC 3986 definisce la codifica percentuale: qualsiasi carattere diventa %HH. Lo spazio diventa %20. Lo standard application/x-www-form-urlencoded aggiunge una scorciatoia: lo spazio può essere più. Entrambi funzionano nel contesto del modulo, ma plus è facoltativo e specifico per quello standard. Sono domini diversi con aspetto simile.
La chiamata a decodeURIComponent applica solo la decodifica RFC 3986. Si legge %20 come spazio e più come più letterale. URLSearchParams applica le regole di decodifica dei moduli: gli escape percentuali diventano i relativi caratteri e il segno più diventa lo spazio. Le due funzioni risolvono lo stesso problema in domini diversi. Mescolarli fa sì che un reale più svanisca oppure che uno spazio diventi più e non si riesca a convertire.
decodeURIComponent lascia + alone; URLSearchParams lo trasforma in uno spazio: i due comportamenti JavaScript a confronto
Il comportamento del server varia, il che aggrava il problema. Rails o Django applicano automaticamente la regola del modulo: il più diventa spazio. Ma l'estrazione e la decodifica manuale della stringa di query non elaborata con un decodificatore URL lascia plus intatto. Lo stesso valore elaborato da framework diversi produce risultati diversi. Il codice del server spesso gestisce questo in modo implicito, nascondendo il problema finché non si scrive un decodificatore personalizzato.
Esempio: un campo del numero di telefono memorizza +1-555-0100 con più come codice paese. Un modulo HTML lo codifica come %2B1-555-0100 perché JavaScript codificato più come %2B. Il server lo riceve. Se applica la decodifica del modulo, %2B diventa più e il valore è corretto. Se un proxy elimina la codifica, la chiamata di decodeURIComponent sul risultato produce +1-555-0100. Ogni livello viene decodificato una volta.
Cosa fanno i server: comportamento comune del framework nella stringa di query e nel corpo della richiesta, descritto in termini generali
JavaScript può codificare valori utilizzando encodeURIComponent. Dato a+b, produce a%2Bb. Quando la stringa codificata raggiunge un server o un decodificatore compatibile con il modulo, %2B viene decodificato come più e il risultato è corretto. Se invece codifichi utilizzando la regola del modulo, uno spazio diventa più e un più reale diventa %2B. In ogni caso, la codifica produce a%2Bb. L'interpretazione dipende da quale regola di decodificazione si applica.
Prova il viaggio di andata e ritorno: inizia con a+b. Codificare con encodeURIComponent per ottenere a%2Bb. Decodifica a%2Bb con decodeURIComponent e recupera a+b. Passa a+b a URLSearchParams: tratta più come spazio, producendo una b. Passa a%2Bb a URLSearchParams per recuperare a+b. Lo stesso input decodificato in due modi produce output diversi a seconda del decoder utilizzato.
Esempio realizzato: 'a+b' e 'a%2Bb' tramite entrambi i decodificatori: quattro risultati in una tabella
Gli errori comuni seguono direttamente. Uno sviluppatore decodifica con decodeURIComponent e si chiede perché i dati del modulo in arrivo con un vantaggio reale si interrompono. Avrebbero dovuto utilizzare URLSearchParams. Al contrario, qualcuno usa URLSearchParams quando dovrebbe usare decodeURIComponent e ogni plus letterale scompare. La codifica due volte produce %252B, richiedendo coppie codificatore-decodificatore corrispondenti per decodificare correttamente.
Un altro errore è costruire manualmente una stringa di query come ?q=value senza codifica. Qualsiasi e commerciale o uguale nel valore crea automaticamente un nuovo parametro. Il browser non indovina la concatenazione; tratta il risultato come formato correttamente. Solo la codifica intenzionale con encodeURIComponent lo impedisce. URL codificatore e decodificatore mostra tutte e tre le funzioni, rivelando ciò che ciascuna produce.
Errori comuni: decodificare due volte o codificare uno spazio come + in un segmento del percorso
La regola di codifica del modulo si chiama application/x-www-form-urlencoded perché descrive l'intestazione Content-Type del corpo della richiesta HTTP. I moduli HTML senza caricamento di file inviano il corpo in questo formato. Anche le stringhe di query negli URL utilizzano questa convenzione, sebbene tecnicamente non abbiano uno standard di codifica ufficiale. Le specifiche URL trattano la query come opaca; più il significato non è obbligatorio. Ma nelle applicazioni web, più di solito significa spazio.
Per garantire un comportamento corretto, codificare deliberatamente e decodificare con la funzione di corrispondenza. Se hai codificato con encodeURIComponent, decodifica con decodeURIComponent. Se si leggono i dati del modulo HTML o i corpi della richiesta nel formato del modulo, utilizzare URLSearchParams. Non indovinare mai in base all'apparenza. Una stringa come a+b è ambigua. I decoder non sono intercambiabili.
Cosa non copre: dati del modulo multiparte e corpi della richiesta JSON
I dati dei moduli in più parti, i corpi delle richieste JSON e altri standard hanno regole di codifica separate. JSON non utilizza il segno più per la codifica dello spazio o della percentuale; utilizza gli escape Unicode. Multipart utilizza confini diversi. Questo articolo riguarda solo le stringhe di query e i corpi con codifica del modulo, perché è qui che appare l'ambiguità positiva. Controlla sempre l'intestazione Content-Type e RFC che lo definisce.
Codifica sempre un più letterale come %2B quando appartiene a un valore di query. URL codificatore e decodificatore mostra come il segno più è protetto come %2B in modalità componente, separato dagli spazi che diventano %20. Passa a+be a%2Bb attraverso ciascuna modalità, quindi esamina i risultati. Questo confronto mostra perché lo stesso input viene decodificato in modo diverso. La differenza sta nel comportamento corretto di due standard diversi.
Conclusione: codifica sempre un più letterale come %2B: in che modo il codificatore e decodificatore URL mostra l'aspetto di un valore come valore di query codificato in percentuale
Conclusione: il plus in una stringa di query è la forma che codifica per lo spazio, non un plus letterale, a meno che non provenga dalla codifica che lo proteggeva come %2B. Il decodificatore sbagliato perde quella protezione. URLSearchParams è più sicuro nel moderno JavaScript; gestisce la codifica dei moduli e fornisce l'accesso ai parametri denominati. Per le stringhe grezze, encodeURIComponent protegge tutto; decodeURIComponent interpreta %20 e le percentuali ma tratta il segno più letteralmente.
Prova questo: crea ?x=a+b a mano e incollalo nel codificatore e decodificatore URL. Esaminalo e guarda URLSearchParams dividerlo nel parametro x con valore a b. Incolla ?x=a%2Bb e vedi il valore a+b. Utilizza encodeURIComponent per creare URL e confrontare. Questa conferma visiva chiarisce la regola: le regole del modulo usano più, la codifica percentuale usa %20, mescolarle è il motivo per cui più svanisce nello spazio.