Когда опасно использовать dangerouslySetInnerHTML и как это делать безопасно?

`dangerouslySetInnerHTML` вставляет строку как HTML без экранирования, поэтому любой пользовательский текст превращается в потенциальный XSS.

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

Отображение HTML из CMS, markdown-рендеринг, письма. Если данных нет, лучше обойтись обычными компонентами.

Как сделать безопаснее

• Не вставлять то, что ввёл пользователь, без обработки.
• Очищать HTML библиотекой DOMPurify непосредственно перед вставкой.
• Разрешать минимальный набор тегов и атрибутов, запретить style, on* и javascript: в ссылках.
• Сочетать с CSP, который блокирует inline-скрипты.

import DOMPurify from 'dompurify';

function Article({ html }) {
  const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS: ['p', 'a', 'b', 'i', 'ul', 'li'] });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

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

Вставка сырого HTML — главный источник XSS в React. Её допускают только после санитизации и при включённой CSP.