Codificarea și decodificarea URL, explicate pentru dezvoltatori
Introdu un spațiu într-un URL, sau un cuvânt chirilic, sau un ampersand care aparține datelor tale, nu adresei în sine, și ceva trebuie să cedeze. Web-ul garantează transport sigur doar pentru un set mic și previzibil de caractere ASCII. Tot restul trebuie învelit într-un format asupra căruia routerele, serverele și browserele cad de acord. Acest format este percent-encoding, mai cunoscut ca URL encoding, iar această pagină îți permite să convertești text în ambele direcții direct în browser.
Ce este de fapt percent-encoding
Regula este mecanică și ușor de urmărit. Orice caracter care nu poate apărea literal este înlocuit cu un semn % urmat de două cifre hexazecimale care indică valoarea de byte a acelui caracter. Un spațiu devine %20. Semnul plus devine %2B. Semnul diez devine %23. Când un caracter se mapează la mai mulți bytes, așa cum se întâmplă cu majoritatea textului non-ASCII sub UTF-8, primești pur și simplu mai multe triplete la rând: semnul euro devine %E2%82%AC. Decodificarea inversează procesul, citind fiecare triplet înapoi în byte-ul său original.
Această convenție este definită în specificația URI (RFC 3986) și este deliberat plictisitoare. Plictiseala este esența ei. Orice client și server HTTP bine-comportat de pe planetă implementează aceleași reguli, astfel încât un link corect codificat într-un loc ajunge intact peste tot altundeva.
De ce trebuie să existe
URL-urile transportă două tipuri de caractere cu roluri foarte diferite. Caracterele rezervate precum /, ?, #, &, = și : sunt structurale. Ele îi spun unui parser unde se termină calea și unde începe query string-ul, sau unde se termină un parametru și începe următorul. Dacă datele tale reale conțin unul dintre aceste simboluri, el trebuie codificat pentru ca parserul să nu-l confunde cu punctuația. O referință de comandă precum A&B/2024 introdusă brut într-un query string ar fi interpretată greșit ca doi parametri și un segment de cale.
Apoi există caracterele nesigure și non-ASCII: spații, ghilimele, paranteze unghiulare, litere accentuate, emoji, orice se află în afara intervalului ASCII simplu. Acestea nu au ce căuta literal într-un URL, fie pentru că se deteriorează în tranzit, fie pentru că nu au o reprezentare definită. Codificarea lor păstrează link-urile curate și previzibile, în loc să lase rezultatul la voia întâmplării.
Unde apare în munca reală
Query string-urile sunt cazul clasic. Fiecare valoare pe care o adaugi la ?key=... ar trebui codificată astfel încât intrarea utilizatorului să nu poată strica structura. Aceeași regulă se aplică trimiterilor de formulare HTML trimise ca application/x-www-form-urlencoded, unde browserul codifică automat valorile câmpurilor (și, prin convenție istorică, transformă spațiile în + mai degrabă decât în %20). O vei întâlni și când construiești link-uri către pagini cu titluri non-latine, când construiești manual cereri API, când transmiți ținte de redirecționare ca parametri și când depanezi de ce o cerere care pare corectă în bara de adrese ajunge deteriorată la server.
encodeURI față de encodeURIComponent
JavaScript pune la dispoziție doi codificatori, iar alegerea celui greșit este o greșeală frecventă. Diferența constă în domeniul de aplicare. encodeURIComponent este pentru o singură bucată de date, cum ar fi o valoare de query. Codifică aproape tot, inclusiv caracterele rezervate /, ?, :, @, &, =, + și #. Exact ce îți dorești atunci când datele au voie să conțină acele simboluri ca text obișnuit.
encodeURI este pentru o adresă întreagă pe care vrei să o menții funcțională. Lasă neatinse caracterele structurale, astfel încât slash-urile, semnele de două puncte și semnele de întrebare care țin URL-ul împreună supraviețuiesc. Folosește-l atunci când ai un URL complet și vrei doar să cureți spațiile sau caracterele non-ASCII; recurge la encodeURIComponent ori de câte ori introduci o valoare într-un URL mai mare. O regulă simplă de bază: codifică întregul link cu encodeURI, codifică părțile pe care le introduci cu encodeURIComponent.
Totul rămâne pe dispozitivul tău
Acest instrument rulează integral în browserul tău. Textul pe care îl lipești este codificat sau decodificat local, cu aceleași rutine standard, și nu circulă niciodată către un server, ceea ce îl face sigur pentru token-uri, parametri semnați sau orice altceva ce preferi să nu trimiți pe rețea. Dacă lucrezi cu alte transformări de text, convertorul Base64 se află chiar alături, iar poți răsfoi întregul set de instrumente pentru dezvoltatori pentru mai multe ajutoare de zi cu zi.
Întrebări frecvente
Ce înseamnă %20 într-un URL?
Este un spațiu codificat. Caracterul spațiu nu este permis literal într-un URL, așa că este înlocuit cu un semn procent și valoarea hexazecimală 20, care reprezintă valoarea de byte a unui spațiu.
De ce văd uneori un semn plus în loc de %20?
Datele de formular HTML de tip application/x-www-form-urlencoded codifică spațiile ca semn plus, prin convenție istorică. Într-o cale sau query normal, un spațiu este codificat ca %20. Ambele se decodifică înapoi la un spațiu în contextul lor corect.
Când ar trebui să folosesc encodeURIComponent în loc de encodeURI?
Folosește encodeURIComponent pentru o singură valoare pe care o introduci într-un URL, cum ar fi un parametru de query, pentru că el codifică și caracterele rezervate. Folosește encodeURI pentru o adresă completă atunci când vrei să păstrezi slash-urile, semnele de două puncte și semnele de întrebare care o țin împreună.
Codificarea URL schimbă sensul datelor mele?
Nu. Codificarea este complet reversibilă. Decodificarea rezultatului îți dă înapoi exact textul original, byte cu byte, atâta timp cât același set de caractere este folosit la ambele capete.
Cum sunt gestionate caracterele non-ASCII precum accentele sau emoji?
Sunt mai întâi transformate în bytes UTF-8, apoi fiecare byte devine propriul triplet procentual. Un singur caracter accentuat sau emoji se poate extinde astfel în mai multe triplete în rezultatul codificat.
Textul meu este trimis către un server când folosesc acest instrument?
Nu. Codificarea și decodificarea au loc integral în browserul tău. Nimic din ce lipești nu este încărcat, deci este sigur să-l folosești cu string-uri private sau sensibile.