Preventing XSS vulnerabilities in React

In this recipe, we are going to learn about cross-site scripting (XSS) vulnerabilities in React. XSS attacks are widespread in web applications, and some developers are still not aware of this. XSS attacks are malicious scripts that are injected into the DOM of unprotected web applications. The risks can vary with each application. It could just be an innocent alert script injection or, worse, someone can get access to your cookies and steal your private credentials (passwords), for example.

Let's create an XSS component to start playing around a little bit with some XSS attacks. We are going to have a response variable that is simulating a response from a real server, and we will simulate that we are using Redux's initial state (we are going to see Redux in Chapter 5, Mastering Redux).