In this video Emmanuel Henri provides and example of cross-site scripting issues with example code.
- [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.
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 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.
- Risks posed by cross-site scripting
- Best practices for dealing with cross-site forgery threats
- Dealing with sensitive data risks
- Preventing server-side injection
- Preventing obfuscation