Challenge 7: Solution

[00:00:00]
>> Mike North: We are going to learn how to defend against a clickjacking attack and we're gonna do it in a way that will give us some safety in older browsers and in modern ones, so the first thing we'll need to do is. I'm just gonna grab these snippets of code here.

[00:00:20]
And we're gonna put them into basically the equivalent of our index.html. So this here is the script, we'll put it down here.
>> Mike North: And indent that in a little bit. Before I go too much farther here, I wanna just show you what this self in this top thing actually does.

[00:00:46]
So self is gonna give you window. Top is another global variable that gives you window as well. If we look at our clickjacking example and turn that opacity back up
>> Mike North: And we just need DevTools here. So I'm gonna use my console, and I wanna execute from this frame here.

[00:01:07]
So you can drop down from the top of your console. You can pick which frame you want. The rest of these are extensions. So here self is that window. Top is a different window.
>> Mike North: So that's,
>> Mike North: So this code is sandbox so I can't access the outer location.

[00:01:34]
That's fine, though. We do know that top and self are not equal. Whereas in the case where we're running in full screen,
>> Mike North: They are equal. So our check is based around that. So going back to the slides, we'll grab this style thing, and where we're at now, effectively, is we can add this style.

[00:02:03]
It has the tag in it too.
>> Mike North: And walking through once more, basically if we find that self does equal top that means we're not currently being framed inside something. And we will remove the clickjack style element up here, which until that point has been hiding of the content from the browser, so no one can click on that.

[00:02:31]
Finally, in the event that we find something amiss, we will attempt to navigate the outer frame now this is not going to cause our JS Bin to necessarily go to the other frame because we're sandboxed we'll have to actually see what happens. So in this situation we're just gonna set a header and it's gonna be x-frame-options.

[00:02:57]
And I'm just gonna say, deny. We don't need anything special there. We have no need to iFrame this app, and so we're not gonna add that. Okay, so refresh.
>> Mike North: Must be a valid HTTP token. Validated header? What am I doing wrong here?
>> Mike North: Sorry, it's comma separated.

[00:03:24]
It's not an object.
>> Mike North: And the complaint now is, let's just restart it.
>> Mike North: Come on.
>> Mike North: All right something's not happy.
>> Student: You need to add next.
>> Mike North: Add a next. Thank you. Sorry.
>> Mike North: There we go. Okay, so, we're getting something that we expected, which the in line script we added.

[00:04:13]
That needs to be added to our content security policy so that we can be sure, like if someone manages to inject something into that somehow. That would script-src we can just add another element here that looks like that you have to keep the sha inside quotes as well and now we're back.

[00:04:33]
So now that we're serving this up let's see what happens over here. If we run this code again, we get an error saying it refused to display local host 3000 in a frame because X-Frame-Options was set to deny. So essentially, we have mitigated this risk. We're no longer susceptible to clickjacking attacks.