Что такое dangerouslySetInnerHTML

dangerouslySetInnerHTML — это React-аналог innerHTML для вставки HTML напрямую в DOM. Название подчёркивает потенциальную опасность XSS-атак, если контент не санизирован.

Используется как пропс с объектом, содержащим __html:

<div dangerouslySetInnerHTML={{ __html: '<span>Trusted HTML</span>' }} />

Когда применять:

• Рендер HTML из доверенных источников (например, CMS с санизацией)
• Вставка SVG или сложного форматирования

Опасности:

• Необработанный пользовательский ввод может привести к XSS
• Ломает React-оптимизации, так как обходит виртуальный DOM

Всегда санизируйте контент с помощью библиотек типа DOMPurify перед использованием.