I’ve been doing some work on CSP’s to make sure my Observatory scores are nice and high. These are pretty basic notes but the documentation is weird for this and it took me longer than it should have.

There’s a couple things more than the MDN docs I’ve learnt along the way. As a bunch of this doesn’t seem to be easily found together in documentation.

Gatsby

Start with the gatsby-plugin-csp but then also add the gatsby-plugin-netlify

The way Gatsby deals with images there is no way to get inlines out of the CSP

WordPress

Theres a little problem here with having inline scripts makes the CSP considerably weaker but that’s also how the editor works so I’ve been adding what I can to the .htaccess file and then some more through the meta tag in the themes header.php file

.htaccess file

The CSP needs to be wrapped in this if statement

<IfModule mod_headers.c>
    Content-Security-Policy "default-src 'self';
</IfModule>

multi line blocks need line breaks with slashes like these that are not needed in the meta tag

Header set Content-Security-Policy: "default-src 'self'; \
style-src 'self' 'unsafe-inline'; \
font-src 'self' ;"

Jetpack

When dealing with a theme using jetpack theres an inline script on every page that’s easy to grab and throw the hash into the script-src on either Edge or Chrome writing it out for you in the console.

Reports

In the .htaccess file add the line

report-uri /csp-violation-report-endpoint.php

This is referencing the root of the site beside the .htaccess file I’ve been adapting on the file here

This Project contains