reactjs - What does it mean when they say React is XSS protected?

Question

I read this on the React tutorial. What does this mean?

React is safe. We are not generating HTML strings so XSS protection is the default.

How do XSS attacks work if React is safe? How is this safety achieved?

Answer 1

ReactJS is quite safe by design since

1. String variables in views are escaped automatically
2. With JSX you pass a function as the event handler, rather than a string that can contain malicious code

so a typical attack like this will not work

const username = "<img onerror='alert("Hacked!")' src='invalid-image' />";

class UserProfilePage extends React.Component {
  render() {
    return (
      <h1> Hello {username}!</h1>
    );
  }
}

ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>