Ho perso un'ora una volta a causa di una stringa di query Un webhook di terze parti stava inviando filter[status]=open&filter[assignee]=meil mio conduttore stava leggendo filter come stringa piatta, e non riuscivo a capire perché ogni richiesta passava attraverso non filtrato Nel momento in cui ho incollato l'URL grezzo in un parser di stringhe di query e l'ho visto risolvere in un oggetto nidificato, il bug era ovvio: il mittente ha usato la notazione di parentesi e il mio parser no. Questa guida copre come utilizzo il Interroga l'analisi delle stringhe su Toolz.dev, quali sono effettivamente le parti difficili delle stringhe di query e perché la stessa chiave codificata in due modi diversi può interrompere silenziosamente un'integrazione.
tl; dr: Una stringa di query è la parte di un URL dopo il punto interrogativo che trasporta i parametri come coppie chiave-valore Un parser di stringhe di query lo converte in JSON strutturato, decodificando la codifica percentuale e gestendo chiavi ripetute e array di parentesi e può creare una stringa di query codificata correttamente da JSON. IL Interroga l'analisi delle stringhe fa entrambe le direzioni nel browser, in modo da poter ispezionare un URL disordinato o assemblarne uno pulito senza uscire dalla pagina.
Che cosa è una stringa di query?
Una stringa di query è la sezione di un URL che inizia dopo il primo punto interrogativo e termina al frammento, la parte dopo un hash Trasporta parametri come key=value coppie unite da ampersads, quindi ?q=json&page=2 passa due parametri Server e codice client leggono quelli per filtrare una ricerca, tracciare una campagna, impaginare un elenco o portare stato tra le pagine Le regole generiche per ciò che è e non è legale in quel componente provengono da RFC 3986, lo standard URI e le regole specifiche che i browser seguono per i parametri dello stile del modulo provengono da Whatwg URL standard.
Il problema è che RFC 3986 definisce la sintassi del componente di query ma non il suo significato Dice quali caratteri sono consentiti e come devono essere codificati in percentuale, ma non dice nulla su come key=value le coppie si associano a una struttura dati Quell'interpretazione è stata ereditata dall'invio di moduli HTML e diverse piattaforme l'hanno estesa in modi incompatibili Questo è il motivo per cui la stessa stringa di query può significare cose leggermente diverse per un back-end PHP, un controller Rails e un front-end JavaScript, e perché un parser deve rendere esplicite le sue convenzioni.
Ogni chiave e valore in una stringa di query è codificato tramite URL in modo che i caratteri riservati sopravvivano Uno spazio diventa %20 oppure un segno più, una e commerciale all'interno di un valore diventa %26 quindi non viene scambiato per un separatore e diventa una barra %2F. Parsing significa dividere le coppie e quindi decodificare ciascun lato, e costruire significa codificare ciascun lato e unire le coppie. Sbagliare la codifica in entrambe le direzioni e i valori si corrompono silenziosamente.
Cosa fa effettivamente un parser di stringhe di query?
Un parser prende un URL o una stringa di query nuda e la trasforma in dati strutturati e leggibili Nel modo in cui spoglia tutto fino al punto interrogativo incluso, ignora il frammento dopo l'hash, divide le coppie, decodifica ogni chiave e valore e decide come rappresentare chiavi ripetute e chiavi tra parentesi L'output è un oggetto JSON che puoi leggere e copiare, oltre a una tabella piatta di ogni coppia decodificata in modo che duplicati e valori vuoti siano evidenti.
Su Toolz.dev lo strumento viene eseguito in due direzioni In modalità analisi incolli un URL completo o solo la sua stringa di query e ottieni il JSON e la tabella dei parametri In modalità build incolli un oggetto JSON e ottieni una stringa di query codificata correttamente, con una scelta di come vengono rappresentati gli array Carica il campione e puoi guardare un URL reale con un frammento, un array in stile ripetuto e uno spazio codificato risolvi in JSON pulito, quindi ricostruiscilo.
Il motivo per utilizzare un parser dedicato piuttosto che osservare l'URL è che le stringhe di query nascondono la loro struttura Un lungo URL con caratteri codificati, chiavi ripetute e notazione a parentesi è quasi impossibile da leggere correttamente scansionandolo, e le parti che sono più difficili da leggere, la codifica e i duplicati, sono esattamente le parti che causano bug Vedere la tabella decodificata accanto al JSON rimuove le congetture.
Come vengono gestite le chiavi ripetute?
La stessa chiave può legalmente apparire più di una volta in una stringa di query, come in tags=react&tags=laravel, e non esiste un unico modo corretto per interpretarlo, che è la radice di molta confusione. Diversi sistemi risolvono i duplicati in modo diverso, quindi un parser deve lasciarti scegliere.
La convenzione più comune, e quella predefinita nello strumento Toolz.dev, è raccogliere chiavi ripetute in un array, quindi tags=react&tags=laravel diventa {"tags":["react","laravel"]}. Questo corrisponde a come il browser's proprio URLSearchParams.getAll espone i valori e come si comportano la maggior parte dei back end moderni Ma alcuni framework mantengono solo la prima occorrenza e alcuni mantengono solo l'ultima, quindi lo strumento offre anche opzioni keep-first e keep-last Quando si esegue il debug di un'integrazione, abbinando il comportamento parser's al sistema che ha prodotto o consuma l'URL è ciò che rende significativo il JSON.
Questa ambiguità non è accademica Un classico problema di sicurezza e correttezza chiamato inquinamento dei parametri HTTP esiste proprio perché due sistemi in un percorso di richiesta possono risolversi id=1&id=2 diversamente, uno vedendo 1 e l'altro vedendo 2. Essere in grado di vedere, esplicitamente, come un dato parser risolve i duplicati è il modo più veloce per ragionare su quella classe di bug.
Cosa significano parentesi come tag[] o filtro[colore]?
La notazione a parentesi è una convenzione per codificare array e oggetti nidificati all'interno di una stringa di query piatta, ed è dove i parser sono più in disaccordo Una parentesi vuota finale segna un array, quindi tags[]=react&tags[]=laravel costruisce {"tags":["react","laravel"]}. Una parentesi con nome contrassegna un oggetto annidato, quindi filter[color]=red&filter[size]=l costruisce {"filter":{"color":"red","size":"l"}}. Le staffe possono annidarsi, quindi a[b][c]=1 costruisce {"a":{"b":{"c":"1"}}}.
Questa sintassi deriva dal modo in cui PHP e Ruby on Rails serializzano i dati del modulo e da molte librerie JavaScript come qs seguilo Non fa parte di nessuno standard URL di base, ed è esattamente il motivo per cui un semplice URLSearchParams nel browser non lo espanderà, dandoti una chiave letterale di tags[] invece di un array Il parser Toolz.dev comprende la convenzione e la espande nella struttura corrispondente e ti consente di disattivare quel comportamento quando desideri invece le chiavi letterali.
Ecco come si allineano le principali convenzioni, sia durante l'analisi che durante la costruzione:
| Stile array | Codificato come | Parsi a | Comune nel |
|---|---|---|---|
| Chiave ripetuta | tags=a&tags=b |
["a","b"] |
Browser, la maggior parte dei back-end |
| Staffa vuota | tags[]=a&tags[]=b |
["a","b"] |
PHP, Rails, libreria qs |
| Parentesi indicizzata | tags[0]=a&tags[1]=b |
["a","b"] |
libreria QS, dati ordinati |
| Congiunto con la virgola | tags=a,b |
una corda da dividere | Alcune API, URL compatti |
Quando si crea una stringa di query con lo strumento, si sceglie quale di queste emettere, quindi l'output corrisponde a qualunque cosa il sistema ricevente si aspetti Quando si esegue l'analisi, lo strumento rileva le chiavi ripetute e la notazione tra parentesi per te, e i valori uniti a virgola rimangono come una singola stringa perché solo tu sai se una virgola è un separatore o parte dei dati.
Perché i segni più si trasformano in spazi?
Nella stringa di query di un URL, uno spazio letterale è molto spesso codificato come segno più anziché %20. Questa è una regola ereditata dal application/x-www-form-urlencoded formato utilizzato dai moduli HTML e Whatwg URL standard lo codifica: durante l'analisi dei dati codificati nel modulo, a + viene decodificato in uno spazio. COSÌ q=json+parser dovrebbe analizzare json parser, e lo strumento Toolz.dev lo fa per impostazione predefinita.
La sottigliezza è che questa regola si applica alla componente di query, non al percorso. UN + in un segmento di percorso è un plus letterale E occasionalmente i tuoi dati contengono veramente segni più che dovrebbero essere conservati, come un numero di telefono o una ricerca per C++. Per questi casi lo strumento ha un interruttore per disattivare il plus-as-space, quindi il plus sopravvive al viaggio di andata e ritorno. Questo è il tipo di dettaglio che è generico codificatore URL non deciderà per te, perché non sa se sta guardando una query o un percorso.
Ottenere questo giusto è importante anche durante la creazione Quando lo strumento codifica un valore, codifica in percentuale i caratteri riservati e, per impostazione predefinita, utilizza un vantaggio per gli spazi nello stile codificato nel modulo, quindi la stringa che produce è quella che browser e back end decodificheranno il modo in cui intendevi.
In cosa differisce da un parser URL completo?
Un parser di stringhe di query e un parser URL completo si sovrappongono ma rispondono a domande diverse e, utilizzando quello giusto, si salva un passaggio Un parser URL interrompe un collegamento completo nei suoi componenti, lo schema, l'host, la porta, il percorso, la query e il frammento, ed è ciò che desideri quando esegui il debug dove sta andando una richiesta o perché un reindirizzamento o un controllo CORS si comporta in modo strano Un parser di stringhe di query si concentra solo sulla query e la trasforma in JSON strutturato e modificabile, inclusi array e chiavi nidificate, e può ricostruire la query.
la Parser URL su Toolz.dev è lo strumento per l'anatomia: dagli un link e ti mostra la distinzione tra host e origine, la porta predefinita e le parti del percorso Il parser delle stringhe di query è lo strumento per lavorare con i parametri: dagli lo stesso link e ti dà i parametri come JSON puoi modificare, e poi ricostruisce una stringa di query dalle tue modifiche In pratica li uso insieme, il parser URL per capire un link e il parser delle stringhe di query per cambiarne i parametri, e se sto assemblando un link campagna raggiungo il Costruttore di UTM invece, che è un generatore di stringhe di query specializzato per i tag di analisi.
Quando lo raggiungo effettivamente?
La risposta onesta è ogni volta che un URL sta facendo di più che puntare a una pagina Lo uso per eseguire il debug di webhook e reindirizzamenti OAuth, dove i parametri trasportano l'intero payload e un valore codificato erroneamente interrompe il flusso Lo uso per leggere i parametri di tracciamento su un link di marketing in modo da poter vedere esattamente cosa sta passando una campagna Lo uso per convertire una stringa di query che un collega ha incollato in una chat in JSON Posso rilasciare in un dispositivo di test, e per fare il contrario, trasformando un piccolo oggetto in una stringa di query per una richiesta manuale rapida.
Un esempio funzionante rende concreto il payoff Un provider OAuth reindirizza nuovamente alla tua app con qualcosa come ?code=abc123&state=xyz789&scope=read%20write&error=. Incollato nel parser, che si risolve in un oggetto pulito: code e state come loro valori letterali, scope decodificato in read write perché %20 è uno spazio, e error come stringa vuota anziché come chiave mancante, che indica che il provider ha inviato il parametro ma lo ha lasciato vuoto Leggendolo dall'URL grezzo a occhio, probabilmente ti perderesti lo spazio codificato in scope e leggere male il vuoto error, ed entrambi sono esattamente i dettagli che decidono se il tuo gestore di callback si ramifica correttamente Vedendo la tabella decodificata si rimuove l'ambiguità e, se poi devi riprodurre la richiesta, la modalità di compilazione trasforma nuovamente il tuo oggetto modificato in un URL di callback valido in un unico passaggio.
Perché gran parte di quel lavoro coinvolge URL che trasportano token, valori firmati e identificatori di tracciamento, facendolo in uno strumento che viene eseguito interamente nelle questioni del browser Niente di ciò che incolli viene trasmesso, registrato o archiviato e lo strumento continua a funzionare con la rete spenta, in modo da poter ispezionare in sicurezza un URL di callback firmato dalla produzione piuttosto che una copia sanificata Faccio la causa più ampia per mantenere questo tipo di lavoro lato client nel Privacy dei dati negli strumenti online guida, e questo parser si trova accanto alle altre utilità di collegamento e testo che ho descritto nel Toolkit per sviluppatori web. Se parte del tuo lavoro sta trasformando l'input disordinato in slugs pulito e identificatori, il Slug Generatore è un compagno naturale per il lato output del lavoro sugli URL.
Domande frequenti
Che cosa è una stringa di query?
Una stringa di query è la parte di un URL dopo il punto interrogativo che trasporta parametri come coppie chiave-valore unite da ampersand, come ?q=json&page=2. server e codice client lo leggono per filtrare i risultati, tenere traccia delle campagne o passare lo stato Ogni chiave e valore è codificato URL in modo che gli spazi e i caratteri riservati sopravvivano e il frammento dopo un hash non ne fa parte.
Come vengono gestite le chiavi ripetute durante l'analisi?
Per impostazione predefinita una chiave che appare più di una volta viene combinata in un array, quindi tags=react&tags=laravel analizza {& quot;tags":["react","laravel"]}. Puoi passare a mantenere solo il primo valore o solo l'ultimo valore, perché i diversi back end risolvono i duplicati in modo diverso e vuoi che il JSON corrisponda al sistema a cui stai prendendo di mira.
Cosa significano parentesi come tag[] o filtro[colore]?
La notazione della parentesi codifica array e oggetti nidificati all'interno di una stringa di query piatta. tag[]=react&tags[]=laravel costruisce un array e filter[color]=red&filter[size]=l costruisce l'oggetto nidificato {& quot;filter":{"color":"red",":"l"}}. È comune nelle librerie PHP, Rails e form, quindi il parser lo espande nella struttura corrispondente e puoi disattivarlo per mantenere le chiavi letterali.
Perché un segno più diventa uno spazio?
Nella stringa di query di un URL, uno spazio letterale è spesso codificato come segno più, una regola ereditata dall'invio di moduli HTML, quindi il parser converte + di nuovo in uno spazio per impostazione predefinita Se i tuoi dati contengono segni più reali che devono essere conservati, come C++ o un numero di telefono, disattiva l'opzione plus-as-space e il plus viene preservato.
Posso creare una stringa di query da JSON?
Sì. Passa alla modalità di creazione e incolla un oggetto JSON di coppie chiave-valore Lo strumento per cento codifica ogni chiave e valore e li unisce con ampersand, e puoi scegliere come codificare gli array: tasti ripetuti, parentesi vuote, parentesi indicizzate o un elenco separato da virgole, quindi l'output corrisponde a qualunque cosa il sistema ricevente si aspetti.
Qual è la differenza tra questo e un parser URL completo?
Un parser URL completo suddivide un intero URL in schema, host, porta, percorso, query e frammento Un parser di stringhe di query si concentra solo sulla query, la trasforma in JSON modificabile strutturato inclusi array e chiavi nidificate e può ricostruire la query Usare il parser URL per ispezionare un collegamento e questo strumento per leggerne o modificarne i parametri.
Gestisce un URL completo o solo la parte di query?
Entrambi Se incolli un URL completo, il parser rilascia tutto fino al punto interrogativo incluso e ignora il frammento dopo l'hash, quindi ottieni solo i parametri Se incolli una stringa di query nuda senza punto interrogativo, viene analizzata così com'è, il che è utile quando hai copiato solo i parametri.
Il mio URL viene inviato da qualche parte?
No. L'analisi, la decodifica e la codifica vengono eseguite tutte come JavaScript nel browser, quindi non viene trasmesso, registrato o archiviato nulla È possibile confermarlo guardando la scheda di rete mentre si analizza un URL o disconnettendosi da Internet, perché lo strumento continua a funzionare offline una volta caricata la pagina.
Ispezionare o assemblare i parametri con il libero Interroga l'analisi delle stringhe. Analizza un URL in JSON e crea una stringa di query, gestendo chiavi ripetute, array di parentesi e codifica, interamente nel browser.
