Безопасный вывод текста в JavaScript: textContent по делу

10.02.2026 Полезные материалы

Окно заметки с видимыми текстовыми символами рядом со схемой DOM

Когда пользователь вводит заметку, интерфейсу чаще всего нужен обычный текст, а не HTML. Самое полезное решение — сразу выбрать текстовый способ вывода. Удалять подозрительные слова регулярным выражением, а затем всё равно передавать строку HTML-парсеру значительно сложнее и опаснее.

index.html

<!doctype html>
<html lang="ru"><meta charset="utf-8"><title>Текст пользователя</title>
<label for="message">Текст заметки</label><textarea id="message"></textarea>
<button id="show" type="button">Показать как текст</button>
<p id="output" style="white-space: pre-wrap"></p>
<script>
document.querySelector('#show').addEventListener('click', () => {
  const text = document.querySelector('#message').value;
  document.querySelector('#output').textContent = text;
});
</script></html>

Введите в учебное поле, например, строку <strong>Заметка</strong>. После кнопки она должна появиться вместе со скобками, без жирного оформления. textContent помещает значение как текст. MDN противопоставляет этот подход innerHTML, который обрабатывает разметку и может приводить к XSS при небезопасном использовании.

Контекст вывода определяет решение
Что сравнить	На что смотреть	Что сделать
Обычный текст	Заголовок, комментарий, заметка	textContent или текстовый узел
Ссылка	Адрес и подпись решают разные задачи	Проверять разрешённую схему URL отдельно
Разрешённая разметка	Редактор с форматированием	Нужна специальная проверенная политика очистки
Серверное хранение	Данные используются повторно	Повторять проверку на границах и в каждом контексте

Не путайте длину и безопасность

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

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

Сохраняйте границу задачи при расширении

white-space: pre-wrap показывает переносы без преобразования их в теги br. Если позже появятся ссылки, не переносите строку целиком в href: адрес требует отдельного разбора и списка допустимых схем. Безопасный текстовый узел не делает автоматически безопасными CSS, JavaScript или HTML-атрибуты. Защита привязана к контексту.

Клиентский вывод также не заменяет серверные правила. Реальный сервис должен учитывать доступ к данным, размер, хранение и повторное использование. В этом демо текст остаётся в странице и никуда не отправляется. Не используйте для эксперимента реальные личные сведения.