In my previous article on security, I wrote about
npm audit and script integrity. Next up is Content Security Policy, or CSP for short.
This can either be added as response-headers on the server, or as a
<meta>-tag in the html.
I'm going to focus on the latter here.
A CSP will tell the webpage from which domains it will allow loading images, fonts, iframes, scripts etc. from:
<meta http-equiv="Content-Security-Policy" content=" default-src; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src; connect-src 'self'; media-src 'self'; object-src 'none'; child-src; frame-src; form-action; base-uri; manifest-src 'self'; ">
It's one long string within the double quotes, so I've added line-breaks and tabs for clarity.
Each entry ends with a semicolon
Note the word 'self'. That's how you allow to run the various types from the same domain as the current document.
To allow a script from an external site, maybe a delivery network such as unpkg.com, add
unpkg.com to the
script-src-part of the CSP:
script-src 'self' unpkg.com;
Cloudflare provides edge-caching and/or minification for assets, as well as a "Rocket Loader™", which will improve the paint-time for sites using JavsScript. I use it on my sites, but had to add this to my CSP:
script-src 'self' ajax.cloudflare.com;
A new entry is just a space, so combined, the current
script-src looks like this:
script-src 'self' unpkg.com ajax.cloudflare.com;
For Google Fonts, you'll have to add entries to both
font-src fonts.gstatic.com; style-src 'self' fonts.googleapis.com ;
For YouTube, you need entries to
frame-src since it's iframe-based and to
img-src as it provides thumbnail images as well. CSP is not always easy, but it's the quickest way to add an extra layer of protection to your site!
frame-src *.youtube.com; img-src 'self' img.youtube.com data:;
If you include the YouTube API as well, you must add it to the
YouTube-videos works with these additions, but will occasionally generate errors for it's "doubleclick"-network and others. You can just ignore these, or add them to your CSP (if you trust them!):
script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com img-src: https://www.google.com frame-src: https://bid.g.doubleclick.net
Vimeo just need the
But if you want to use their API, add an entry to
script-src as well:
With a CSP in place, marketeers can no longer just add a cool new tracking-script via Google Tag Manager or similar. So: be prepared to hear a lot of complaints, unless you create a CMS-block, where they can add/remove CSP entries themselves!
More info here:
And to help you create one:
While you're adding entries to your CSP, add a
<link rel="preconnect">-tag for the same entries to speed up communication between your site and these resources.
Example for "Google Fonts":
<link rel="preconnect" href="https://fonts.gstatic.com">
Thanks for reading!