How to implement content security policy?

Question

There's good articles explaining the options for CSP like this one: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Perhaps it's completely obvious because I can't find any good examples but how do you actually implement CSP in practise?

In PHP you can set the header on a page you serve, but what if you just have a HTML file? Do you have to do it through your webserver, apache or similar? That doesn't seem an easy approach.

What's the best practise here? Every individual page served should have the header manually set?

Thanks!

Answer 1

At the end of the day the choice is yours. You can set it globally in your apache webserver. In which case it will apply to every page. And you can then also set the headers on individual pages if required for a more granular approach.

Check these sites for help in building your CSP rules:

https://csp-evaluator.withgoogle.com/

https://report-uri.io/home/generate

Scott Helme knows a lot about the subject and has some good examples as well. You can also send your reports to his website for some basic analysis.

https://scotthelme.co.uk/content-security-policy-an-introduction/

This may also be of interest for apache configurations

Generate a nonce with Apache 2.4 (for a Content Security Policy header)

I also strongly recommend that you read this paper which talks about some newer (and simpler looking) configuration approaches and browser backwards compatibility

https://www.websec.be/blog/cspstrictdynamic/

An this is also an excellent paper "CSP Is Dead, Long Live CSP!" from google research, in particular refer to section 4.IMPROVING CSP, by bypassing whitelists and propagating trust.

https://research.google.com/pubs/pub45542.html

Do lots of reading and when you ready to implement, use the REPORT ONLY mode directive so you get the console messages without the policy enforcement.

Content-Security-Policy-Report-Only: <policy-directive>; <policy-directive>

Once your happy then you can enforce the rules:

Content-Security-Policy: <policy-directive>; <policy-directive>

Answer 2

That doesn't seem an easy approach.

Yeah, it's not. There are some clever shortcuts you can take, however.

how do you actually implement CSP in practise?

In PHP you can set the header on a page you serve, but what if you just have a HTML file? Do you have to do it through your webserver, apache or similar? That doesn't seem an easy approach.

I wrote a command line PHP script that took a JSON blob like code block A assembled a string that looks like code block B and saved it to a separate file.

A:

{
    "script-src": [ "self",  "https://apis.google.com" ]
}

B:

add_header Content-Security-Policy "script-src: 'self' https://apis.google.com";

Then I added a line to configure my nginx configuration for that virtualhost to include the generated CSP directive:

include /path/to/script/output.conf;

As a consequence of this system, if I wanted to make a change to the CSP headers, I only need to edit a JSON file.

And that's how I made CSP headers easy to manage. Your mileage may vary.

Here it is: CSP Builder.

Answer 3

If you are running Apache you can use .htaccess to do this

Put a file named .htaccess in your project path (usually something like) /var/www/myProject if it doesnt already exist for other reasons. In this case just add the following header rule:

Header set Content-Security-Policy "
    default-src 'self';
    script-src 'self' www.google-apis.com *.cloudflare.com someotherDomain.com;
    img-src 'self' *.cloudflare.com;
"

Now modern browsers will only execute scripts from your domain or google-apis.com or cloudflare.com or someotherDomain.com Images will only be loaded from your domain and cloudflare. Everything else will only be allowed from your domain.

Very good source: ole.michelsen.dk