Does React prevent XSS automatically?

Mostly — React escapes text by default. But `dangerouslySetInnerHTML`, `href` with `javascript:` URLs, and third-party HTML rendering bypass that protection.

XSS

What is XSS?

Cross-Site Scripting

Cross-Site Scripting (XSS) is an attack where an attacker injects JavaScript into your site that later runs in other users' browsers. The injected code has full access to cookies, localStorage, and the current page — attackers use it to steal sessions, redirect users, or impersonate them.

In more detail

XSS happens when user input ends up in the HTML of your page without being properly escaped. Classic example: a comment form where someone submits `<script>steal()</script>` and your site renders it as-is. When other users load the page, the script runs in their browser.

There are three common types: stored XSS (the payload is saved in your database), reflected XSS (the payload comes from a URL parameter), and DOM-based XSS (the payload comes from client-side state). All three are defeated by a combination of output escaping, input validation, and a strict Content Security Policy.

Why this matters

Why builders care

AI-generated code often uses `dangerouslySetInnerHTML` or direct `innerHTML` assignments because they solve layout problems quickly. Each one is a potential XSS hole. CSP catches these even when the code is wrong.

FAQ

Frequently asked questions

Does React prevent XSS automatically?: Mostly — React escapes text by default. But `dangerouslySetInnerHTML`, `href` with `javascript:` URLs, and third-party HTML rendering bypass that protection.

Fix guides

Fix XSS issues

Missing CSP header

A missing Content-Security-Policy header lets attackers inject scripts into your site. Here is what CSP does, why you need it, and how to add it in Next.js, Vercel, and Supabase apps.

Cookie missing HttpOnly

HttpOnly stops JavaScript from reading a cookie, which is critical for session tokens. Here is when and how to set it.

Free tools

Check it yourself

Security headers checker

Check CSP, HSTS, X-Frame-Options, and more in seconds.

Related terms

Keep learning

Content Security Policy

CSP is a browser feature that tells your site which scripts, styles, and images are allowed to run. It is the main defense against cross-site scripting (XSS).

Cross-Site Request Forgery

CSRF tricks a logged-in user into performing actions on your site without realizing. SameSite cookies are the modern defense.

See where your site stands

Paste a URL, get a score in 60 seconds. Free, no signup.