URL kódování a dekódování vysvětlené pro vývojáře
Zadejte do URL mezeru, cyrilické slovo nebo znak &, který patří k vašim datům, a ne k samotné adrese, a něco musí ustoupit. Web bezpečně zaručuje přenos jen pro malou, předvídatelnou množinu znaků ASCII. Všechno ostatní musí být zabaleno do formátu, na kterém se shodnou routery, servery i prohlížeče. Tímto formátem je procentní kódování, běžněji nazývané URL kódování, a tato stránka vám umožní text v obou směrech převádět přímo ve vašem prohlížeči.
Co procentní kódování skutečně je
Pravidlo je mechanické a snadno pochopitelné. Jakýkoliv znak, který se nemůže objevit doslovně, se nahradí znakem % následovaným dvěma hexadecimálními číslicemi, které vyjadřují hodnotu bajtu daného znaku. Mezera se stane %20. Znak plus se stane %2B. Křížek se stane %23. Když se znak mapuje na několik bajtů, jak je tomu u většiny neasciiového textu v UTF-8, dostanete jednoduše několik trojic za sebou: znak eura se promění na %E2%82%AC. Dekódování proces obrací, každou trojici čte zpět jako její původní bajt.
Tato konvence je definována ve specifikaci URI (RFC 3986) a je záměrně nezajímavá. Nezajímavost je smyslem. Každý slušně napsaný HTTP klient a server na planetě implementuje stejná pravidla, takže odkaz správně zakódovaný na jednom místě dorazí neporušený všude jinde.
Proč musí existovat
URL nesou dva druhy znaků s velmi odlišnou úlohou. Vyhrazené znaky jako /, ?, #, &, = a : mají strukturální funkci. Říkají parseru, kde končí cesta a začíná řetězec dotazu, nebo kde jeden parametr končí a začíná další. Pokud vaše skutečná data obsahují některý z těchto symbolů, musí být zakódován, aby ho parser nezaměnil za interpunkci. Referenční číslo objednávky jako A&B/2024 vložené do řetězce dotazu v syrové podobě by bylo mylně vyloženo jako dva parametry a segment cesty.
Pak jsou tu nebezpečné a neasciiové znaky: mezery, uvozovky, ostré závorky, znaky s diakritikou, emoji, cokoliv mimo prostý rozsah ASCII. Ty nemají v URL co dělat doslovně, ať už proto, že se při přenosu poškodí, nebo protože nemají definovanou reprezentaci. Jejich zakódování udrží odkazy čisté a předvídatelné namísto ponechání výsledku na náhodě.
Kde se v praxi objevuje
Klasickým případem jsou řetězce dotazu. Každá hodnota, kterou připojíte za ?key=..., by měla být zakódována, aby uživatelský vstup nemohl narušit strukturu. Totéž platí pro odeslání HTML formulářů typu application/x-www-form-urlencoded, kde prohlížeč hodnoty polí kóduje automaticky (a z historických důvodů mění mezery na + místo %20). Setkáte se s tím i při vytváření odkazů na stránky s nelatinskými názvy, při ručním sestavování API požadavků, při předávání cílů přesměrování jako parametrů a při ladění toho, proč požadavek, který vypadá v adresním řádku v pořádku, dorazí na server pokažený.
encodeURI oproti encodeURIComponent
JavaScript nabízí dva kodéry a výběr toho nesprávného je běžná chyba. Rozdíl je v rozsahu. encodeURIComponent slouží pro jeden konkrétní kus dat, například jednu hodnotu dotazu. Zakóduje téměř vše, včetně vyhrazených znaků /, ?, :, @, &, =, + a #. Přesně to chcete, když data smí obsahovat tyto symboly jako běžný text.
encodeURI je určen pro celou adresu, kterou chcete zachovat funkční. Ponechává strukturální znaky beze změny, takže lomítka, dvojtečky a otazníky, které URL drží pohromadě, přežijí. Použijte ho, když máte celou URL a chcete pouze vyčistit mezery nebo neasciiové znaky; k encodeURIComponent sáhněte vždy, když vkládáte hodnotu do větší URL. Jednoduché pravidlo: celý odkaz kódujte pomocí encodeURI, vkládané části kódujte pomocí encodeURIComponent.
Vše zůstává na vašem počítači
Tento nástroj běží zcela ve vašem prohlížeči. Vložený text se koduje nebo dekóduje lokálně pomocí stejných standardních rutin a nikdy necestuje na server, takže je bezpečný pro tokeny, podepsané parametry nebo cokoliv jiného, co byste raději neposílali po síti. Pokud pracujete s dalšími textovými transformacemi, hned vedle najdete převodník Base64, a pro další každodenní pomocníky můžete procházet celou sadu nástrojů pro vývojáře.
Často kladené otázky
Co znamená %20 v URL?
Jde o zakódovanou mezeru. Znak mezery není v URL povolen doslovně, proto je nahrazen znakem procenta a hexadecimální hodnotou 20, což je bajtová hodnota mezery.
Proč občas vidím znaménko plus místo %20?
Data HTML formuláře typu application/x-www-form-urlencoded z historických důvodů kódují mezery jako znaménko plus. V běžné cestě nebo dotazu se mezera kóduje jako %20. Obojí se ve svém příslušném kontextu dekóduje zpět na mezeru.
Kdy mám použít encodeURIComponent místo encodeURI?
encodeURIComponent použijte pro jednu hodnotu, kterou vkládáte do URL, například parametr dotazu, protože kóduje i vyhrazené znaky. encodeURI použijte pro celou adresu, když chcete zachovat lomítka, dvojtečky a otazníky, které ji drží pohromadě.
Mění URL kódování význam mých dat?
Ne. Kódování je plně reverzibilní. Dekódování výsledku vrátí přesně původní text, bajt po bajtu, pokud se na obou stranách používá stejná znaková sada.
Jak se zachází se znaky mimo ASCII, jako je diakritika nebo emoji?
Nejprve se převedou na bajty UTF-8 a poté se každý bajt stane vlastní procentní trojicí. Jedno písmeno s diakritikou nebo emoji se tak může v zakódovaném výstupu rozvinout do několika trojic.
Odesílá se můj text na server, když použiji tento nástroj?
Ne. Kódování a dekódování probíhá zcela ve vašem prohlížeči. Nic, co vložíte, se neodesílá, takže je bezpečné jej používat i pro soukromé nebo citlivé řetězce.