Web Security

Challenge 2: Solution, Part 1

Web Security

Check out a free preview of the full Web Security course

The "Challenge 2: Solution, Part 1" Lesson is part of the full, Web Security course featured in this preview video. Here's what you'd learn in this lesson:

Mike walks through the solution to Challenge 2 fixing XSS exploits.


Transcript from the "Challenge 2: Solution, Part 1" Lesson

>> Mike North: We're gonna implement some defenses for the cross-site scripting vulnerabilities we found. So the first thing that I'm gonna do is scan for this unsafe thing that we know about and eliminate all of it from my code base. If you have custom linting rules in your project or a git pre-commit hook is another good option here.

This is the kind of thing that you just want to catch as early as possible, preferably in an automated way. We're gonna go and fix it manually ourselves right now. So go back to our project, and sorry, I'm getting notifications for some reason.
>> Mike North: Go back to the project here and let's just find all occurrences.

We will use VS codes, little text search functionality. And I'm gonna search for all occurrences of this string here, right? If this is the unsafe use HTML as HTML, not as a string thing. If we search for that, it's used pretty widely. So we can go and fix anything that looks like it might be user input.

Let me just give us full code here. So, I can fix these three.
>> Mike North: So that'll take care of that. And you should see basically this stuff gets eliminated, this editor is great for this. Gets eliminated from my to do list immediately. Actually this one we wanna keep.

This one we can fix here. This is a message that potentially could contain a string from the user, right? Because in our validation message, it says successfully created an account, and then the account name. Here, this kind of thing, this might be where it's appropriate. Because in this case, this is a layout file and it's meant to wrap some other HTML, and this is where the body would be placed.

So we gotta leave that as HTML because that's our code. Now as we descend farther, we just need to make sure anything the body turns into is protected. We do our due diligence there. This is gonna be the same deal, just another layout. This one we need to fix.

>> Mike North: This one we definitely need to fix. That is a user being allowed to put something in the URL.
>> Mike North: This is their account name. So this will fix one of those cross site scripting errors that's obvious. And then you may have noticed that if you went to the transfers page.

My point of putting that transfers page there is that that's a situation where you see all users' accounts.
>> Mike North: And the point there is that now, if you have multiple users in the system, this is where like one user of the system would be able to affect another user of the system.

In the accounts page, those are all my accounts, I'm only affecting me. But this is another place where you need to look for potential cross-site scripting, right? Where like user A's content shown to user B. That is how this kind of thing spreads. And this option group thing, right?

This is our account transfer code here, that is what we're fixing right now. Clean up a couple more. Another account name here, a username, no user found. This was the cross-site scripting through that user profile page where we passed in something to the argument. Now we can regard it as just regular html and at this point we've just really got body, body, body so the app should continue to work.

And we should find that now we're seeing this stuff treated as text. Now we see the script text, before they were being evaluated as code. Now they're just text. If you inspect an element on these things, the subtle difference you look for is that you see how the script tags here.

There in white, right? It's right above the orange line. That script tag is white. It is not blue because it's not being treated as HTML. Now the elements tab is lying to you a little bit, in that it's converting the escape values into text. So the color is what you look for there.

Additionally if you've used source, we should see maybe something a little more obvious? Yes, this is a little bit more obvious. So, usually these things align and we don't need to worry about, what's the difference between view source versus our dev tools? But in this case, view source is showing you what came over the wire, for real.

The elements tab is trying to be nice to us and say, rather than show you < instead of less than symbol, it's gonna try to render that for you. So this is where you wanna look. This is a useful thing to look at still. View source is still useful.

>> Mike North: All right, so that should have fixed this. Let's try the other attack here where we had user with the script.
>> Mike North: I will hopefully have this logout issue straightened out. Soon, yeah, here we go, there's the other one fixed, this is what we should be seeing. This here is not a vulnerability.

This is text being escaped properly, and we are rendering everything on the screen as we should. And this is us letting our cross-site scripting protection in this EJS library do its job as opposed to like us trying to be smart about it. Maybe we have to go back to our product owner and say, no we can't have italic bank account names now.

But we're also not vulnerable to this catastrophic security bug.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now