> Что такое dangerouslySetInnerHTML в React и для чего он нужен (React)

Короткий ответ

dangerouslySetInnerHTML - это аналог innerHTML в React, который позволяет вставлять HTML-разметку напрямую в DOM. Используется, когда нужно отрендерить строку с HTML-тегами, например, из CMS или Markdown-парсера. Название подчёркивает опасность XSS-атак, поэтому применять его стоит только с предварительно очищенными данными.

Подробное объяснение

В React по умолчанию все вставляемые строки экранируются, чтобы предотвратить инъекции кода. Если вы попытаетесь вставить <div> как строку, React покажет её как текст, а не как HTML-элемент. dangerouslySetInnerHTML отключает это экранирование и вставляет строку как HTML.

Синтаксис требует объект с ключом __html, содержащим строку с разметкой. Это сделано намеренно - чтобы разработчик явно указал, что осознаёт риски. Безопасное использование подразумевает очистку данных через библиотеки типа DOMPurify перед передачей в dangerouslySetInnerHTML.

На практике

Основные случаи применения:

• отображение контента из WYSIWYG-редакторов (TinyMCE, Quill)
• рендеринг HTML, полученного от сервера (например, тело статьи из CMS)
• интеграция с библиотеками, которые генерируют HTML (Markdown-парсеры, код-хайлайтеры)

Никогда не используйте dangerouslySetInnerHTML с пользовательским вводом без санитизации. Даже если данные приходят с вашего сервера, они могли быть скомпрометированы.

Пример кода

JSX
import DOMPurify from 'dompurify';

function Article({ htmlContent }) {
  const cleanHtml = DOMPurify.sanitize(htmlContent);
  
  return (
    <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />
  );
}

Как отвечать на собеседовании

Начни с прямого ответа: это аналог innerHTML. Затем объясни, зачем он нужен (рендеринг HTML-строк) и почему называется "dangerously" (риск XSS). Упомяни, что синтаксис с __html - это защита от случайного использования. Если спросят про альтернативы, скажи, что в идеале нужно избегать dangerouslySetInnerHTML и использовать компоненты React, но иногда это неизбежно. Добавь про санитизацию через DOMPurify.

Что проверяет интервьюер

• понимание разницы между JSX-разметкой и строкой с HTML
• осознание проблем безопасности (XSS)
• знание синтаксиса {__html: ...}
• способность объяснить, когда это оправдано, а когда нет

Типичные ошибки

• путать dangerouslySetInnerHTML с innerHTML в обычном JavaScript
• забывать про санитизацию данных
• использовать для простых случаев, где достаточно JSX-компонентов
• не знать, что синтаксис требует объект, а не строку напрямую