First, let’s see what is XSS attack. An XSS attack is used to gain access to users browser by using vulnerabilities in the application. It is caused by Cross-site scripting. In simple words, It is the script being injected into a comment or URL, etc. between a poorly coded web page and the client's web browser. Non-persistent and persistent are two types of XSS attack.

React escapes string variables automatically and this prevents XSS injection through string HTML with malicious JavaScript. You pass a function with JSXas an event handler rather than a string. A typical attack like the one given below 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>

There are still some XSS attacks you need to handle. Some are:

1.XSS attack through dangerouslySetInnerHTML

2.XSS attack through the a.href attribute.

3.XSS attack through attacker controlled props.