Challenge 7: Defend Against Clickjacking

[00:00:00]
>> Mike North: What I want us to do, you're gonna just work in, I'll show you the layout file you'll be using, it's sort of the top most layout, it has the HTML tag and the body tag. You're going to add a browser defense for clickjacking, both for modern browsers, you'll do that modification in the same place you were doing the CSP stuff server/index.js and then we'll just drop the stuff in as inline scripts for legacy browsers.

[00:00:28]
Where we don't find a CSP we're just gonna basically say you're invisible until you prove that I'm not being Iframe and if I am being Iframe I'm taking over and I'm popping out. So just to show you exactly where you'll make that modification.
>> Mike North: Close this older stuff, so the top most layout, the one that wraps everything, it's in the server, views folder, and it's called main-layout.ejs.

[00:01:01]
So here you could add your style tag right there and you could add a script tag right at the bottom of the body or whatever and you should be good to go. Now, you may get some content security policy errors, but you know that we can add those sha, those hashes, to our CSP to update it appropriately.

[00:01:21]
That's the legacy browser solution, the modern browser solution you'll go to server/indexjs and you'll basically just add a header here. Let me find an example of a header that's been added. There is none so let me just show you how you would go about doing it.
>> Mike North: App use, request, response.

[00:01:55]
>> Mike North: And then, response, set header and then you pass in the name and the value.
>> Mike North: So you just do an app.use, and then it's basically these are the middle words that take in a request, they return a response. You'd add a new one that does X-Frame-Options, just like that.