Можно ли что угодно вставлять в innerHTML?

Ответ: НЕТ, нельзя просто так вставлять что угодно в innerHTML

Это один из самых частых источников уязвимостей в веб-приложениях. Я объясню, почему это опасно и как правильно работать с динамическим контентом.

Проблема XSS-атак

Если вставить неочищенные данные в innerHTML, злоумышленник может внедрить вредоносный JavaScript код:

// ОПАСНО! Ни в коем случае так не делайте
const userComment = '<img src=x onerror="alert(1)">'
document.getElementById('comments').innerHTML = userComment;

// Браузер выполнит этот JavaScript автоматически

Это называется Cross-Site Scripting (XSS) атака. Злоумышленник может:

• Украсть cookies и токены авторизации
• Выполнить действия от имени пользователя
• Перенаправить на фишинг-сайт
• Заразить компьютер вредоносом

Защита: Санитизация HTML

Способ 1: textContent вместо innerHTML

Если вам нужен только текст (без форматирования):

const userComment = '<img src=x onerror="alert(1)">'
// Это БЕЗОПАСНО - вставится как обычный текст
document.getElementById('comments').textContent = userComment;
// Результат: пользователь увидит строку как есть

Способ 2: Создание DOM элементов программно

Это считается наиболее безопасным подходом:

const userComment = '<img src=x onerror="alert(1)">'

const element = document.createElement('div');
element.textContent = userComment; // Сначала - текст
const text = element.textContent;

// Если вам нужен именно HTML, создавайте элементы вручную
const container = document.getElementById('comments');
const comment = document.createElement('p');
comment.textContent = userComment; // Не используйте innerHTML
container.appendChild(comment);

Способ 3: Библиотека DOMPurify

Для сложных случаев (когда нужно разрешить некоторый HTML):

import DOMPurify from 'dompurify';

const userComment = '<b>Привет</b> <img src=x onerror="alert(1)">';
const clean = DOMPurify.sanitize(userComment);

document.getElementById('comments').innerHTML = clean;
// Результат: <b>Привет</b> (опасный img удален)

В React это еще проще

React по умолчанию экранирует все данные:

function Comment({ text }) {
  // React автоматически экранирует текст - XSS невозможна
  return <div>{text}</div>; // БЕЗОПАСНО
}

// Опасно использовать dangerouslySetInnerHTML
function BadComponent({ html }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
}

// Правильно - если все же нужен HTML
function SafeComponent({ html }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />
  );
}

Чеклист безопасности

1. Всегда используйте textContent если нужен только текст
2. Если нужен HTML - санитизируйте через DOMPurify
3. В React используйте обычное рендеринг вместо dangerouslySetInnerHTML
4. Никогда не доверяйте данным от пользователя
5. На бэкенде тоже проверяйте все входные данные
6. Используйте Content Security Policy (CSP) в headers

Итог

Вставлять в innerHTML можно только контент, который вы 100% контролируете. Если это данные от пользователя, API или других источников - всегда санитизируйте. Это базовая практика безопасности, которая защищает ваших пользователей.