Декодирование HTML

Ученик копирует пример кода с учебной платформы и видит текст вроде <h1> вместо настоящего тега <h1>. В другом проекте учитель выгружает список вопросов и обнаруживает, что апострофы, кавычки, амперсанды и математические знаки превратились в какие-то незнакомые ссылки на символы.

Скорее всего, содержимое закодировали в HTML, чтобы особые символы можно было сохранить или показать, а браузер не принял их за разметку страницы. Инструмент декодирования HTML возвращает такие сущности обратно в те символы, которые за ними стоят.

Декодирование помогает прочитать экранированный текст, разобрать сохранённые примеры кода, найти причину повторного кодирования и привести в порядок импортированное содержимое. Обращаться с ним всё же нужно осторожно: в раскодированном тексте могут оказаться теги HTML или скрипты, которые следует показать обычным текстом, а не выполнить на странице.

Здесь разобрано, что такое сущности HTML, как устроено декодирование, где оно по-настоящему выручает в учёбе и разработке и как проверить результат, не нажив проблем с безопасностью.

Как выглядит текст, закодированный в HTML

Часть символов HTML занял под собственную разметку. Знаки «меньше» и «больше» обрамляют теги, амперсанд открывает ссылку на символ, а кавычки обычно окружают значения атрибутов.

Когда эти символы должны появиться как обычный текст, их записывают сущностями HTML:

Ссылки на сущности бывают именованными, как ©, и числовыми, как ©. И те и другие дают один и тот же знак копирайта.

Кодирование и декодирование — противоположные задачи

Кодирование HTML превращает особые символы в ссылки на сущности. Декодирование HTML возвращает эти ссылки обратно в читаемые символы.

Исходно:
<p>Tom & Sara</p>

Закодировано:
&lt;p&gt;Tom &amp; Sara&lt;/p&gt;

Раскодировано:
<p>Tom & Sara</p>

Инструмент кодирования HTML нужен, когда теги или знаки должны показаться текстом. Инструмент декодирования HTML делает обратное — когда эти сущности нужно разобрать или вернуть в исходный вид.

Ни одна из операций не решает, можно ли доверять получившемуся содержимому. Кодирование и декодирование — это про форму записи, а не про автоматическое одобрение с точки зрения безопасности.

Как раскодировать сущности HTML

1. Скопируйте закодированный текст. Целиком, вместе с амперсандами и точками с запятой в ссылках на сущности.
2. Вставьте его в инструмент декодирования HTML. Проверьте, что начало и конец текста скопировались верно.
3. Запустите декодирование. Инструмент превратит распознанные сущности в соответствующие символы.
4. Просмотрите результат как обычный текст. Поищите теги HTML, скрипты, неожиданные ссылки и покорёженные символы.
5. Сравните с исходником. Убедитесь, что обычный текст и нужные знаки остались на месте.
6. Скопируйте раскодированный результат. Вставляйте его только туда, где такому содержимому место.
7. Проверьте, куда он попадёт. Если результат уходит на страницу или в приложение, убедитесь, что там с ним обращаются безопасно.
8. Сохраните исходный текст. Он пригодится, если содержимое кодировали не один раз или раскодировали неправильно.

Вопрос для диагностики: какое декодирование вам нужно?

Не всякая нечитаемая строка состоит из сущностей HTML. Неверно выбранный декодер не даст ничего полезного.

Есть ли в тексте ссылки вроде < или "?

Тогда нужно декодирование HTML. Такие записи обозначают символы, которые встречаются в содержимом и разметке страницы.

Есть ли в тексте последовательности с процентом вроде %20 или %3F?

Похоже, это кодирование URL. Возьмите инструмент декодирования URL, а не HTML.

Похож ли текст на длинную мешанину букв, цифр, плюсов и косых черт?

Возможно, это Base64. Пользуйтесь инструментом декодирования Base64, когда точно знаете, что в источнике лежит текст в Base64.

Есть ли в тексте последовательности с обратной косой чертой вроде или u003C?

Возможно, текст экранирован для JSON или какого-то языка программирования. Разберитесь, что его породило, прежде чем выбирать способ декодирования.

Видны ли в тексте чёрные ромбы или символы-заменители?

Дело может быть в кодировке символов, в шрифте или в повреждённых данных, а вовсе не в сущностях HTML. Повторное декодирование HTML тут вряд ли поможет.

Реальные учебные и рабочие сценарии

1. Прочитать пример кода со страницы

Учитель готовит урок по HTML и нарочно кодирует теги, чтобы ученики их увидели, а браузер не принял за разметку.

