URL-kódolás és -dekódolás fejlesztőknek elmagyarázva
Írj be egy szóközt egy URL-be, vagy egy cirill szót, vagy egy olyan & jelet, amely az adatodhoz tartozik, nem a cím szerkezetéhez - és valaminek engednie kell. A web csak egy szűk, kiszámítható ASCII-karakterkészletre garantál biztonságos átvitelt. Minden más olyan formátumba kell csomagolni, amelyben a routerek, szerverek és böngészők egyaránt megegyeznek. Ez a formátum a százalékos kódolás, közismertebb nevén URL-kódolás, és ez az oldal lehetővé teszi, hogy szöveget alakíts át bármelyik irányban, közvetlenül a böngésződben.
Mi is valójában a százalékos kódolás
A szabály mechanikus és könnyen követhető. Minden karaktert, amely nem jelenhet meg szó szerint, egy % jel vált fel, amelyet két hexadecimális számjegy követ, kiírva az adott karakter byte-értékét. A szóközből %20 lesz. A pluszjelből %2B. A kettőskeresztből %23. Amikor egy karakter több byte-ra képződik le, ahogy a legtöbb nem ASCII szöveg is UTF-8 alatt, egyszerűen több hármast kapsz egymás után: az eurójelből %E2%82%AC lesz. A dekódolás a folyamatot fordítva végzi el, minden hármast visszaolvasva az eredeti byte-jává.
Ezt a konvenciót az URI-specifikáció (RFC 3986) rögzíti, és szándékosan unalmas. Az unalmasság a lényeg. A világ minden jól viselkedő HTTP-kliense és -szervere ugyanazokat a szabályokat implementálja, így egy helyesen kódolt link mindenhol sértetlenül érkezik meg.
Miért kell léteznie
Az URL-ek kétféle karaktert hordoznak, nagyon eltérő szereppel. A fenntartott karakterek, mint a /, ?, #, &, = és :, szerkezeti szerepűek. Megmondják egy parsernek, hol ér véget az útvonal és hol kezdődik a lekérdezési karakterlánc, vagy hol áll meg az egyik paraméter és kezdődik a következő. Ha a tényleges adatod tartalmaz egy ilyen szimbólumot, kódolni kell, hogy a parser ne írásjelnek nézze. Egy olyan rendelésazonosító, mint A&B/2024, nyersen egy lekérdezési karakterláncba illesztve két paraméterként és egy útvonalszegmensként értelmeződne.
Ezután ott vannak a nem biztonságos és nem ASCII karakterek: szóközök, idézőjelek, szögletes zárójelek, ékezetes betűk, emojik, minden, ami az egyszerű ASCII-tartományon kívül esik. Ezeknek nincs keresnivalójuk szó szerint egy URL-ben, akár azért, mert átvitel közben megsérülnek, akár mert nincs definiált ábrázolásuk. Kódolásuk tisztán és kiszámíthatóan tartja a linkeket, ahelyett hogy a véletlenre bíznánk az eredményt.
Hol találkozol vele a gyakorlati munkában
A lekérdezési karakterláncok a klasszikus eset. Minden érték, amelyet a ?key=... mögé illesztesz, kódolva kell legyen, hogy a felhasználói bevitel ne törhesse meg a szerkezetet. Ugyanez érvényes a application/x-www-form-urlencoded típusú HTML űrlapbeküldésekre is, ahol a böngésző automatikusan kódolja a mezőértékeket (és a történelmi konvenció szerint a szóközöket + jelre, nem %20-ra cseréli). Ugyanígy találkozol vele, amikor nem latin betűs című oldalakra mutató linkeket építesz, API-kéréseket állítasz össze kézzel, átirányítási célokat adsz át paraméterként, vagy azt debuggolod, miért érkezik a szerverre torzultan egy olyan kérés, amely a címsorban rendben látszik.
encodeURI kontra encodeURIComponent
A JavaScript két kódolót kínál, és a rossz kiválasztása gyakori hiba. A különbség a hatókörben rejlik. Az encodeURIComponent egyetlen adatelemhez való, például egy lekérdezési értékhez. Szinte mindent kódol, beleértve a fenntartott /, ?, :, @, &, =, + és # karaktereket is. Pontosan ez kell, amikor az adat tartalmazhatja ezeket a szimbólumokat egyszerű szövegként.
Az encodeURI egy teljes, működőképes állapotban tartandó címhez való. Békén hagyja a szerkezeti karaktereket, így a perjelek, kettőspontok és kérdőjelek, amelyek összetartják az URL-t, épek maradnak. Akkor használd, ha egy teljes URL-ed van, és csak a szóközöket vagy nem ASCII karaktereket akarod eltávolítani; az encodeURIComponent-hez nyúlj, amikor egy nagyobb URL-be illesztesz be egy értéket. Egyszerű ökölszabály: a teljes linket az encodeURI-val kódold, a beillesztett részeket pedig az encodeURIComponent-tel.
Minden a gépeden marad
Ez az eszköz teljes egészében a böngésződben fut. A beillesztett szöveget ugyanazokkal a szabványos rutinokkal helyben kódolja vagy dekódolja, és soha nem utazik szerverre, ami biztonságossá teszi tokenekhez, aláírt paraméterekhez vagy bármi máshoz, amit inkább nem küldenél át a hálózaton. Ha más szövegátalakításokkal is dolgozol, a Base64 konverter közvetlenül mellette található, és a teljes fejlesztői eszközkészletünket is átböngészheted további mindennapi segédeszközökért.
Gyakran ismételt kérdések
Mit jelent a %20 egy URL-ben?
Ez egy kódolt szóköz. A szóköz karakter nem engedélyezett szó szerint egy URL-ben, ezért egy százalékjel és a hexadecimális 20 érték váltja fel, ami a szóköz byte-értéke.
Miért látok néha pluszjelet %20 helyett?
Az application/x-www-form-urlencoded típusú HTML űrlapadat a szóközöket történelmi konvenció szerint pluszjellel kódolja. Egy normál útvonalban vagy lekérdezésben a szóköz %20-ra kódolódik. Mindkettő a saját kontextusában szóközzé fejtődik vissza.
Mikor használjam az encodeURIComponent-et az encodeURI helyett?
Az encodeURIComponent-et egyetlen, egy URL-be beillesztett érték esetén használd, például egy lekérdezési paraméternél, mert a fenntartott karaktereket is kódolja. Az encodeURI-t egy teljes cím esetén, amikor meg akarod őrizni az azt összetartó perjeleket, kettőspontokat és kérdőjeleket.
Megváltoztatja az URL-kódolás az adatom jelentését?
Nem. A kódolás teljesen visszafordítható. Az eredmény dekódolása pontosan az eredeti szöveget adja vissza, byte-ra pontosan, amíg mindkét oldalon ugyanazt a karakterkészletet használják.
Hogyan kezeli az eszköz a nem ASCII karaktereket, mint az ékezetek vagy emojik?
Ezeket előbb UTF-8 byte-okká alakítja, majd minden byte a saját százalékos hármasává válik. Egyetlen ékezetes betű vagy emoji így akár több hármassá is kibővülhet a kódolt kimenetben.
Elküldi ez az eszköz a szövegemet egy szervernek?
Nem. A kódolás és a dekódolás teljes egészében a böngésződben zajlik. Semmi, amit beillesztesz, nem kerül feltöltésre, így biztonságosan használható privát vagy érzékeny karakterláncokkal is.