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

Вставьте текст, чтобы закодировать специальные символы как HTML-сущности, или вставьте HTML с сущностями, чтобы декодировать их обратно в читаемый текст. Выбирайте между именованными сущностями (&, <, ©), десятичными числовыми (©) или шестнадцатеричными (©) форматами. При необходимости кодируйте все символы, отличные от ASCII, для максимальной совместимости.

Кодировать все не-ASCII символы

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

Закодированный вывод

Как это работает

Что такое HTML-сущности?

HTML-сущности — это специальные текстовые коды для представления символов, которые имеют особое значение в HTML или не могут быть введены напрямую. Наиболее важны пять символов, зарезервированных в синтаксисе HTML: & (амперсанд) → &, < (меньше) → <, > (больше) → >, " (двойная кавычка) → " и ' (одинарная кавычка) → '. Если эти символы появляются в текстовом содержимом без кодирования, браузер может интерпретировать их как HTML-разметку, что приводит к ошибкам отображения или уязвимостям безопасности.

HTML-сущности существуют в трёх форматах: именованные сущности используют описательное имя (© для ©, € для €), десятичные числовые ссылки на символы используют номер кодовой точки (© для ©), а шестнадцатеричные ссылки используют hex-код (© для ©). Все три формата эквивалентны — браузер отображает один и тот же символ независимо от используемого формата. Именованные сущности наиболее читаемы; числовые наиболее универсальны, поскольку работают для любого символа Unicode.

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

