Как React защищает от XSS?

Главная защита React от XSS — автоматическое экранирование: всё, что вставляется в JSX через {}, перед попаданием в DOM превращается в безопасный текст.

Как работает экранирование

const userComment = '<img src=x onerror="stealCookies()">';

<p>{userComment}</p>
// В DOM попадёт ТЕКСТ: &lt;img src=x onerror=...&gt;
// Браузер отобразит строку, а не выполнит разметку

React вставляет значения через textContent/свойства, а не через innerHTML — вредоносная строка остаётся строкой. Это работает для текста и атрибутов по умолчанию, без усилий разработчика.

Где защита заканчивается (обходы)

dangerouslySetInnerHTML — явный люк для вставки сырого HTML:

<div dangerouslySetInnerHTML={{ __html: articleHtml }} />

Название намекает: контент должен быть доверенным или санитизированным (DOMPurify), иначе классический XSS.

javascript: в URL-атрибутах:

<a href={userLink}>сайт</a> // userLink = "javascript:alert(1)" — выполнится по клику

Значения-ссылки от пользователя нужно валидировать (протоколы http/https).

Прочие дыры вне экранирования: динамические props через spread от пользователя, вставка в <script>/style-контексты, SSR-инъекции при ручной сборке HTML, eval-подобные конструкции.

Практический чек-лист

• Пользовательский HTML — только через DOMPurify + dangerouslySetInnerHTML.
• Валидация URL-полей; никакого javascript:.
• CSP-заголовки как второй эшелон.
• Не собирать HTML-строки вручную (в т.ч. на сервере).

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

React экранирует всё вставляемое через {} (textContent вместо innerHTML) — XSS «по умолчанию» невозможен. Уязвимости остаются в обходах: dangerouslySetInnerHTML без санитизации (DOMPurify), javascript: в href, ручная сборка HTML. Экранирование + валидация URL + CSP — полный набор.