URL Парсер / Инспектор
Вставьте один или несколько полных URL-адресов (по одному на строку), чтобы разбить каждый из них на свой протокол, хост, путь, строку запроса и фрагмент с декодированием каждого параметра запроса.
Ученица копирует веб-адрес из онлайн-формы и видит текст вроде science%20project%20notes. А начинающий разработчик разбирает запрос к API и замечает, что амперсанд внутри поискового значения выглядит как %26. Адрес работает, но читать его и искать в нём ошибки тяжело.
Инструмент URL-декодирования возвращает процентные последовательности обратно в те символы, которые за ними стоят. Например, %20 обычно превращается в пробел, а %26 — в амперсанд.
Декодирование выручает, когда нужно разобрать ссылку, изучить параметры запроса, понять устройство веб-кодирования или найти причину неправильного запроса. Делать это надо внимательно: зарезервированные символы после декодирования способны изменить саму структуру адреса.
Инструмент не решает, безопасен ли адрес назначения, верен ли он и разрешён ли к нему доступ. Он только меняет представление закодированных символов. Хост, путь, параметры и раскодированные значения ученикам и разработчикам всё равно приходится проверять самим.
Как выглядит URL-кодирование
Адреса используют определённые символы, чтобы отделять свои части друг от друга. Вопросительный знак может начинать строку запроса, амперсанд — разделять параметры, а знак решётки — обозначать фрагмент.
Если такой символ должен появиться как данные, а не как структурный разделитель, его кодируют процентом. За знаком процента идут две шестнадцатеричные цифры, обозначающие значение байта.
| Закодированное значение | Раскодированный символ | Обычное назначение |
|---|---|---|
%20 |
Пробел | Разделяет слова внутри значения |
%21 |
! |
Восклицательный знак |
%23 |
# |
Решётка или метка фрагмента |
%26 |
& |
Амперсанд или разделитель параметров |
%2B |
+ |
Знак плюса |
%2F |
/ |
Косая черта или разделитель пути |
%3A |
: |
Двоеточие |
%3D |
= |
Знак равенства или разделитель параметров |
%3F |
? |
Вопросительный знак или метка запроса |
Регистр шестнадцатеричных букв в процентных последовательностях значения не имеет: %2F и %2f обозначают один и тот же байт.
Как раскодировать адрес
- Скопируйте закодированный адрес или значение. Сохраните каждый знак процента вместе с идущей за ним парой символов.
- Определите, какую часть вы разбираете. Решите, это целый адрес, путь, имя параметра или его значение.
- Вставьте её в инструмент URL-декодирования. Убедитесь, что текст скопирован целиком.
- Запустите декодирование. Инструмент преобразует те процентные последовательности, которые поддерживает.
- Посмотрите на результат как на текст. Не открывайте незнакомый адрес не глядя.
- Сравните структуру и данные. Обратите внимание, меняют ли раскодированные вопросительные знаки, амперсанды, косые черты и знаки равенства вид адреса.
- Проверьте символы других языков. Убедитесь, что использовалась нужная кодировка символов.
- Сохраните исходный текст. Он пригодится, если придётся разбираться с двойным кодированием или неверным шагом декодирования.
Сначала разберитесь в частях адреса
Возьмём такой пример:
https://example.edu/search?q=water%20cycle&level=grade%206#resultsЕго основные части такие:
- Схема:
https - Хост:
example.edu - Путь:
/search - Запрос:
q=water%20cycle&level=grade%206 - Фрагмент:
results
Значения запроса раскодируются как «water cycle» и «grade 6». Структурный амперсанд между параметрами не стоит путать с амперсандом, закодированным внутри значения.
Декодируйте нужную часть
Разработчики часто наживают себе проблемы, раскодировав адрес целиком там, где следовало взять одну-единственную часть. Зарезервированные символы играют разные роли в зависимости от того, где они стоят.
Допустим, в запросе есть такое:
?topic=research%26writingЗакодированное значение обозначает:
research&writingАмперсанд здесь — часть значения темы. Если раскодировать весь запрос, а потом разобрать его неправильно, этот амперсанд легко принять за разделитель, который вводит ещё один параметр.
Надёжное приложение разбирает адрес по его структуре и декодирует каждую часть подходящим программным интерфейсом для работы с URL, а не произвольной заменой строк.
Практикум по разбору адресов
Шаг 1. Начните с читаемой ссылки
Класс разбирает вот это:
https://example.edu/library?topic=space%20scienceУченики находят хост, путь, имя параметра и закодированное значение.
Шаг 2. Раскодируйте только значение
Значение space%20science превращается в space science. Ученики объясняют, почему в ссылке, которой делятся с другими, обычно не пишут пробел напрямую.
Шаг 3. Введите зарезервированные символы
Учитель даёт такой пример:
?title=Design%20%26%20TechnologyРаскодированный заголовок выглядит так: Design & Technology. Ученики видят, что закодированный амперсанд принадлежит заголовку, а не разделяет параметры.
Шаг 4. Пройдите путь в обратную сторону
С помощью инструмента URL-кодирования ученики готовят новое значение, затем раскодируют его и сверяют результат.
Шаг 5. Найдите ошибку
В одной из последовательностей встречается незавершённый процентный код вроде %2. Ученики объясняют, почему после знака процента ожидаются именно две шестнадцатеричные цифры.
Примеры из практики
1. Чтение параметров поиска
Ученик копирует ссылку на поиск в библиотеке, где закодировано сразу несколько слов. Видимый адрес разобрать почти невозможно.
Он раскодирует значения запроса и убеждается, какие слова и фильтры туда попали. Хост проверяется до того, как ссылку открывают.
Так ученик понимает, как сайт переносит сведения о поиске со страницы на страницу.
2. Разбор запроса к API
Начинающий разработчик отправляет запрос с названием курса, в котором есть амперсанд. Сервер получает это название как два отдельных параметра.
Заглянув в исходный запрос, разработчик видит, что амперсанд не был закодирован как данные. Значение готовят стандартным интерфейсом работы с адресами и пробуют снова.
Декодер помогает понять запрос, но по-настоящему чинит дело не ручная замена, а структурная работа с URL.
3. Поиск причины нерабочей ссылки
Учительнице присылают ссылку на классный документ, но по ней сообщается, что файл не найден.
Адрес разбирают и раскодируют. Выясняется, что в имени файла стоит косая черта, которую могли принять за разделитель пути, либо пробел скопировался неверно.
Вместо того чтобы вслепую править чужой закрытый адрес, учительница просит у владельца документа новую ссылку для доступа.
4. Как устроена отправка формы
Ученики делают простую форму поиска и смотрят на адрес после отправки текста с пробелами и знаками препинания.
Они раскодируют значения параметров и сравнивают их с тем, что вводили в форму. Класс обсуждает, почему браузеры кодируют значения, прежде чем поместить их в адрес.
Настоящие пароли, ученические записи и личные ответы в упражнении не используются.
5. Проверка ссылок из аналитики
В ссылке из школьной рассылки несколько параметров отслеживания. Учитель хочет понять, что именно в ней передаётся, прежде чем делиться ею.
Адрес разбивают на параметры и раскодируют их значения. Лишние значения отслеживания убирают только тогда, когда это не ломает нужный адрес.
Готовую ссылку проверяют, а не считают рабочей просто потому, что её поправили вручную.
6. Знакомство с многоязычным кодированием
Класс информатики пробует поставить в адрес короткую фразу не на английском. В закодированном виде получается несколько процентных последовательностей, потому что символы UTF-8 могут занимать не один байт.
Ученики раскодируют всю последовательность и сверяют её с исходной фразой. Стоит убрать один закодированный байт — и появится символ замены или недопустимый текст.
Занятие показывает, что видимый символ далеко не всегда соответствует одному закодированному байту.
7. Обнаружение двойного кодирования
Разработчик ждёт пробел, а видит %2520. Последовательность %25 обозначает знак процента, поэтому один проход декодирования даёт %20, а следующий может дать пробел.
Он прослеживает, где значение закодировали дважды. Поток данных исправляют, вместо того чтобы снова и снова раскодировать каждый ввод.
8. Проверка адреса переадресации
В ссылке внутри параметра вроде redirect или next спрятан ещё один закодированный адрес.
Пользователь раскодирует значение как обычный текст и до открытия смотрит, на какой хост оно ведёт. Закодированный адрес не заслуживает доверия только оттого, что его конечную цель трудно прочитать.
URL-декодирование в сравнении с другими декодерами
| Исходные данные | Вероятная кодировка | Подходящий инструмент | Пример результата |
|---|---|---|---|
lesson%20notes |
Процентное кодирование URL | URL-декодирование | lesson notes |
<p> |
Сущности HTML | Декодирование HTML | <p> |
SGVsbG8= |
Base64 | Декодирование Base64 | Hello |
u003F |
Escape-последовательность Unicode | Разборщик JSON или самого языка | ? |
Для ссылок на сущности берите инструмент декодирования HTML, а инструмент декодирования Base64 — только когда точно известно, что данные записаны в этом формате.
Пробелы и плюсы
Пробел обычно записывают как %20. В кодировании запроса по правилам форм плюс тоже может читаться как пробел.
Отсюда важное различие:
class%20notesобычно раскодируется вclass notes.class+notesв контексте запроса формы может раскодироваться вclass notes.- Настоящий знак плюса иногда приходится кодировать как
%2B.
Пользуйтесь тем способом декодирования, который рассчитан на конкретную часть адреса и конкретный формат. Декодер пути и декодер запроса формы вполне могут обходиться с плюсом по-разному.
Многобайтовые символы
Процентное кодирование работает с байтами. Символ за пределами базового ASCII может занимать несколько закодированных байтов.
Скажем, буква с диакритикой или арабский символ появляются как цепочка из нескольких процентных кодов. Все нужные байты должны остаться на своих местах и быть прочитаны в правильной кодировке.
Если в результате видны символы замены, проверьте, не случилось ли следующее:
- Один из закодированных байтов потерялся.
- Последовательность раскодировали в неверной кодировке.
- Текст скопировали не полностью.
- Значение раскодировали лишний раз.
- Исходные данные уже были повреждены.
Какие задачи это решает
- В адресе стоят нечитаемые процентные последовательности.
- Ученику нужно разобрать параметры поиска.
- В значении запроса к API закодированы пробелы или знаки препинания.
- Похоже, что в присланной ссылке спрятан ещё один закодированный адрес.
- Разработчик подозревает двойное кодирование.
- На уроке программирования надо разобрать отправку формы.
- Многоязычный путь или параметр трудно прочитать.
- В нерабочей ссылке может быть неправильно закодированное значение.
Частые ошибки при декодировании адресов
Раскодировать адрес целиком, не разобравшись в нём
После декодирования зарезервированные символы способны изменить структуру. Разделите адрес на части и раскодируйте нужное значение.
Декодировать раз за разом
Повторное декодирование превращает прежде безобидные данные в настоящие разделители или неожиданные пути. Выясните, откуда взялось несколько слоёв кодирования.
Заменять вручную через поиск и замену
Замена %20 на пробел не покрывает ни все закодированные символы, ни последовательности UTF-8, ни испорченный ввод, ни правила для плюса. В коде используйте полноценный разборщик адресов или стандартный интерфейс.
Открывать незнакомый раскодированный адрес
Сначала раскодируйте его как текст. Посмотрите на схему, имя хоста, путь и параметры, а потом уже решайте, заходить ли туда.
Путать кодирование URL с кодированием HTML
%26 и & в разных контекстах оба обозначают амперсанд. Выбирайте декодер по тому представлению, которое перед вами на самом деле.
Не замечать неверные процентные последовательности
За знаком процента должны идти две шестнадцатеричные цифры. Незавершённые или неверные последовательности обычно говорят о повреждённом вводе.
Помещать пароли в адрес
Адреса попадают в историю браузера, журналы, аналитику, снимки экрана и пересылаемые сообщения. Учётным данным в строке запроса не место.
О безопасности
В раскодированных значениях встречаются символы с особым смыслом. Раскодированная косая черта влияет на путь, амперсанд меняет параметры, а угловые скобки превращаются в разметку, если их неаккуратно вставить в страницу.
Приложениям стоит:
- Разбирать адреса стандартными интерфейсами работы с URL.
- Декодировать только ту часть, которая нужна.
- Проверять ожидаемые имена и значения параметров.
- Ограничивать список адресов для переадресации.
- Не собирать запросы к базе данных и команды оболочки из непроверенного ввода.
- Экранировать вывод под тот контекст, где он показывается.
- При необходимости отвергать испорченные последовательности.
- Записывать ошибки, не раскрывая при этом чувствительных данных.
Декодирование — это не очистка. Оно показывает представленные символы, но не решает, безопасны ли они для HTML, файловых путей, запросов к базе данных или переадресаций.
Приватность и ответственное использование
В адресе могут оказаться поисковые слова, идентификаторы документов, адреса почты, коды классов, имена файлов, данные отслеживания и многое другое. Декодирование делает всё это читаемым, но ничего оттуда не убирает.
Не вставляйте во внешний инструмент закрытые школьные ссылки, токены восстановления, подписанные адреса, ссылки на ученические записи и данные для входа. На уроках и при показе разбора заменяйте чувствительные значения выдуманными.
Прежде чем показать кому-то снимок экрана с раскодированным адресом, уберите имена учётных записей, внутренние хосты, токены и идентификаторы документов.
Практический пример для разработчиков
Начинающим лучше пользоваться готовыми интерфейсами для работы с адресами. В JavaScript значение запроса можно посмотреть так:
const url = new URL(
"https://example.edu/search?q=water%20cycle"
);
const query = url.searchParams.get("q");
console.log(query);
// water cycleТакой подход разбирает адрес и возвращает уже раскодированное значение параметра. Обычно это безопаснее и понятнее, чем вручную резать всю строку по каждому вопросительному знаку, амперсанду и знаку равенства.
Итоговый список проверок
- Исходный закодированный текст сохранён.
- Часть адреса, которую декодируют, определена.
- В процентных последовательностях стоят две верные шестнадцатеричные цифры.
- Плюсы прочитаны в подходящем контексте.
- Многобайтовые символы отображаются правильно.
- Раскодированные хост и адрес назначения проверены до открытия.
- Зарезервированные символы случайно не изменили задуманную структуру.
- Двойное кодирование прослежено, а не угадано.
- Ни пароли, ни токены, ни ученические записи не раскрыты.
- Код приложения по возможности работает через стандартные интерфейсы URL.
Похожие инструменты
Возьмите инструмент URL-кодирования, чтобы подготовить текст как часть адреса, а потом раскодируйте его и проверьте учебный пример.
Если во вводе есть сущности вроде &lt; или &quot;, воспользуйтесь инструментом декодирования HTML. Для заведомо base64-текста подойдёт инструмент декодирования Base64.
Правильно выбранный декодер избавляет от лишних преобразований и делает разбор ошибок надёжнее.
Напоследок
URL-декодирование превращает процентные последовательности в читаемые символы. Оно помогает ученикам понять устройство веб-адресов, а разработчикам — разобрать значения запросов, обращения к API, многоязычный текст, переадресации и случаи двойного кодирования.
Надёжнее всего определить часть адреса, раскодировать только нужное и сохранить исходный текст. Результат стоит считать данными, которые ещё предстоит проверить.
Читаемую раскодированную ссылку легче изучать, но сама по себе она не становится ни безопасной, ни правильной. Проверьте её структуру, адрес назначения, параметры, приватность и предполагаемую кодировку символов, прежде чем ею пользоваться.
