Kodowanie i dekodowanie URL wyjaśnione dla deweloperów
Wpisz spację do adresu URL albo cyrylickie słowo, albo znak ampersand należący do Twoich danych, a nie do samego adresu, a coś musi ustąpić. Sieć gwarantuje bezpieczny transport wyłącznie dla małego, przewidywalnego zestawu znaków ASCII. Wszystko inne musi być opakowane w format, co do którego routery, serwery i przeglądarki są zgodne. Tym formatem jest kodowanie procentowe, powszechniej zwane kodowaniem URL, a ta strona pozwala konwertować tekst w obu kierunkach bezpośrednio w przeglądarce.
Czym właściwie jest kodowanie procentowe
Reguła jest mechaniczna i łatwa do zapamiętania. Każdy znak, który nie może pojawić się dosłownie, jest zastępowany znakiem % po którym następują dwie cyfry szesnastkowe określające wartość bajtu tego znaku. Spacja staje się %20. Znak plus staje się %2B. Znak numeru staje się %23. Gdy znak odwzorowuje się na kilka bajtów, jak robi to większość tekstu spoza ASCII w kodowaniu UTF-8, po prostu otrzymujesz kilka trojaczków z rzędu: znak euro zamienia się w %E2%82%AC. Dekodowanie odwraca ten proces, czytając każdy trojaczek z powrotem do oryginalnego bajtu.
Ta konwencja jest zdefiniowana w specyfikacji URI (RFC 3986) i jest celowo nudna. Chodzi właśnie o nudę. Każdy poprawnie zachowujący się klient i serwer HTTP na świecie implementuje te same reguły, więc poprawnie zakodowany odnośnik trafia bez zmian wszędzie indziej.
Dlaczego to kodowanie musi istnieć
Adresy URL zawierają dwa rodzaje znaków o bardzo różnych zadaniach. Znaki zarezerwowane, takie jak /, ?, #, &, = i :, mają charakter strukturalny. Informują parser, gdzie kończy się ścieżka i zaczyna ciąg zapytania, albo gdzie kończy się jeden parametr i zaczyna następny. Jeśli Twoje rzeczywiste dane zawierają jeden z tych symboli, musi on być zakodowany, by parser nie pomylił go z interpunkcją. Numer zamówienia jak A&B/2024 wrzucony wprost do ciągu zapytania zostałby zinterpretowany jako dwa parametry i segment ścieżki.
Są też znaki niebezpieczne i spoza ASCII: spacje, cudzysłowy, nawiasy kątowe, litery akcentowane, emoji — wszystko poza zakresem zwykłego ASCII. Te znaki nie powinny pojawiać się dosłownie w adresie URL, albo dlatego, że ulegają zniekształceniu w trakcie transmisji, albo dlatego, że nie mają zdefiniowanej reprezentacji. Ich zakodowanie sprawia, że odnośniki są czyste i przewidywalne, zamiast zdawać wynik na łut szczęścia.
Gdzie to kodowanie pojawia się w prawdziwej pracy
Ciągi zapytań to klasyczny przypadek. Każda wartość dołączona do ?klucz=... powinna być zakodowana, żeby dane wprowadzone przez użytkownika nie mogły zniszczyć struktury. To samo dotyczy przesyłania formularzy HTML jako application/x-www-form-urlencoded, gdzie przeglądarka koduje wartości pól automatycznie (i ze względów historycznych zamienia spacje na +, a nie %20). Napotkasz to też podczas budowania odnośników wskazujących na strony z tytułami w językach innych niż łaciński, przy ręcznym konstruowaniu żądań API, przy przekazywaniu celów przekierowania jako parametrów i przy debugowaniu, dlaczego żądanie wyglądające poprawnie w pasku adresu dociera zniekształcone do serwera.
encodeURI a encodeURIComponent
JavaScript udostępnia dwa enkodery i wybranie złego to częsty błąd. Różnica polega na zakresie działania. encodeURIComponent służy do kodowania pojedynczego elementu danych, na przykład jednej wartości zapytania. Koduje niemal wszystko, w tym znaki zarezerwowane /, ?, :, @, &, =, + i #. Tego właśnie potrzebujesz, gdy dane mogą zawierać te symbole jako zwykły tekst.
encodeURI przeznaczony jest dla całego adresu, który ma dalej działać. Pozostawia znaki strukturalne w spokoju, więc ukośniki, dwukropki i znaki zapytania trzymające URL razem przeżywają tę operację. Używaj go, gdy masz pełny adres URL i chcesz jedynie oczyścić spacje lub znaki spoza ASCII; sięgaj po encodeURIComponent za każdym razem, gdy wstawiasz wartość do większego adresu URL. Prosta reguła: koduj cały odnośnik za pomocą encodeURI, koduj wstawiane części za pomocą encodeURIComponent.
Wszystko pozostaje na Twoim urządzeniu
To narzędzie działa w całości w przeglądarce. Wklejony tekst jest kodowany lub dekodowany lokalnie przy użyciu standardowych procedur i nigdy nie trafia na serwer, co sprawia, że jest bezpieczne do użycia z tokenami, podpisanymi parametrami lub czymkolwiek innym, czego wolisz nie wysyłać przez sieć. Jeśli pracujesz z innymi transformacjami tekstu, konwerter Base64 jest tuż obok, a pełen zestaw narzędzi deweloperskich możesz przeglądać w poszukiwaniu kolejnych pomocników na co dzień.
Najczęściej zadawane pytania
Co oznacza %20 w adresie URL?
To zakodowana spacja. Znak spacji nie może pojawić się dosłownie w adresie URL, więc jest zastępowany znakiem procenta i wartością szesnastkową 20, która odpowiada wartości bajtu spacji.
Dlaczego czasem widzę znak plus zamiast %20?
Dane formularzy HTML typu application/x-www-form-urlencoded ze względów historycznych kodują spacje jako znak plus. W normalnej ścieżce lub zapytaniu spacja jest kodowana jako %20. Oba warianty dekodują się z powrotem do spacji w odpowiednim kontekście.
Kiedy powinienem użyć encodeURIComponent zamiast encodeURI?
Używaj encodeURIComponent dla pojedynczej wartości wstawianej do adresu URL, np. parametru zapytania, ponieważ koduje też znaki zarezerwowane. Używaj encodeURI dla kompletnego adresu, gdy chcesz zachować ukośniki, dwukropki i znaki zapytania trzymające go w całości.
Czy kodowanie URL zmienia znaczenie moich danych?
Nie. Kodowanie jest w pełni odwracalne. Zdekodowanie wyniku daje dokładnie oryginalny tekst, bajt po bajcie, o ile na obu końcach używany jest ten sam zestaw znaków.
Jak obsługiwane są znaki spoza ASCII, takie jak litery akcentowane lub emoji?
Są najpierw zamieniane na bajty UTF-8, a następnie każdy bajt staje się własnym procentowym trojaczkiem. Pojedyncza litera akcentowana lub emoji może więc rozwinąć się w kilka trojaczków w zakodowanym wyjściu.
Czy mój tekst jest wysyłany na serwer podczas korzystania z tego narzędzia?
Nie. Kodowanie i dekodowanie odbywa się w całości w przeglądarce. Nic, co wkleisz, nie jest przesyłane, więc narzędzie jest bezpieczne do użycia z prywatnymi lub poufnymi ciągami znaków.