XSS в React

Одним из самых больших преимуществ реакта является его безопасный дизайн, который предотвращает появление большинства XSS (Cross-Site-Scripting) уязвимостей.

Может показаться что, если вы используете реакт, то вы в безопасности, ведь: ● React по-умолчанию экранирует текст, перед тем как его отрендерить ● dangerouslySetInnerHTML не позволяет рендерить тэг script и просто удаляет его

Однако это не так. В реакт всё ещё существуют способы эксплуатации XSS уязвимостей.

1️⃣ JavaScript URL - href аттрибут В реакте всё ещё возможно использовать javascript: схему вместо http: и https: для эксплуатации XSS. Например, если приложение позволяет вводить URL, то пользователь может ввести следующий адрес javascript:alert('XSS') . В таком случае указанный javascript код будет выполнен, когда пользователь попытается перейти по ссылке. Поэтому очень важно валидировать полученный url.

2️⃣ dangerouslySetInnerHTML В данном случае имя свойства говорит само за себя. Несмотря на то, что оно не позволяет рендерить тэг script, есть множество иных способов эксплуатации XSS с помощью этого поля. Один из самых простых примеров - использование тэга img вместе с onerror. Больше примеров можно найти здесь. Поэтому свойство dangerouslySetInnerHTML должно использоваться в связке с библиотекой DOMPurify для предотвращения XSS.

3️⃣ Native API Если по каким-то причинам, вам необходимо использовать нативный API браузера, то в данном случае важно быть в двойне осторожным, ведь тут реакт уже не поможет: ● Постарайтесь использовать innerText вместо innerHTML ● Вы все также можете использовать библиотеку DOMPurify

Чтобы подробнее ознакомиться с предотвращением XSS уязвимостей в React приложении советую прочитать следующий цикл статей: ● Preventing XSS in React (Part 1): Data binding and URLs ● Preventing XSS in React (Part 2): dangerouslySetInnerHTML ● Preventing XSS in React (Part 3): escape hatches and component parsers