Кодирование и декодирование URL

Три правила, и выбрать не то — это и есть ошибка

Процентное кодирование заменяет символ на % и шестнадцатеричное значение его байта. Просто. Хлопоты начинаются оттого, что существует три разных мнения о том, какие символы надо заменять, и расходятся они ровно на тех символах, которые важны.

Инструмент показывает все три сразу именно поэтому. Прочитать их рядом быстрее, чем отвлечённо решать, какое из них вы имели в виду.

Ошибка, которую это предотвращает

Пусть поисковое значение — coffee & cake. Закодированное как компонент, оно превращается в coffee%20%26%20cake, и URL получается такой:

/search?q=coffee%20%26%20cake

Один параметр, значение цело. Закодированное через encodeURI, амперсанд остаётся собой:

/search?q=coffee%20&%20cake

Теперь сервер видит два параметра: q равен «coffee », и есть второй, пустой, по имени « cake». Никакой ошибки. Поиск просто тихо возвращает не то, и это как раз тот дефект, который переживает ревью, потому что URL выглядит нормально.

Плюс, который не плюс

Второй надёжный источник путаницы. В данных, закодированных как форма, + означает пробел, а настоящий плюс приходится писать %2B. Поэтому раскодирование C%2B%2B по правилу формы даёт C++, а раскодирование C++ даёт C — и два пробела, а название языка исчезло.

Больнее всего это бьёт по телефонным номерам. +44 20 7946 0958, отправленный через форму и раскодированный не тем правилом, превращается в 44 20 7946 0958, теряя код страны, — и нигде никакой ошибки.

Что делать вместо ручного кодирования

В JavaScript стройте строки запроса через URLSearchParams, а не склейкой. Он применяет к каждому значению нужное правило и справляется с повторяющимися ключами:

const url = new URL('https://example.com/search');
url.searchParams.set('q', 'coffee & cake');
url.searchParams.set('page', '2');
// https://example.com/search?q=coffee+%26+cake&page=2

В любом другом языке есть аналог, и любой из них надёжнее, чем решать посимвольно. Эта страница нужна для случаев, когда вы читаете присланный кем-то URL или разбираете тот, что уже сломался.

Как читать закодированный URL

Несколько последовательностей стоит узнавать в лицо — они попадаются в логах постоянно:

Особенно стоит знать %2520: это %20, закодированный второй раз. Обычно это значит, что значение прошло через два слоя, каждый из которых его закодировал, и служит подписью цепочки перенаправлений или прокси, делающего что-то не то.

Смежное

Для кодирования байтов, а не экранирования текста, Base64 — это другая задача. Если раскодированное значение окажется JSON, его прочтёт форматтер, а если это токен — декодер JWT.