Необходимо кодировать как минимум пять зарезервированных HTML-символов (&, <, >, ", ') всякий раз, когда они появляются в текстовом содержимом или значениях атрибутов. Отсутствие кодирования является источником уязвимостей межсайтового скриптинга (XSS): если пользовательский ввод вставляется в HTML без кодирования, злоумышленник может внедрить теги script или обработчики событий. Современные фреймворки, такие как React, Vue и Angular, автоматически кодируют HTML по умолчанию — innerHTML является главным исключением, где ручное кодирование по-прежнему критически важно.

Помимо обязательных пяти символов, вы также можете захотеть кодировать не-ASCII-символы для сред, которые не обрабатывают UTF-8 надёжно: HTML-письма, устаревшие CMS-системы или документы для максимальной совместимости. Опция «Кодировать все не-ASCII символы» преобразует каждый символ выше кодовой точки 127 в числовую сущность, гарантируя, что вывод будет чистым ASCII при сохранении визуального вида при отображении. Для современных UTF-8 HTML-файлов кодирование не-ASCII необязательно — достаточно правильно объявить кодировку.

HTML-сущности vs URL-кодирование vs Base64

HTML-сущности, URL-кодирование (процентное кодирование) и Base64 — это три разные схемы кодирования для разных контекстов. HTML-сущности (например, &) используются внутри HTML-документов для безопасного представления символов. URL-кодирование (например, %26 для &) используется в строках запроса и URL для кодирования символов, имеющих особое значение в URL. Base64 кодирует произвольные двоичные данные как ASCII-текст и используется для data URI и вложений электронной почты.

Распространённая ошибка — путать их: применять URL-кодирование к HTML-содержимому или HTML-кодирование к URL. Например, амперсанд в строке запроса URL требует процентного кодирования (%26), а не кодирования HTML-сущностей (&). Если вы создаёте URL, который затем встраивается в атрибут HTML, вам нужны оба: URL-закодированная форма помещается в атрибут, а само значение атрибута кодируется в HTML. Понимание того, какое кодирование применяется в каком контексте, предотвращает ошибки двойного кодирования и проблемы безопасности.

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

›Какая HTML-сущность для амперсанда (&)?

HTML-сущность для амперсанда — & — буквально символы &, a, m, p и точка с запятой. Когда вы пишете & в HTML-источнике, браузер отображает единственный символ &. Это кодирование обязательно, когда амперсанд встречается в текстовом содержимом или значениях атрибутов, поскольку некодированный & начинает последовательность сущности, которую парсер пытается интерпретировать.

›Какая HTML-сущность для знака авторских прав (©)?

Знак авторских прав © имеет три эквивалентные HTML-сущности: именованная ©, десятичная числовая © и шестнадцатеричная ©. Все они отображают один и тот же символ ©. Именованные сущности — наиболее читаемый вариант при наличии. Для современного UTF-8 HTML вы также можете напечатать символ © напрямую — без сущности — если ваш HTML-файл объявляет charset=utf-8.

›Нужно ли кодировать кавычки в HTML?

Двойные кавычки (") должны кодироваться как " внутри HTML-атрибутов, разделённых двойными кавычками: <input value=""">. Одинарные кавычки (') должны кодироваться как ' или ' внутри атрибутов с одинарными кавычками. Внутри текстового содержимого элементов (между тегами) оба символа кавычек могут появляться без кодирования, но кодирование не навредит. Последовательное кодирование обоих во всех контекстах — самый безопасный подход.

›В чём разница между именованными и числовыми сущностями?

Именованные сущности используют описательное слово (©, €, &hearts;) и определены в спецификации HTML — не каждый символ Unicode имеет именованную сущность. Числовые сущности используют кодовую точку Unicode, либо в десятичном формате (€ для €), либо в шестнадцатеричном (€ для €). Числовые сущности работают для любого символа Unicode, тогда как именованные охватывают только подмножество. Оба формата идентично отображаются в браузерах.

›Нужно ли кодировать не-ASCII-символы в HTML?

Обычно нет. Если ваш HTML-документ объявляет кодировку UTF-8 (meta charset=utf-8) и сохранён как UTF-8, вы можете писать не-ASCII-символы напрямую: é, ñ, 中, 🎉. Кодировать их как сущности необязательно и делает источник труднее для чтения. Исключение — отправка HTML в контекстах, которые могут не сохранять кодировку: почтовые сообщения, устаревшие API или системы, искажающие не-ASCII-байты. В таких случаях кодирование всех не-ASCII как числовых сущностей гарантирует, что вывод будет чистым безопасным ASCII.

›Что такое XSS и как HTML-сущности предотвращают его?

Межсайтовый скриптинг (XSS) — уязвимость безопасности, при которой злоумышленник внедряет вредоносный JavaScript на веб-страницу, вставляя текст, который сервер отражает в HTML без кодирования. Например, если пользовательский ввод <script>alert('xss')</script> вставляется прямо на страницу, браузер выполняет скрипт. Если правильно кодировать ввод — преобразуя < в < и > в > — браузер отображает текст буквально, а не разбирает его как тег. Кодирование HTML-сущностей является основной защитой от отражённого и хранимого XSS.

›Почему   не отображается в списке этого инструмента?

Этот инструмент кодирует символы, имеющие именованные сущности. Неразрывный пробел (Unicode U+00A0) кодируется как  , когда вы вводите фактический символ неразрывного пробела (который можно вставить с помощью Alt+Пробел на некоторых системах или скопировать из таблиц символов). Обычный пробел (U+0020, клавиша пробела) не кодируется, поскольку является безопасным ASCII-символом. Если вам конкретно нужен   в выводе, введите или вставьте символ неразрывного пробела во ввод.

›Могу ли я использовать это для предотвращения HTML-инъекций в пользовательский ввод?

Да — кодирование пользовательского текста перед вставкой в HTML является одной из ключевых защит от HTML-инъекций и XSS. Как минимум, кодируйте пять зарезервированных символов: &, <, >, ", '. Этот инструмент кодирует все пять. Однако кодирование само по себе не является полным решением безопасности: вам также нужны правильные заголовки Content Security Policy, осторожное обращение с URL-адресами javascript: в атрибутах и защита на уровне фреймворка. Для производственных приложений используйте серверную библиотеку, разработанную для безопасности (OWASP Java Encoder, DOMPurify для клиентской стороны и т. д.), а не ручное кодирование.