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.phpThis is referencing the root of the site beside the .htaccess file I’ve been adapting on the file here
