Что можно передать в dangerouslySetInnerHTML?

Что можно передать в dangerouslySetInnerHTML?

dangerouslySetInnerHTML — это специальный проп (property) в React, предназначенный для непосредственного вставки HTML-кода в DOM-элемент. Он является аналогом innerHTML в нативном DOM API, но с явным указанием на потенциальную опасность такого действия. Его название начинается со слова "dangerously" (опасно), чтобы постоянно напоминать разработчику о связанных рисках.

Структура передаваемого объекта

В dangerouslySetInnerHTML необходимо передать объект, который содержит единственное свойство __html. Значением этого свойства должна быть строка с корректным HTML.

<div dangerouslySetInnerHTML={{ __html: '<span>Пример HTML</span>' }} />

Ключевые правила:

1. Объект обязателен: Нельзя передать просто строку.
2. Ключ __html обязателен: Это фиксированное имя свойства.
3. Значение должно быть строкой: Эта строка будет интерпретирована браузером как HTML.

Что именно можно передавать в строке __html

В строку __html можно передавать практически любой валидный HTML, который браузер способен обработать. Основные категории включают:

• Простые HTML-теги и текст: <p>, <span>, <div>, <h1> и т.д.
• HTML с инлайн-стилями: <div style="color: red;">Текст</div>.
• Элементы с атрибутами: <a href="https://example.com">Ссылка</a>, <input type="text">.
• Сложные структуры: Комбинации тегов, списки, таблицы.
• HTML, возвращаемый сторонними библиотеками или сервером: Например, содержимое, полученное от CMS или WYSIWYG-редактора.

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

1. Вставка простого HTML

function Component() {
  const htmlContent = '<strong>Это важный текст</strong> и <em>акцентированный</em>.';
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

2. Вставка HTML с инлайн-скриптами (с высокой осторожностью!)

Внимание: Это крайне опасная практика, так как делает приложение vulnerable к XSS.

// НЕ ДЕЛАЙТЕ ТАК, если не полностью контролируете источник данных!
function DangerousComponent() {
  // Данные из непроверенного источника
  const userInput = '<script>alert("XSS!")</script><p>Кажется, безопасный текст</p>';
  return <div dangerouslySetInnerHTML={{ __html: userInput }} />; // ОЧЕНЬ ОПАСНО!
}

3. Вставка санитизированного (очищенного) HTML

Это рекомендуемый подход. HTML должен быть очищен от опасных тегов (<script>, <iframe>, события onclick и др.) перед вставкой.

import DOMPurify from 'dompurify'; // Используем библиотеку для санитизации

function SafeComponent({ rawHtmlFromApi }) {
  // Очищаем HTML перед использованием
  const sanitizedHtml = DOMPurify.sanitize(rawHtmlFromApi);
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
}

Ключевые риски и почему это "опасно"

• XSS-атаки: Главная опасность. Если в строке __html содержится <script> или HTML с событиями (onerror, onload), это может привести к выполнению вредоносного кода.
• Неконтролируемое изменение DOM: React теряет управление над содержимым этого узла, что может привести к конфликтам с его внутренней системой reconciliation.
• Проблемы с производительностью: Частые обновления через dangerouslySetInnerHTML могут вызвать неоптимальные перерисовки DOM.

Альтернативы и лучшие практики

1. Всегда санитизировать данные: Использовать библиотеки типа DOMPurify для очистки HTML от опасных элементов.
2. Избегать его для статичного контента: Если контент статичен, лучше преобразовать его в JSX.
3. Рассмотреть альтернативные подходы:

    *   Для простого текста — использовать обычные JSX элементы.
    *   Для сложного форматирования — использовать компоненты, которые рендерят безопасный JSX.

Использовать dangerouslySetInnerHTML допустимо только в случаях, когда необходимо вставить предварительно очищенный, доверенный HTML, полученный из внешнего источника (например, из API блога или админ-панели), и когда нет возможности или смысла преобразовывать его в JSX. В остальных ситуациях его применение должно быть минимизировано в целях безопасности и стабильности приложения.