Как вставить произвольный HTML в React?

Произвольный HTML в React вставляют через `dangerouslySetInnerHTML` — и обязательно очищают его от опасного кода.

import DOMPurify from 'dompurify';

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

Почему так «опасно» называется

React по умолчанию экранирует строки, защищая от XSS. Вставка сырого HTML отключает эту защиту: если в строке есть <img onerror="…"> или <script>, злоумышленник выполнит свой код.

Правила

• вставлять только доверенный HTML или после санитайзера (DOMPurify);
• не пропускать пользовательский ввод напрямую;
• для markdown — рендерить через библиотеку (react-markdown), которая строит React-элементы, а не сырой HTML.

Альтернатива

Парсить HTML в React-элементы (html-react-parser) — тогда можно заменять отдельные теги своими компонентами.

Коротко для собеседования

Через dangerouslySetInnerHTML={{ __html }}, только с доверенным или очищенным (DOMPurify) HTML, иначе получим XSS.

Подробнее: React — dangerouslySetInnerHTML