Кодировщик / Декодировщик HTML

Кодируйте текст в HTML-сущности или декодируйте HTML-сущности обратно в текст.

Входной текст

Как пользоваться Кодировщик / Декодировщик HTML

1
Введите текст или HTML
Вставьте обычный текст, который нужно экранировать, или HTML-сущности, которые нужно преобразовать обратно, в поле ввода.
2
Выберите кодирование или декодирование
Нажмите «Кодировать в HTML-сущности», чтобы преобразовать символы вроде < > & в безопасные сущности, или «Декодировать HTML-сущности», чтобы превратить сущности обратно в читаемые символы.
3
Просмотрите результат
Проверьте преобразованный результат в поле вывода и используйте «Поменять ввод/вывод», чтобы при необходимости выполнить обратное преобразование цепочкой.

4
Скопируйте результат
Нажмите «Копировать вывод», чтобы получить закодированный или декодированный текст, или «Очистить оба», чтобы сбросить поля.

Кодирование HTML: безопасное экранирование специальных символов

Что означает кодирование HTML

Кодирование HTML, также называемое экранированием HTML, преобразует символы, имеющие особое значение в HTML, в символьные ссылки, чтобы браузер отображал их как буквальный текст, а не интерпретировал как разметку. Браузер читает сырой < как начало тега, поэтому, чтобы показать на странице настоящий знак «меньше», вы должны вместо него написать ссылку <. Кодирование — это безопасный перевод между тем, что вы хотите показать, и тем, что браузер иначе выполнил бы.

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

Основные символы и их сущности

Пять символов покрывают почти любую потребность в экранировании. Амперсанд & становится & и должен идти первым в любом ручном преобразовании, потому что он начинает каждую сущность. Знак «меньше» < становится <, а знак «больше» > становится >, поскольку они ограничивают теги. Двойная кавычка " становится ", а одинарная кавычка или апостроф ' становится ' (или именованной ' в HTML5), что важно внутри значений атрибутов.

Правило «амперсанд первым» предотвращает тонкую ошибку. Если бы вы заменили < на < и только потом экранировали амперсанды, вы превратили бы свежезаписанный < в &lt; и показали бы на странице буквальный текст "<". Всегда кодируйте & перед остальными. Этот инструмент применяет преобразования в правильном порядке автоматически, поэтому вы никогда не попадёте в эту ловушку.

Разбор примера: отображение фрагмента кода

Представьте, что вы хотите, чтобы страница буквально показывала текст <a href="x">Tom & Jerry</a>, а не отрисовывала ссылку. Каждый специальный символ заменяется своей ссылкой. Открывающая угловая скобка становится <, закрывающая — >, двойные кавычки вокруг атрибута становятся ", а амперсанд между именами становится &.

Закодированный результат — <a href="x">Tom & Jerry</a>. Вставленный в файл HTML, браузер выводит исходный код видимо на экране, ровно так, как страница учебника или документации показывала бы пример разметки, вместо того чтобы превратить его в рабочий элемент якоря.

Почему кодирование предотвращает XSS

Межсайтовый скриптинг (XSS) — это атака, при которой злоумышленник внедряет HTML или JavaScript на страницу через поле, которое позднее отображается другим пользователям, например комментарий, имя пользователя или поисковый запрос. Если сайт вставляет этот недоверенный текст на страницу без экранирования, такая нагрузка, как тег script, выполняется в браузере жертвы с привилегиями сайта, что открывает кражу сессии и худшее.

Кодирование нейтрализует атаку в самом её корне. Когда опасные символы экранированы, внедрённый <script>alert(1)</script> сохраняется и отрисовывается как безобидный видимый текст — <script>alert(1)</script> — а не как исполняемый элемент. Самая надёжная защита от этого класса уязвимостей — кодировать в HTML каждый фрагмент недоверенных данных ровно в той точке, где он записывается на страницу.

Содержимое элемента против контекста атрибута

То, где вы размещаете данные, меняет, какие символы опасны, и одного правила экранирования недостаточно для каждого места. Внутри содержимого элемента — текста между открывающим и закрывающим тегом — критическими символами являются <, > и &. Внутри значения атрибута символ кавычки, ограничивающий атрибут, — это тот, который позволяет злоумышленнику вырваться из значения, поэтому там " и ' должны быть закодированы в дополнение к амперсанду.

Самая надёжная привычка — всегда заключать атрибуты в кавычки и кодировать соответствующий символ кавычки вместе с < > и &. Атрибут без кавычек гораздо труднее обезопасить, потому что тогда пробелы и многие другие символы могут вырваться из значения. Существуют также совершенно отдельные контексты — внутри блока script, блока style или атрибута URL, — где одного экранирования HTML недостаточно и вместо него требуется контекстно-специфичное кодирование.

Кодирование против декодирования и когда делать каждое

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

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

Частые ошибки, которых стоит избегать

Классическая ошибка — двойное кодирование: повторный прогон уже экранированного текста через кодировщик, который превращает & в &amp; и показывает вашим пользователям буквальный "&". Кодируйте ровно один раз и только на границе вывода. Близкий родственник — экранирование данных по пути в вашу базу данных и снова по пути из неё, что даёт тот же искажённый результат.

Другая частая ошибка — предположение, что экранирование HTML защищает каждый контекст. Оно не защищает данные, помещённые внутрь строки JavaScript, значения CSS или href, начинающегося с javascript:; им нужны собственные правила кодирования. Наконец, не пишите вручную частичный экранировщик, который забывает про амперсанд или кавычки атрибутов, — именно эти пробелы и есть места, где проскальзывают ошибки и XSS. Доверьте работу полному, правильно упорядоченному кодировщику.

Часто задаваемые вопросы

Какие символы кодируются в HTML-сущности?

Зарезервированные и специальные символы, такие как < (<), > (>), & (&) и кавычки, заменяются их именованными или числовыми HTML-сущностями. Это позволяет отображать символы буквально на странице, а не давать браузеру интерпретировать их как разметку.

Как кодирование помогает предотвращать XSS?

Преобразуя символы вроде < и > в сущности, любая разметка или теги скриптов, предоставленные пользователем, отображаются как видимый текст, а не выполняются. Кодирование недоверенного ввода перед вставкой в страницу — ключевая защита от межсайтового скриптинга (XSS).

Можно ли преобразовать сущности обратно в обычный текст?

Да. Кнопка «Декодировать HTML-сущности» обращает процесс, превращая сущности вроде & и ' обратно в исходные символы & и ', чтобы вы могли прочитать или повторно использовать необработанный текст.

Для чего нужна кнопка «Поменять местами»?

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

Отправляется ли мой ввод на сервер?

Нет. Кодирование и декодирование полностью выполняются в вашем браузере, поэтому текст и любой конфиденциальный HTML никогда не покидают ваше устройство. Инструмент бесплатен и не требует регистрации.