URL: кодирование / декодирование

Для чего нужен кодировщик и декодировщик URL

Как только вы помещаете произвольный текст в веб-адрес, часть этого текста становится опасной: пробел, амперсанд, вопросительный знак, косая черта или нелатинский символ могут изменить значение URL или вовсе его сломать. Этот инструмент применяет процентное кодирование к тексту, чтобы его можно было безопасно вставить в ссылку, строку запроса, параметр перенаправления или вызов API, а также декодирует процентно-кодированные строки обратно в понятный человеку текст. Вы обращаетесь к нему, когда вручную собираете URL, разбираетесь, почему параметр запроса приходит искажённым на сервер, читаете перенаправление OAuth или копируете значение из адресной строки, полной последовательностей %20 и %2F, и просто хотите узнать, что там написано.

Как работает процентное кодирование

Процентное кодирование заменяет небезопасный символ знаком процента, за которым следуют две шестнадцатеричные цифры значения байта этого символа. Пробел становится %20, косая черта — %2F, а амперсанд — %26. Для всего, что выходит за пределы ASCII, текст сначала кодируется как UTF-8, а затем экранируется каждый полученный байт — вот почему одна буква с диакритикой или эмодзи может развернуться в несколько пар %XX. Нетронутым остаётся лишь небольшой набор «незарезервированных» символов: буквы, цифры и четыре знака — дефис, подчёркивание, точка и тильда. Всё остальное является кандидатом на экранирование, а насколько агрессивно оно экранируется, зависит от того, какой из двух кодировщиков вы выберете.

Этот инструмент предоставляет оба кодировщика, которые действительно поставляет веб-платформа, и выбор правильного — это вся суть дела:

• Режим компонента соответствует encodeURIComponent и экранирует агрессивно, включая структурные символы &, =, ?, / и #. Используйте его для одного фрагмента данных, который живёт внутри URL, например для значения одного параметра запроса или одного сегмента пути.
• Режим целого URL соответствует encodeURI и намеренно оставляет структурные символы, такие как :, /, ?, & и #, нетронутыми. Используйте его, когда у вас уже есть полный, корректный URL и вы хотите лишь исправить лишние пробелы или символы вне ASCII, не разрушая его структуру.

Конкретные примеры и сценарии использования

Допустим, посетитель ищет fish & chips. В режиме компонента это становится fish%20%26%20chips, что можно безопасно разместить после ?q=, потому что амперсанд теперь экранирован и его больше нельзя спутать с разделителем параметров. Закодируйте весь адрес https://example.com/a b в режиме целого URL — и исправится только пробел, давая https://example.com/a%20b, тогда как :// и косые черты останутся целыми. Декодирование выполняет ту же логику в обратном направлении, поэтому вставка перехваченного перенаправления вроде next=%2Fdashboard%3Ftab%3Dbilling раскрывает понятный /dashboard?tab=billing, скрывавшийся под ним.

Советы и подводные камни

Классическая ошибка — выбор неправильного режима. Закодируйте целый URL в режиме компонента — и вы экранируете :// и каждую косую черту, получив строку, которая является корректным текстом, но уже не рабочей ссылкой. Закодируйте одно значение в режиме целого URL — и встроенный & или = останется буквальным и незаметно испортит окружающую строку запроса. Вторая ловушка — знак плюса: процентное кодирование не превращает пробелы в + — эта договорённость относится к отправке HTML-форм с использованием application/x-www-form-urlencoded, поэтому +, который вы декодируете, мог означать буквальный плюс или пробел в зависимости от того, откуда он взялся. Наконец, никогда не кодируйте дважды: пропуск уже закодированной строки через кодировщик ещё раз превращает каждый % в %25 и даёт бессмыслицу.

Всё остаётся на вашем устройстве

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