Позже ученик копирует показанный пример в редактор кода, но в скопированном тексте по-прежнему ссылки на сущности. Он раскодирует пример и сохраняет как файл HTML.

Отформатировав его форматировщиком HTML, ученик разбирает структуру тегов и проверяет страницу в браузере.

2. Привести в порядок выгруженный банк вопросов

Учитель выгружает вопросы со старой платформы. В нескольких вместо амперсанда стоит &, а цитаты обрамлены ".

Сначала он сохраняет резервную копию выгрузки, потом пробует декодирование на небольшом куске. Результат сверяется с исходными вопросами, и только потом обрабатывается весь набор.

Такая осторожность не даёт второму проходу декодирования испортить текст, который и так был в порядке.

3. Найти двойное кодирование

Начинающий разработчик ждёт <, а на странице видит <. Похоже, исходный знак «меньше» закодировали дважды.

Исходный символ:
<

Закодирован один раз:
&lt;

Закодирован дважды:
&amp;lt;

Он прослеживает путь данных через форму, базу, шаблон и вывод в браузере. Вместо того чтобы наугад декодировать раз за разом, он находит место, где случилось второе кодирование.

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

4. Разобрать содержимое API или базы данных

Ученик получает ответ API, где текст статьи усыпан сущностями. Он раскодирует один фрагмент, чтобы понять, как это должно выглядеть для читателя.

Раскодированное значение он считает данными, а не вставляет автоматически как доверенный HTML. И заглядывает в описание API, чтобы выяснить, что лежит в поле: обычный текст, закодированная разметка или содержимое, которое нужно очищать.

Такое различение не даёт приложению спутать читаемый текст с исполняемым содержимым страницы.

5. Восстановить математические и научные знаки

В импортированном уроке знаки сравнения, греческие буквы и математические символы записаны числовыми ссылками. Читать исходник ученикам тяжело.

Учитель раскодирует копию и сверяет каждую формулу с исходным материалом. Со знаками особенно важно не ошибиться: перевёрнутое неравенство, потерянный минус или съехавшая степень меняют смысл задания.

После декодирования идёт проверка по существу — само по себе оно ничего не гарантирует.

6. Подготовить содержимое к переводу

В файле для перевода предложения перемешаны с сущностями HTML. Переводчику нужно видеть настоящую пунктуацию и при этом не сломать подстановки и разметку.

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

Раскодировать целый шаблон, не понимая его устройства, — верный способ испортить то, на что приложение рассчитывает.

7. Разобраться с комментариями пользователей

Школьный сайт показывает закодированный апостроф в комментарии ученика. Разработчик проверяет, закодировали ли комментарий при вводе, лежит ли он закодированным в базе и не кодируется ли он ещё раз при выводе.

Чинить он идёт поток данных, а не подставлять вызов декодирования на каждую страницу. Сохранённое содержимое, экранирование вывода и место показа разбираются по отдельности.

Так меньше шансов, что быстрая заплатка ради внешнего вида обернётся дырой в безопасности.

8. Сравнить видимый текст с исходной разметкой

Ученикам, изучающим веб-разработку, выдают один закодированный абзац и один уже отрисованный. Они раскодируют исходник, находят теги и объясняют, что создаёт структуру, а что является видимым содержимым.

Упражнение показывает: браузер разбирает разметку, а примерам кода как раз и нужно кодирование, чтобы остаться на виду.

Декодирование HTML и смежные инструменты

Какие проблемы это снимает

• Теги HTML показываются текстом сущностей вместо читаемых символов.
• Кавычки и апострофы выводятся закодированными ссылками.
• В импортированном содержимом вместо амперсанда стоит &.
• Пример кода, скопированный со страницы, так и остался экранированным.
• В выгрузке из базы попадаются именованные и числовые сущности.
• Похоже, содержимое закодировали дважды.
• На уроке нужно показать связь между исходником и отрисованным HTML.
• Нужно разобрать закодированное содержимое API или шаблона.

Частые ошибки при декодировании

Декодировать раз за разом

Один проход даст нужный текст, а следующий испортит то, что должно было остаться закодированным. Выясните, зачем данные кодировали и сколько преобразований с ними случилось.

Применять декодирование HTML к данным URL

Сущности HTML и процентное кодирование URL — разные форматы. Выбирайте декодер по тому, что у вас на самом деле перед глазами.

Выводить недоверенный раскодированный текст как HTML

