Example of XSS in code - JavaScript Tutorial

- [Instructor] Now let's take a look at the exercise files for an example of XSS in action with the example project. So go inside of the exercise files, take a look at chapter two and then 02_02, and then begin. And then you should have some files, so this is the React project. For this particular example, I'm going to use a React project, but feel free to use whatever you want on your end if you'd like to also take an example. So what we're going to do is install all the dependencies for this project. So what I'm going to do is go back out, do a right-click and then Open with Code, and then I'm going to click on View, Terminal. And then do npm install. You can do npmi if you want. Let me just close this out for now, and minimize this to give you guys a little bit more view. And while this happening, let's take a look at the code. So click on the source then click on components. As you can see, it's a full application, so we're going to see that in a second, but right now let's take a look at App.js. And now I'm going to close the explorer to give myself a little bit more room to play, and also I'm going to close the terminal while it's doing its thing here. Actually, it's done, but let's take a look at the code first. So the areas I want you to pay attention to is this function here on line 12 through 14. So right now what I'm doing is I'm doing an _html, and I am basically passing a text to it. And this is a function, so I'm returning this and this function is called createMarkup. So if we scroll down a little bit below where we do the return function, and again this could be done on JavaScript as well. So you could basically be doing a function, 'cause React is mostly pure JavaScript. So you could be doing a function at, this is ES6 syntax by the way. And then in your code, in your actual HTML return this function inside of your innerHTML. But that's a big issue, 'cause right now if we are returning a function inside of innerHTML, we could basically pass anything we want to it. So someone could have access to this particular function, or even go in the console and pass anything it wants inside of that function, and then pass any malicious code they want inside of that function. So that's a big issue, so let's take a look at what it does right now. So let's open up the terminal. And let's bring that up a little bit, do npm start. And I have three screens right now, so if this opens on the second screen, we'll just bring it up from the second screen, and this is exactly what happened. So right now this is the full application, and so this a list of courses that I've published, and this is a application that I've actually done in another course, but if we scroll down, so let's go back to our code for a second just to make sure we can get situated in the whole thing. So right now we have the navigation at the top, so that looks like it's basically this guy here. So the navigation is here, and then we have a jumbotron and then the list of courses, and then we have a footer. So right now we have the footer here. So the only thing that we're seeing right now is the name that is passed from the state, which is the safe way of doing this. It doesn't display the innerHTML. So the good news inside of a framework like React, and Angler does the same thing, it escapes it automatically. So right now it took a look at the function and then it said well this is not safe, I don't want to return some scripts here inside of my innerHTML, so I'm going to escape it, and therefore we're not seeing anything inside of this physical application. So right now we're only seeing the name, we're not seeing the innerHTML. But in regular JavaScript, this would happen. So the function would return I am so, and whatever I've written in the VS code here. I am so dangerous you can feel it! So this would show up in the HTML or on the page, so this is a big issue because we can pass anything we want. So on the previous video we passed it through a form, but it could be passed inside of the console, it could be passed anywhere. So if you have a function that returns some scripts inside of your application, and then you pass it inside of innerHTML, that can be very dangerous. So that's an example of XSS in action, so let's take a look at how we would resolve our actual texts in the next video.