Challenge: 5: Defend Against CSRF

[00:00:00]
>> Mike North: So, what we will do now is let's defend against that CSRF attack. So you have already installed another express thing. It's called C surf. And it's for defending against CSRF attacks. This is what lets you add a token and add a token when you render a form, and then verify when that attempt to modify the form comes back in.

[00:00:27]
You can see, yes, that was a token that looks like one I generated. You will be working in these two files, and I'm about to show you where exactly you may make your change. Because there's some code there. We should be able to look at this previous example of CSRF attacks.

[00:00:47]
This JS bin that I had should not work anymore once we are done. So with that let me just open up the code and show you where you may find it valuable to insert some stuff.
>> Mike North: So we'll be dealing with, I only want you to focus on one area.

[00:01:03]
We'll be dealing with that form where you transfer funds from one person to another. That seems to be a pretty good place to have CSRF protection. So in the server folder you'll see a transfers JS file. So we'll look at that one. And we'll look at the associated HTML like thing that goes along with it.

[00:01:26]
That's in the views. It's the server views folder. And it's transfers.ejs. So you should only need these two files.
>> Mike North: So what you'll end up doing is you'll probably up near the top of this JavaScript file import this CSRF library. And then you can create what is called, if I get my auto-completion here, so you can, thank you.

[00:01:54]
So up near the top you'll add to your imports this CSRF file, I'll move this over for now.
>> Mike North: And then down here, when you're, these we would call route handlers, right? They receive a request, they're responsible for generating a response. Between this path and the function that ultimately does the work here, you can add any number of what are called request handlers.

[00:02:23]
And in fact, this function at the end, that's also a request handler. So the way this CSRF library works, you will end up creating a course verifier thing that will take care of token generation and token verification. And you'll probably,
>> Mike North: Create something that looks like this. And you'll do the same thing down here.

[00:02:45]
I will tell you router.all, if you looked at router.get and router.all, what would you think all might mean there?
>> Student: So that all the not handled by the rest of them, right?
>> Mike North: This is all HTTP verbs. If it's a get or a post. So this is why we can use that image tag attack.

[00:03:08]
So feel free to solve this one by just saying, post. We don't wanna allow you to mutate data with a get request. So you can defeat that one attack that way, but you'll also have to add something like a CSRF verifier there. So let's take ten minutes to go ahead and set this up.

[00:03:27]
I've kinda taken you, let's say, 10% of the way there. And in the end, and I'll post this, the JS bin, in chat with that form post example. You should be able to safely run the script in that JS bin and see that in your console, you're not able to mutate that data.