В раскодированном содержимом могут оказаться теги, атрибуты событий, скрипты и опасные ссылки. Считайте недоверенный вывод текстом, пока его не очистили именно под то место, где он окажется.

Надеяться, что декодирование починит битые символы

Символы-заменители и нечитаемые буквы с диакритикой обычно идут от неверной кодировки, а не от сущностей HTML. Ищите причину в исходной кодировке.

Менять базу данных без резервной копии

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

Убирать сущности, нужные примерам кода

В учебном материале теги могут быть закодированы нарочно, чтобы остаться видимыми. Раскодировать их прямо на странице урока — значит заставить браузер их выполнить.

Раскодированный HTML и безопасность

Посмотрите на такой закодированный ввод:

<img src=x onerror="exampleFunction()">

После декодирования получается элемент изображения с атрибутом события. Если приложение вставит недоверенный раскодированный текст прямо в документ как HTML, браузер вполне может счесть его действующей разметкой.

Безопасное обращение зависит от места. Текст внутри абзаца, текст в атрибуте, данные внутри адреса и разметка, допустимая в визуальном редакторе, требуют разной защиты.

Ученикам стоит различать три разные вещи:

• Декодирование возвращает записанные символы.
• Экранирование готовит данные к безопасному показу в конкретном месте.
• Очистка убирает или разрешает определённую разметку по заданным правилам.

Подменять одно другим нельзя.

Рабочий порядок поиска причины

1. Запишите ровно тот текст, который отображается неправильно.
2. Найдите исходное значение до того, как страница его отрисует.
3. Определите формат: сущности HTML, кодирование URL, Base64 или что-то ещё.
4. Раскодируйте один безобидный пробный фрагмент.
5. Сравните результат с тем, что ожидалось.
6. Проследите, где значение создаётся, сохраняется, читается и показывается.
7. Выясните, не происходит ли кодирование больше одного раза.
8. Поправьте поток данных на нужной границе.
9. Проверьте обычную пунктуацию, примеры кода, текст на разных языках и заведомо вредоносный ввод.
10. Сделайте резервную копию, прежде чем менять сохранённое содержимое.

Такой порядок дольше, чем воткнуть наугад функцию декодирования, зато починка выходит надёжной.

Раскодированный HTML в первых проектах

Если в раскодированном выводе оказался настоящий HTML, который ученик собирается использовать, сохраните его в рабочий файл и отформатируйте форматировщиком HTML. И только потом, разобрав структуру, открывайте как страницу.

Обратите внимание на:

• Неожиданные теги скриптов.
• Атрибуты событий прямо в тегах.
• Картинки со сторонних адресов и следящие ресурсы.
• Формы, отправляющие данные куда-то на сторону.
• Скрытые элементы с непонятным содержимым.
• Ссылки на сомнительные адреса.
• Незакрытые теги и неправильную вложенность.
• Имена, адреса почты, токены и личные записи.

Не запускайте незнакомую раскодированную разметку просто из любопытства. Берите безобидные учебные образцы, а незнакомый код разбирайте вместе с опытным учителем или разработчиком.

Проверка точности в учебных материалах

Декодирование возвращает знаки, но не подтверждает, что знаки верные. Задача по математике с < раскодируется в «меньше», хотя автор вполне мог иметь в виду «больше».

В языковых материалах проверяйте апострофы, кавычки, буквы с диакритикой, неразрывные пробелы и направление знаков. В естественных науках и математике — операторы, единицы, верхние и нижние индексы, греческие буквы.

В уроках по коду сверьте раскодированные теги с задуманным примером. Потерянная косая черта в закрывающем теге или кавычка не на месте меняют поведение.

Приватность и ответственное использование

Декодирование HTML не убирает ни имён учеников, ни фотографий, ни оценок, ни адресов почты, ни данных для входа, ни школьных записей, ни личных комментариев. Оно лишь делает читаемым то, что уже лежало там в закодированном виде.

Не вставляйте во внешний декодер закрытые выгрузки из базы, чужие ответы на формы, токены доступа и записи об учениках. Перед проверкой замените всё чувствительное вымышленными примерами.

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

Частые вопросы

Коротко о главном

Декодирование HTML нужно там, где особые символы записали именованными или числовыми сущностями. Оно возвращает читаемую пунктуацию, спасает примеры кода, проясняет импортированное содержимое и помогает разобраться с двойным кодированием.

Сложность вовсе не в том, чтобы нажать кнопку. Она в том, чтобы определить формат, понять, зачем содержимое кодировали, и решить, как обращаться с результатом.

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