Как правильно вставить пользовательский текст в DOM, сохранив HTML-разметку, но избежав XSS?

Проблема XSS при вставке HTML

Когда вы вставляете пользовательский текст в DOM через innerHTML, браузер интерпретирует его как HTML-разметку. Если пользователь введет что-то вроде <img src=x onerror=alert(1)>, это приведет к выполнению JavaScript-кода — XSS-атаке. Поэтому напрямую использовать innerHTML с пользовательскими данными опасно.

Решение: санитизация HTML

Чтобы сохранить разрешенную HTML-разметку (например, жирный текст или ссылки), но удалить опасные элементы, применяют санитизацию. Популярная библиотека — DOMPurify. Она анализирует HTML и удаляет все, что может быть опасным: теги <script>, обработчики событий (onclick, onerror), javascript: ссылки и т.д.

Пример использования:

// Пользовательский ввод
const userInput = '<b>Привет</b> <img src=x onerror=alert(1)>';

// Санитизация
const cleanHTML = DOMPurify.sanitize(userInput);

// Безопасная вставка
document.getElementById('output').innerHTML = cleanHTML;
// Результат: <b>Привет</b> (опасный тег удален)

Когда не нужен HTML

Если пользовательский текст не должен содержать HTML-разметку, используйте textContent вместо innerHTML. Он автоматически экранирует все символы, превращая их в текст:

const userInput = '<b>Текст</b>';
document.getElementById('output').textContent = userInput;
// Отобразится как &lt;b&gt;Текст&lt;/b&gt;

Вывод

Для вставки пользовательского HTML всегда используйте санитизацию через DOMPurify или аналогичную библиотеку. Если HTML не нужен — применяйте textContent. Это защитит ваше приложение от XSS-уязвимостей и сохранит безопасность пользователей.