Content Security Policy

hello again this is Kyle today let's break some code we're gonna be talking about content security policies and I have here an example website and how those websites constructed is not very important because basically content security policies can apply to any websites it doesn't matter how its constructed but I'll go ahead and I'll walk through this app just so you can get your bearings on what's going on here so first we have just a simple form of where I think bears are the best and then I want to ask other people what they think and so they are free to type in whatever they want whatever they want into the box and then hit Send and then it will list all the other people's thoughts on my website and so here we just have an HTML file with all the HTML and then it's just going to be using some templating here to go through and loop through all the comments and so if we go here to our server all of this is not really important it's it's some basic stuff and this is not necessary for content security policy it's just a example application just to just show you and so anyways when we're going to request the index file we're just going to browserify our index jas here this is all our client-side scripts and then if they're requesting the CSS we're just going to give them the CSS file directly here and then if they want to add a comment what we're going to do is we're going to get the data that they're posting to this and then we're gonna put it into our database and then by default we're just going to serve off our template here which is our index file that gets rendered using this lodash template here and it feeds in all the comments that we get from the database here and the how this is all constructed is really again not important it's just an example app to show you some of the security concerns around it okay so we have this simple form in which we want users to input what they think about bears and this might be hard to believe but some people on the internet are not very nice and they may enter something of this sort a script tag with the document.body innerhtml set to their own message and so when we send this through you'll see that our website has been hacked and even when we refresh this is the message we get any visitor that goes to our websites will get the same message - that's not right I don't want people to think that Bears are lame I don't think bears are lame so if you look at the actual source of the website you'll notice that it is our normal source code except that in here where it's supposed to display the users comments its injecting this script tag this is known as a cross-site scripting attack or an XSS attack so one way to fix this is to sanitize the the input as it comes in before which is our database so there's many sanitization libraries on NPM I'm gonna be using this one called sanitized HTML here I'm going to type NPM I or MPM install sanitize HTML to install it and start my server back up here again and then I'm going to go here to our server and before it inputs our comment here into the database I'm going to sanitize it using this library so we'll require it up here sanitize require sanitize HTML and what this will do is they'll strip out all of the those nasty HTML stuff that we don't want we just want normal text contents and so then now when we go back in refresh our server here and then go back to the site and insert into this this this attack here you'll see that we don't we no longer get it when it before enters our database it strips out it strips out that script tag so that's one way to do it another way to do it that we could do is lo - by default or when you use this equal sign here it inserts the the HTML unex caped but instead if you use this you can escape the HTML so there's one way to do it when the end when the user's inputs coming into the server and there's another way when it's coming out and each of your depending on your template library and whatever you're using will have different ways of escaping the any any kind of thing that's displayed and really you should be doing both you should be escaping when it's going in and sanitizing what's going in and escaping when it's coming out just in case somebody managed to inject something in your database through some method it still won't be displayed on the output and the vice versa now this app is very simple it doesn't really do much and most apps are not that simple they do a lot of things and so 99% of the time you really don't want users to run their own script tags on your site so wouldn't just be easier just to disable all of that in the browser and that's exactly what a content security policy does so I'm going to remove the escaping here and remove the sanitization here so here in our server all we need to do is we need to send an HTTP header to the browser to tell it to enable this content security policy and so it doesn't matter whether you're using Ruby or Python or PHP or any server really each server has their own method of responding with headers here with nodejs we can do the response we can say set header here and and we can set the response header here and so one of the headers I'm going to set is called content security policy what - is in between and then what I'm going to do is I'm going to set a script - source and in quotes - self now I'm going to go here to my server and I'm going to restart it and then go here to my website refresh the page and try this attack once again and you'll see here at the bottom here we our browser has refused to execute execute the inline script because it violates the content security policy so we don't have any sanitization going on right now but it's recommended that you do sanitize you still continue to but in case maybe we missed a part that we didn't sanitize or the the attacker has figured out a way around our sanitization the browser still here didn't allow this attack to take place so just with one line here one line we're adding here we have mitigated so many different attacks that could have been done on on our browser so currently our policy disallows any kind of inline scripts or script sources that don't come from self or it's our own domain now there might be instances where you actually want scripts to be injected or come from other sources such as if you're using google fonts then what you would simply do is using a space to separate it you specified the domain names that you a trust so we can say API is google.com here and we can add that to our our content security policy and so now if Google needs to add any scripts in order to run it we'll be allowed to do so so that takes care of JavaScript but now what about CSS many people look over style sheets as a potential security threat but let's go ahead and check our app here and I'm gonna insert in something else that's a little bit more malicious here Bears are the best just kidding they are lame oh no using a CSS attack here they have hacked our website once again and anybody that goes to it is gonna think that I'm just kidding that they are lame and that's not what I that's not what I think so we need to we need to make sure that this doesn't happen as well and so we do the same thing but instead we're gonna we're gonna put a little semicolon here to say that we're gonna specify a new role here we're gonna say style - source is self and so this means we only want styles to come from ourself as well and not allow any of this inline stuff going on and so now when we go here and role our server and refresh the page you see that it also has refused to apply this inline style because it violates our content security policy exactly what we want they can't hack our website using style tags either so now this does block inline styles on our page and inline styles have become a lot more popular more and more frequently used now and so there might be some instances where we don't really want to block them now we can we can there's their settings in our in our content security policy where we can say unsafe inline that that basically allows us to put an unsafe inline Styles and we don't want to do that though we want to just we want to work around our own kind of thing here so let me give you an example of what an inline style would be so we have this h1 tag here for bears are the best here and I'm just gonna query selector it h1 here and then maybe you know I'm doing so maybe I need to do some kind of calculation that can only be done once the the JavaScript has been loaded and everything and we need to detect maybe like the width or or something to Center it or there's whatever reason we're setting this this style attribute here on on this tag we're setting it dynamically and we need to here so for just this example here I'm gonna set it to red and then let's add like a text shadow because it's gonna look super super cool I don't know black text shadow here so we're gonna set this this style attribute here and just to show here I'm gonna disable our content security policy and roll our server just to show what I want it to look like oh no we've been hacked let me go ahead and clear this database here first clear out any any of that malicious stuff that we've we've been attacked with before ok so now this is this is what we want because that looks awesome you know it's it's that but so now we're gonna go ahead and rename our content security policy which includes the style source set self-declaration here and roll our server to get that and so now when you do this it's refusing to apply this inline style to it because this part here when we're setting a style attribute this is an inline style this violates our content security policy and it's really simple to get around instead of setting the the style attribute you should set it directly how you should so we'll say style color equals red h1 style text shadow equals one pixel one pixel one pixel black so we're setting this these these properties directly on the style object here and so now when we refresh the page you see even though we have our content security policy in place we still get to the the inline Styles we want so it's just slight difference here is instead of applying it to the style tag which you know users may our attackers may be able to inject some malicious code into here we can simply apply it directly to each of the properties in which is a bit more safe now if you if you're not really a fan of I mean maybe you have a whole bunch of styles to apply and you're not really a fan of this there's a I got a fancy trick from Matt Dessel des low year I don't know how to say his last name and I apologize so what we're gonna do is we're gonna install we're gonna do NPM install object assign here and save that to our dev dependencies and then I'm just gonna go ahead and require it here so say object a sign now object a sign is an API that's coming in newer browsers and it may not be available it's not it's not available everywhere yet oh I forgot an S here let's make sure we spell things correctly with two S's and i got two S's here okay yeah there's definitely two S's there let's start up our server here so object a sign is yeah it's a it's a new it's a new API in in newer browsers it may not be available here but cinder source has got us covered here with this library that that gives it as you know this this this thing that we want here so instead of doing it this ugly way we can do it this way we can say sign and we're gonna supply an object here and we're just going to give it properties that it's gonna assign to this the style object here so we'd say color red and text shadow and I'm not gonna type that again because typing that three times is just ridiculous and so let's save that and our servers running so let's go ahead and refresh the page and so this is just a a nice fancier way and it's still secure and we can set all the CSS properties in line as much as we want so I hope this has convinced you to enable the content security policy on your website and not only should you be sanitizing the input as it's coming into your database or server or wherever lives and then escaping the output as it goes out to the browser but I really heavily encourage you to enable a content security policy for both JavaScript and style sheets and just make everything make make your life easier make everything more secure and don't have to deal with those nasty cross-site scripting attacks and if this has helped you then please share the video and help others and if you want to see more videos please subscribe thanks again for watching

Channel: Kyle Robinson Young

Views: 41,310

Keywords: javascript, code, open source, web development, security, web browser

Id: JbfNWg6JS4U

Length: 14min 37sec (877 seconds)

Published: Wed Oct 07 2015