Content Security Policy Headers

It is much easier for hackers to inject CSS and JavaScript inline into your web page than it is to alter or add external files. With modern CSS and JavaScript we can keep our own CSS and JavaScript in separate files attached to the HTML only through link and script tags. With all of our code in separate files we could then increase the security of our page if there was a way to turn off processing of any CSS and JavaScript that is inline in the page as the only such code would have been injected by a hacker and so we wouldn't want it to run.

Content Security Policy Headers allow us to do exactly that in the browsers that understand these headers (which all modern browsers do). So if we install one of these headers we can make our site more secure against hackers by blocking code from running where we don't want it to run.

These headers work with a lot more than just CSS and JavaScript. The following is a list of all the different options that can be made more secure.

These get combined together in defining your security policy. The following CSP allows access to everything on the local domain as well as Google analytics and CDN scripts. If default-src were to be set to 'none' then objects, frames, media etc would be blocked.

default-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';

So how do you add these headers to your site? Well the simplest way is to just add the header to your entire hosting. How you do this depends on which server your site is running. Here's how to apply it to an entire server:


Header set Content-Security-Policy "default-src 'self';"


add_header Content-Security-Policy "default-src 'self';";


      <add name="Content-Security-Policy" value="default-src 'self';"/>

You can also apply this on a page by page basis by writing the headers from whichever programming language you are using on the server to generate the web pages.

go to top

FaceBook Follow
Twitter Follow