URL-кодирование и декодирование для разработчиков
Введите пробел в URL, или кириллическое слово, или амперсанд, который относится к данным, а не к самому адресу, — и что-то должно уступить. Веб гарантирует безопасную передачу только для небольшого предсказуемого набора символов ASCII. Всё остальное необходимо обернуть в формат, который одинаково понимают маршрутизаторы, серверы и браузеры. Этот формат называется процентным кодированием, или URL-кодированием, а данная страница позволяет конвертировать текст в любом направлении прямо в браузере.
Что такое процентное кодирование
Правило механическое и простое в понимании. Любой символ, который не может присутствовать в URL буквально, заменяется знаком %, за которым следуют две шестнадцатеричные цифры, обозначающие байтовое значение этого символа. Пробел становится %20, знак плюса — %2B, символ решётки — %23. Когда символ соответствует нескольким байтам, как это бывает с большинством не-ASCII текста в UTF-8, вы просто получаете несколько триплетов подряд: знак евро превращается в %E2%82%AC. Декодирование выполняет обратное: читает каждый триплет и возвращает исходный байт.
Это соглашение определено в спецификации URI (RFC 3986) и намеренно нединамично. Скука — это и есть цель. Каждый правильно работающий HTTP-клиент и сервер на планете реализует одни и те же правила, поэтому корректно закодированная ссылка в одном месте приходит нетронутой везде.
Почему это необходимо
URL несёт в себе два вида символов с совершенно разными функциями. Зарезервированные символы — такие как /, ?, #, &, = и : — структурные. Они сообщают парсеру, где заканчивается путь и начинается строка запроса, или где один параметр заканчивается и начинается следующий. Если ваши данные содержат один из этих символов, его необходимо закодировать, чтобы парсер не воспринял его как знак пунктуации. Ссылка на заказ вида A&B/2024, вставленная в строку запроса как есть, будет прочитана как два параметра и сегмент пути.
Есть также небезопасные и не-ASCII символы: пробелы, кавычки, угловые скобки, буквы с диакритикой, эмодзи — всё, что выходит за пределы обычного ASCII. Им нечего делать в URL в буквальном виде: одни искажаются при передаче, другие не имеют определённого представления. Их кодирование делает ссылки чистыми и предсказуемыми, а не оставляет результат на волю случая.
Где это встречается на практике
Классический случай — строки запроса. Каждое значение, добавляемое к ?key=..., должно быть закодировано, чтобы пользовательский ввод не мог сломать структуру. То же самое касается HTML-форм, отправляемых как application/x-www-form-urlencoded, где браузер кодирует значения полей автоматически (и по исторической традиции превращает пробелы в +, а не в %20). Вы также столкнётесь с этим при создании ссылок на страницы с нелатинскими заголовками, при ручном составлении API-запросов, при передаче адресов переадресации как параметров и при отладке запросов, которые выглядят нормально в адресной строке, но приходят к серверу в искажённом виде.
encodeURI против encodeURIComponent
В JavaScript есть два кодировщика, и выбор неправильного — распространённая ошибка. Разница — в области применения. encodeURIComponent предназначен для отдельного фрагмента данных, например одного значения параметра запроса. Он кодирует почти всё, включая зарезервированные символы /, ?, :, @, &, =, + и #. Это именно то, что нужно, когда данные могут законно содержать эти символы как обычный текст.
encodeURI предназначен для целого адреса, который должен оставаться рабочим. Он оставляет структурные символы нетронутыми, так что слэши, двоеточия и вопросительные знаки, удерживающие URL вместе, сохраняются. Используйте его, когда у вас уже есть полный URL и нужно лишь очистить пробелы или не-ASCII символы; прибегайте к encodeURIComponent, когда вставляете значение в больший URL. Простое правило: кодируйте всю ссылку с помощью encodeURI, а вставляемые части — с помощью encodeURIComponent.
Всё остаётся на вашем устройстве
Этот инструмент работает полностью в браузере. Вставленный текст кодируется или декодируется локально с помощью стандартных процедур и никогда не уходит на сервер — это безопасно для токенов, подписанных параметров и всего, что вы предпочли бы не передавать по сети. Если вы работаете с другими текстовыми преобразованиями, конвертер Base64 находится рядом, а полный набор инструментов разработчика поможет в повседневной работе.
Часто задаваемые вопросы
Что означает %20 в URL?
Это закодированный пробел. Символ пробела не допускается в URL в буквальном виде, поэтому он заменяется знаком процента и шестнадцатеричным значением 20, которое является байтовым значением пробела.
Почему иногда вижу знак плюса вместо %20?
HTML-данные формы типа application/x-www-form-urlencoded кодируют пробелы как знак плюса по исторической традиции. В обычном пути или запросе пробел кодируется как %20. В своём контексте оба декодируются обратно в пробел.
Когда использовать encodeURIComponent вместо encodeURI?
Используйте encodeURIComponent для одного значения, вставляемого в URL, например параметра запроса, — он кодирует и зарезервированные символы. Используйте encodeURI для полного адреса, когда хотите сохранить слэши, двоеточия и вопросительные знаки, удерживающие его вместе.
URL-кодирование изменяет смысл данных?
Нет. Кодирование полностью обратимо. Декодирование результата даёт в точности исходный текст, байт в байт, при условии что на обоих концах используется одна и та же кодировка символов.
Как обрабатываются не-ASCII символы — буквы с диакритикой или эмодзи?
Сначала они преобразуются в байты UTF-8, затем каждый байт получает свой процентный триплет. Одна буква с диакритикой или эмодзи может превратиться в несколько триплетов в закодированном виде.
Мой текст отправляется на сервер при использовании этого инструмента?
Нет. Кодирование и декодирование происходят полностью в браузере. Ничто из того, что вы вставляете, не загружается — это безопасно для приватных и конфиденциальных строк.