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

Как экранировать HTML или снять экранирование

1. Выберите Экранировать или Снять экранирование.
2. Для экранирования выберите в Экранировать, что именно экранировать:
   • Только & < > " ‘: для HTML, который вы вставите в страницу или шаблон.
   • Плюс все не-ASCII: для страниц, писем или систем, которые плохо дружат с UTF-8.
   • Все символы: чтобы закодировать весь текст, например для проверки парсеров.
3. Выберите Формат: Именованные (é), Десятичные (é) или Шестнадцатеричные (é). Для символов без общепринятого имени именованный формат переходит на десятичный. Снимите галочку Экранировать кавычки, если текст попадёт только в содержимое элемента.
4. Нажмите Скопировать результат. Поменять местами переносит результат на другую сторону, чтобы проверить обратное преобразование.

Для снятия экранирования инструмент берёт HTML-парсер браузера и поэтому понимает все именованные ссылки HTML5 (их больше 2000), а также десятичные и шестнадцатеричные. Ввод никогда не отображается как HTML.

Частые сущности

Числовые ссылки используют кодовую точку Unicode, а не байты UTF-8, поэтому эмодзи записывается одной ссылкой, а не четырьмя.

Подводные камни при экранировании и декодировании

• Сначала экранируйте &. Если заменить < на <, а потом & на &, получится <. Любой самописный экранировщик должен обрабатывать & раньше остальных.
• Неэкранированный & в тексте может превратиться в символ. HTML до сих пор распознаёт некоторые устаревшие сущности без точки с запятой, поэтому текст ?id=1&copy=2&para=3 отображается как ?id=1©=2¶=3. Пишите & для каждого амперсанда, в URL тоже.
• Двойное экранирование проявляется на странице как <b>. Снимите экранирование один раз, а потом найдите, какой слой экранирует повторно.
•   не пробел. Он декодируется в U+00A0, который выглядит как пробел, но в некоторых языках ломает сравнение строк и trim().
• Сущности не заменяют URL-кодирование. В ссылке & разделяет параметры запроса в исходном HTML, а %26 означает буквальный амперсанд внутри значения. Со вторым справится URL-кодировщик.

Экранирование и его снятие в коде

import html
html.escape('5 > 3 & "quotes"')    # '5 > 3 & "quotes"'
html.unescape("Café — ©")   # 'Café — ©'

const escapeHtml = s => s.replace(/&/g, "&amp;").replace(/</g, "&lt;")
  .replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");

const unescapeHtml = s =>
  new DOMParser().parseFromString(s, "text/html").documentElement.textContent;

html.escape в Python по умолчанию экранирует кавычки и записывает ' как '. В PHP обычно используют htmlspecialchars(); начиная с PHP 8.1 она по умолчанию экранирует оба вида кавычек. DOMParser не выполняет скрипты в разобранном документе, поэтому это безопасный способ декодировать в браузере. Подробнее о работе со строками рассказывает страница про JavaScript.

Сущности, Base64 и data URI

HTML-сущности и Base64 решают разные задачи. Сущности делают символы безопасными внутри исходного HTML, а Base64 превращает байты в текст, чтобы целый файл поместился в атрибут. Чтобы встроить полный HTML-документ в URI data: или поле JSON, закодируйте его через HTML в Base64, а не экранируйте каждый символ.

Вопросы и ответы