Stopping Clickjacking

[00:00:00]
>> Mike North: What hope do we have for defending against such an attack? X-Frame options, it's another HTTP response header. What you're doing here is you're informing the browser, when it downloads the document it doesn't know until it gets this document what it's allowed to do or not. If someone's put it in an I-frame, it receives this and it's gonna look at these headers and say, ha, I am not allowed to put this inside another page.

[00:00:24]
I'm not allowed to render this as anything other than the top level frame within a browser tab. Or same origin, the second option here, that would say, well only render this as a frame if the top level frame is always the same origin, right. This only pertains to the top level frame by the way.

[00:00:43]
For anyone who's got, who's unfortunate to have an app that has an elaborate set of nested i-frames, it's the outermost one that matters here. Keep in mind that Chrome and Safari are trying to move towards using a content security policy driven indicator called frame-ancestors. So you would want to use that.

[00:01:03]
And again we have our sources there. Just like we could say only allow scripts from yourself and from this domain. Similarly you'd say only allow yourself to be framed within x, y, z. Not all browsers respect this, older browsers, they predate this. There is a hack that we can do that will give us a similar effect.

[00:01:29]
It's a combination of a style tag and a little piece of script. So the style tag, it has an ID on it, and we're saying don't display the body. So the difference between visibility none and display none, just in case anyone needs to brush up on CSS, this will take up no space in the dom.

[00:01:48]
It's not that it's opaque, or sorry, it's not that it's translucent and still there, it's as if it's not there at all. You cannot interact with anything or see it if it's display none. And we add !important here. This is a good use of !important because we want to supersede any browser styles that may exist that apply to the body.

[00:02:08]
The code on the bottom basically says as you start up, compare yourself, which is self as sort of an alias for window, think of it that way, to the top frame. And you'll be able to access top if you are being iFramed currently, right. Sorry, it is there regardless, but it will be your self if you are also the top.

[00:02:33]
So if you are the top, grab this style tag and remove it. Otherwise we're going to set the location of the containing frame equal to our location. So it's basically saying, you just i-framed me? Alright, whatever page you are, now we're sending you to our domain. We're basically gonna pop out of the i-frame and take over.

[00:02:58]
So this will work in older browsers as well.