𝗥𝗲𝗮𝗰𝘁 𝘃𝘀. 𝗫𝗦𝗦: 𝗪𝗵𝗲𝗿𝗲 𝘁𝗵𝗲 𝗚𝘂𝗮𝗿𝗱𝗿𝗮𝗶𝗹𝘀 𝗘𝗻𝗱
React is secure by default. It escapes values in JSX to stop most script injections. But this creates a false sense of security. React reduces XSS risk. It does not end it.
There are three main types of XSS attacks:
- Reflected XSS: An attacker sends a malicious link. The server sends the script back to the user immediately. The browser runs the script because it looks like it came from a trusted site.
- Stored XSS: The attacker saves a script on your server. It lives in your database, comments, or logs. Every user who views that content runs the script.
- DOM Based XSS: The attack happens entirely in the browser. The attacker changes URL parameters or client side inputs to make your JavaScript behave badly.
What does React actually protect you from?
- Automatic Escaping: React treats strings as plain text. If you try to inject a script tag into JSX, React shows the text instead of running the code.
- Safe Rendering: React manages how content appears. This reduces your need to use dangerous browser APIs.
- Less DOM Manipulation: React handles the updates. You do not need to use document.write() or innerHTML as often.
React provides escape hatches. If you use them wrong, you create vulnerabilities.
Watch out for these mistakes:
- dangerouslySetInnerHTML: This property tells React to skip escaping. It inserts HTML exactly as it is. If the content is not clean, an attacker wins. Use DOMPurify to sanitize your content first.
- Direct DOM Manipulation: If you use element.innerHTML with user input, you bypass all React security.
- Third Party Libraries: Some external tools might not follow the same safety rules.
React provides the tools for security. You must use them correctly. Security is your responsibility.
Source: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2