React › Security in React (XSS & dangerouslySetInnerHTML)

What is cross site scripting, often called XSS, and how does React protect against it by default?

Beginner

Answer

Cross site scripting happens when an attacker manages to inject malicious code into a page, which then runs in another user's browser, often stealing information or performing unwanted actions. React protects against this automatically by treating any text you display through normal JSX as plain text, safely escaping special characters instead of running them as code.

function Comment({ text }) {
  return <p>{text}</p>; // React automatically escapes this text safely
}

// Even if text contains something like <script>alert('hacked')</script>
// React will safely display it as plain visible text, not run it as actual code

Real-world example A blog's comment section safely displays user submitted comments containing suspicious looking text, because React automatically escapes it as plain text instead of accidentally running it as real code in another visitor's browser.

Common follow-ups: What specifically does React do differently from directly inserting text into the DOM using plain JavaScript?;Are there any situations where React's automatic protection does not apply?

Error Handling;Forms: Controlled & Uncontrolled Components