Вебсправочник
Основы веб-разработки

Безопасный вывод текста: textContent и HTML

Почему данные пользователя нельзя без проверки превращать в разметку страницы.

Зачем это нужно

Когда приложение показывает строку, важно понимать, является ли она текстом или HTML. Данные из формы, адреса, API и хранилища могут содержать символы разметки. Если интерпретировать их как HTML, они способны изменить документ неожиданным образом.

Выбирайте текстовый вывод

Для обычного имени, сообщения или результата используйте textContent. Браузер отобразит символы как текст, а не как новые теги. Шаблонная строка сама по себе не выполняет экранирование.

Разделяйте контексты

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

Считайте клиентские данные недоверенными

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

Важное ограничение

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

Контрольная проверка

  • Обычные строки выводятся как текст.
  • Пользовательские URL проверяются по допустимым схемам.
  • Секреты не встроены в клиентский код.
  • Валидация есть и на серверной стороне.

Продолжить изучение: textContent, шаблонные строки.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.