React проти XSS: де закінчуються захисні бар'єри
React безпечний за замовчуванням. Він екранує значення в JSX, щоб запобігти більшості ін'єкцій скриптів. Але це створює хибне відчуття безпеки. React знижує ризик XSS, але не усуває його повністю.
Існує три основні типи XSS-атак:
- Reflected XSS (віддзеркалена XSS): Зловмисник надсилає шкідливе посилання. Сервер негайно повертає скрипт користувачеві. Браузер виконує цей скрипт, оскільки він виглядає так, ніби походить із надійного сайту.
- Stored XSS (схована XSS): Зловмисник зберігає скрипт на вашому сервері. Він залишається у вашій базі даних, коментарях або логах. Кожен користувач, який переглядає цей контент, запускає скрипт.
- DOM Based XSS: Атака відбувається повністю в браузері. Зловмисник змінює параметри URL або вводимі дані на стороні клієнта, щоб змусити ваш JavaScript працювати некоректно.
Від чого насправді захищає React?
- Automatic Escaping (автоматичне екранування): React сприймає рядки як звичайний текст. Якщо ви спробуєте вставити тег
<script>у JSX, React відобразить його як текст, а не виконуватиме код. - Safe Rendering (безпечний рендеринг): React керує тим, як відображається контент. Це зменшує потребу використовувати небезпечні браузерні API.
- Менше маніпуляцій з DOM: React бере на себе оновлення. Вам не потрібно так часто використовувати
document.write()абоinnerHTML.
React надає «шлюзи» (escape hatches). Якщо використовувати їх неправильно, ви створюєте вразливості.
Остерігайтеся цих помилок:
dangerouslySetInnerHTML: Ця властивість наказує React пропустити екранування. Вона вставляє HTML саме в тому вигляді, в якому він є. Якщо контент не очищений, зловмисник отримає доступ. Спочатку використовуйте DOMPurify для санітизації вашого контенту.- Direct DOM Manipulation (пряма маніпуляція DOM): Якщо ви використовуєте
element.innerHTMLіз вводом користувача, ви обходите всі механізми безпеки React. - Third Party Libraries (сторонні бібліотеки): Деякі зовнішні інструменти можуть не дотримуватися тих самих правил безпеки.
React надає інструменти для забезпечення безпеки. Ви повинні використовувати їх правильно. Безпека — це ваша відповідальність.
Джерело: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2