XSS в React: dangerouslySetInnerHTML и сторонние скрипты

React автоматически экранирует все значения, отображаемые через JSX, прежде чем вставить их в DOM. Когда Вы пишете {userInput} в JSX, React выполняет эквивалент присваивания textContent — значение обрабатывается как текст, а не как HTML. По умолчанию это предотвращает большинство атак XSS в приложениях React.

dangerouslySetInnerHTML={{ __html: htmlString }} — это механизм React для обхода автоматического экранирования. Его намеренно тревожное название напоминает, что Вы принимаете на себя ответственность за безопасность строки HTML. React напрямую устанавливает innerHTML, выполняя любой HTML, включая скрипты и обработчики событий.

Вам действительно нужен dangerouslySetInnerHTML, если Вы отображаете HTML, полученный из редактора форматированного текста (например, TipTap или Quill), CMS, хранящей HTML, или конвертера Markdown в HTML. Эти источники создают настоящую HTML-разметку, которую необходимо отображать как HTML, а не как экранированный текст.

Если строка HTML содержит <script>stealCookies()</script> или <img src=x onerror="stealData()">, установка ее в innerHTML выполняет код злоумышленника. Любое пользовательское содержимое, напрямую переданное в dangerouslySetInnerHTML без очистки, представляет собой критическую уязвимость XSS.

DOMPurify — стандартное для отрасли средство очистки HTML в браузерах. Оно разбирает строку HTML в изолированной среде, удаляет опасные элементы и атрибуты (теги скриптов, обработчики событий, ссылки javascript:) и возвращает безопасную строку HTML. Используйте DOMPurify.sanitize(dirtyHtml) перед передачей значения в dangerouslySetInnerHTML.

Сторонние скрипты (аналитика, виджеты чата, рекламные сети) работают с теми же правами, что и JavaScript Вашего приложения. Скомпрометированный или вредоносный сторонний скрипт может прочитать document.cookie, получить доступ к localStorage, прочитать поля ввода форм и отправить запросы на внешние серверы — и все это без каких-либо признаков для пользователя.

Content Security Policy — это HTTP-заголовок, объявляющий, каким скриптам разрешено выполняться. Даже если в DOM внедрена полезная нагрузка XSS, правильно настроенная CSP может заблокировать ее выполнение, ограничив встроенные скрипты и разрешив только внесенные в список источники скриптов. CSP — вторая линия защиты после очистки входных данных.

Пакеты npm представляют собой реальный вектор атак XSS. Зависимость может содержать вредоносный код, который извлекает переменные окружения или данные пользователей. Инцидент с node-ipc в 2022 году и компрометация ua-parser-js в 2021 году показали, что широко используемые пакеты могут быть захвачены и заражены вредоносным кодом. Проверяйте зависимости с помощью npm audit и используйте файлы блокировок.

Успешная атака XSS позволяет злоумышленнику украсть JWT-токен пользователя из sessionStorage (отправив его на сервер под контролем злоумышленника), выполнять действия от имени аутентифицированного пользователя (вызывая API с его сеансом), изменять DOM для отображения фишингового содержимого или записывать каждое нажатие клавиши пользователя в приложении.

API Trusted Types в браузере требует, чтобы все приемники DOM (innerHTML, eval, script.src) получали специальные типизированные объекты, а не необработанные строки. Это не позволяет строковым полезным нагрузкам XSS достигать DOM на уровне платформы. React движется к совместимости с Trusted Types, а CSP может принудительно включить этот режим.

Безопасный шаблон отображения HTML из CMS: получите HTML, пропустите его через DOMPurify.sanitize() со списком разрешенных безопасных тегов и атрибутов, а затем отобразите с помощью dangerouslySetInnerHTML={{ __html: cleanHtml }}. Никогда не пропускайте этап очистки, даже если Вы доверяете CMS, поскольку сама база данных CMS может быть скомпрометирована.

Что делает DOMPurify при вызове DOMPurify.sanitize(htmlString)?

React автоматически экранирует значения JSX, предотвращая большинство атак XSS. dangerouslySetInnerHTML обходит эту защиту для законного отображения HTML — всегда сначала очищайте входные данные с помощью DOMPurify. Сторонние скрипты и скомпрометированные пакеты npm представляют собой векторы XSS-атак через цепочку поставок. Content Security Policy предоставляет второй уровень защиты. Успешная атака XSS позволяет украсть токены, выдать себя за пользователя и разместить фишинговое содержимое.