Что это и зачем
HTML entities — специальная нотация для записи символов, которые имеют особое значение в HTML (<, >, &) или которые нельзя ввести с клавиатуры (©, ™, →). Экранирование преобразует «опасные» символы в безопасные коды, чтобы браузер отобразил их как текст, а не интерпретировал как разметку.
Главное применение — XSS-защита. Если выводите пользовательский ввод в HTML без экранирования, злоумышленник может вставить <script> и выполнить произвольный JavaScript на странице. Все современные шаблонизаторы (React JSX, Vue templates, Jinja2, Twig) экранируют автоматически — это стандартная защита.
Режимы кодирования
- Минимум (5 символов). Заменяет только &, <, >, ", '. Этого достаточно для безопасного вывода в HTML-контексте. Идеально для UTF-8 страниц.
- Именованные. Заменяет известные символы на читаемые имена: © → ©, → → →, — → —. Лучше для legacy-систем или когда читаемость в исходнике важнее.
- Все non-ASCII. Заменяет все символы >= 128 на &#NNN;. Гарантирует ASCII-only вывод. Полезно для систем, которые не поддерживают UTF-8 (legacy SMTP, GSM-7 SMS).
Always escape untrusted user input before inserting into HTML context. The 5 character minimum: &, <, >, ", ' — covers the basics for HTML body context.— OWASP XSS Prevention Cheat Sheet
XSS и безопасность
Контекст имеет значение. Правильное экранирование зависит от того, КУДА вставляются данные:
- HTML body (внутри тега): экранируйте & < > — этого достаточно.
- HTML attribute (внутри значения атрибута): экранируйте & < > " '. Окружайте кавычками.
- JavaScript (внутри <script>): HTML entities не работают! Используйте JSON.stringify() для строк.
- URL (внутри href, src, action): используйте encodeURIComponent. Дополнительно экранируйте javascript:, data: для безопасности.
- CSS (внутри <style> или style=""): отдельные правила, например \\ для escape. Самый сложный контекст.
Если используете React, Vue, Angular — они делают всё автоматически. Опасные места: dangerouslySetInnerHTML в React, v-html в Vue, [innerHTML] в Angular. Если эти конструкции используются — экранируйте вручную или используйте библиотеку DOMPurify.
Практические сценарии
- Вывод комментариев пользователя. Любая входящая строка → экранируется → выводится. Защита от XSS.
- Email с HTML-разметкой. Если в теле письма ссылка с пользовательским URL — encodeURIComponent + escape.
- Документация / блог. Если показываете примеры HTML кода — нужно экранировать, иначе браузер отрисует. Pre-блоки с подсветкой синтаксиса делают это автоматически.
- RSS / Atom feed. Тело статьи в <content> должно быть экранировано (или обёрнуто в CDATA).
- SVG в инлайн HTML. Текст внутри SVG-тегов экранируется как HTML. Атрибуты тоже.
- HTML5 Living Standard — Named character references. WHATWG. html.spec.whatwg.org/multipage/named-characters.html. 2024.
- OWASP XSS Prevention Cheat Sheet. OWASP. cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html. 2024.
- MDN — HTML entity references. Mozilla. developer.mozilla.org/en-US/docs/Glossary/Entity. 2024.
