React против XSS: где заканчиваются защитные барьеры
React безопасен по умолчанию. Он экранирует значения в JSX, чтобы предотвратить большинство инъекций скриптов. Но это создает ложное чувство безопасности. React снижает риск XSS, но не устраняет его полностью.
Существует три основных типа XSS-атак:
- Reflected XSS (отраженная XSS): злоумышленник отправляет вредоносную ссылку. Сервер немедленно отправляет скрипт обратно пользователю. Браузер выполняет скрипт, так как кажется, что он пришел с доверенного сайта.
- Stored XSS (хранимая XSS): злоумышленник сохраняет скрипт на вашем сервере. Он остается в вашей базе данных, комментариях или логах. Каждый пользователь, просматривающий этот контент, запускает скрипт.
- DOM Based XSS: атака происходит полностью в браузере. Злоумышленник изменяет параметры URL или клиентские входные данные, чтобы заставить ваш JavaScript работать некорректно.
От чего на самом деле защищает React?
- Автоматическое экранирование: React обрабатывает строки как обычный текст. Если вы попытаетесь внедрить тег
<script>в JSX, React отобразит его как текст, а не выполнит код. - Безопасный рендеринг: React управляет тем, как отображается контент. Это снижает необходимость использования опасных браузерных API.
- Меньше манипуляций с DOM: React берет на себя обновление интерфейса. Вам не нужно так часто использовать
document.write()илиinnerHTML.
В React предусмотрены «лазейки» (escape hatches). Если использовать их неправильно, вы создадите уязвимости.
Остерегайтесь следующих ошибок:
dangerouslySetInnerHTML: это свойство указывает React пропустить этап экранирования. Оно вставляет HTML именно в том виде, в котором он есть. Если контент не очищен, злоумышленник победит. Сначала используйте DOMPurify для санитизации вашего контента.- Прямые манипуляции с DOM: если вы используете
element.innerHTMLс пользовательским вводом, вы обходите все механизмы безопасности React. - Сторонние библиотеки: некоторые внешние инструменты могут не соблюдать те же правила безопасности.
React предоставляет инструменты для обеспечения безопасности. Вы должны использовать их правильно. Безопасность — это ваша ответственность.
Источник: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2