Transcript from the "Challenge 4: Solution" Lesson
>> Mike North: Okay, So I'm taking advantage of the fact that we're able to make a get request and mutate data within this system. So I've basically figured out, hopefully my example's clear enough. We've got numbered accounts. If you inspect element, you can look at the select, and the options, and the IDs on the options, sorry, the value property of each option.
[00:00:20] And you can figure out that this is your source and your destination account. I'm transferring a dollar at a time. So if I happen to be authenticated, obviously the app has to be running here. Let's make sure that is the case, and get rid of this, squish this over.
[00:00:40] We can kill this shell. Sorry, folks, a little window management going on.
>> Mike North: Oops, apparently I'm supposed to start that way. And we're going over plain HTTP still, we will fix that later. So, we can log in. All right, so now I'm logged in. And if we go to Transfers here, and if I run this code and refresh,
>> Mike North: Let's see, I've got 12, 37, and 550. I may have dropped this database, and the account number's gonna be different at this point. All right, let's just inspect element and do this from scratch. We just need to change those account numbers. So there's our form, we can look at the select here.
[00:01:39] And we can see that there's, let's pick the biggest one with the most money in it. So there's one with 550 in it. We're gonna transfer from account 3. And let's say if you created multiple users, you should be seeing the 2 account is an opt group select, where you have each user and all of their accounts.
[00:01:58] So I'm gonna just transfer to one of my own accounts, from number 3 to number 1. So from number 3 to number 1, Run it. And we should be able to go back here when we refresh.
>> Mike North: And it looks like we've just gone up in value. So let's go over here again.
[00:02:19] Say that's another page view, refresh, looks like we've got another dollar. And so effectively now we've used, this is one of the more horrific kind of cross-site request forgery, where someone just has to look at it. By the time you click that link, it's over, you're done. The money's been transferred.
[00:02:39] So that is attack number one. Attack number two, we could use a form post. So I'm gonna get rid of just this one line here. Then we could say form, and the action. I'm gonna actually do this the really easy way. Inspect, we're gonna grab the form itself.
[00:03:00] Where is that form tag? There it is. Right-click, and Edit as HTML. It's gonna basically give you a big text area with the whole thing in there. We'll trim everything down, and get it back into a meaningful state here. So we don't need any of these select fields.
[00:03:21] We just need a field that's called accountFrom. So we can say, input type="hidden" name, and then name is accountFrom.
>> Mike North: And value="3". So we can now get rid of this select.
>> Mike North: And obviously, we don't need the label. And obviously, we don't need all of the dom around it.
[00:03:50] Because we're not, ultimately, we would hide this somewhere.
>> Mike North: So get rid of that. And now we've got accountTo, so I'm just gonna copy this one. Say accountTo, paste that in, and we're gonna go to number 1. And lastly,
>> Mike North: We've got this textfield. We can just copy that as-is, paste it here,
>> Mike North: So effectively, we've got a form that represents the same structure of data. Keep the name as amount, type is gonna be hidden. Let me just move this around so we're all lined up. We can see hidden, hidden, hidden. So there's nothing on the screen. We don't need placeholders.
[00:04:41] The value is gonna be, let's do 100 bucks at a time.
>> Mike North: All right, so now we've got the form. And what we're gonna wanna do at this point is then down here say, script,
>> Mike North: Well, we can give it an id, we'll say, money. script, we'll say document.getElementById('money').submit,
>> Mike North: And when we run this, let me open this up here,
>> Mike North: Let's clear these and Run.
>> Mike North: What just happened? Let's see if we can go back here and look.
>> Mike North: I'm not authenticated anymore. That would do it,
>> Mike North: Interesting, so let's see, there's my form action.
>> Speaker 2: It's relative path.
>> Mike North: It's a relative path, thank you.
>> Mike North: Good catch, so save that.
>> Mike North: Run. Okay, so what we're seeing here is the post response. That doesn't really matter though, cuz the funds have been transferred. So this is one of these where, we could have run it in an iframe maybe, in an effort to kind of keep it all hidden away.
[00:06:24] The same way I rick-rolled myself, I didn't really see anything. It might have been just slightly off the right edge of my screen, or somewhere that I couldn't really access it. But the point is, by the time you see this, it's done. And if we hit Run with JS again,
>> Mike North: Maybe we have to, let's see, can we say Back? Obviously, the fiddle is not happy with us here. Yeah, it's definitely not, but the point would be the money has been transferred, it's gone. And there are ways of hiding it as well. So that is the form post, and the get request flavors of a CSRF attack.
[00:07:08] You're not safe with either. If you allow either of these, they're both serious. Get requests in particular are the most serious, because you don't have to trick anyone into clicking a link. You can embed that image tag, or other things that initiate requests, like an iframe tag or a CSS background image.
[00:07:46] You are not allowed to put that in your code for a modern version of Chrome. You certainly can put a URL that, on the back end of some application, does some damage. So that's why we conform to RESTful HTTP verbs, and we never mutate data on get requests.
[00:08:07] But you can still do this form post thing, and it is trivial to buy a domain that you can get someone to click on. If you buy an SSL certificate for it, it'll look secure. So this is why we have to talk about CSRF protection.