CSP - Content Security Policy


Lastly but by no means least, carrying on from my previous blog about website security week, we're going to talk about CSP or Content Security Policy.

CSP is Content Security Policy this is one of the most powerful tools in your arsenal to secure your website.

These are two ways to to set your content security policy, either as a header Content-Security-Policy or via a meta tag in your HTML for example:


The content policy is made up of directives (the thing to restrict) and the value(s) on how it can be restricted. We won't cover all all the possible directives in this blog but you can find a list of all the directives here.

They syntax is as follows:

Content-Security-Policy: directive value; directive value value;

There are some key directives you should set.


As the name suggests this is the fallback if there aren't more specific directives used. I'd recommend setting it to 'none'

Content-Security-Policy: default-src 'none';


This affects what you can 'connect' to via fetch and make HTTP requests to.

Content-Security-Policy: default-src 'none'; connect-src https://some.api.com;


This affects where you can load images from.

Content-Security-Policy: default-src 'none'; img-src https://some.img.host https://another.img.place;


This affects where you can send form submissions to via the HTML form attributes.

Content-Security-Policy: default-src 'none'; form-action https://some.api.host;

These are just a handful of the directives you should set on your content security policy. The more specific your content security policy directives the stronger your policy.


You can specify many different types of values for each directive and its important to understand the affect of each one.


This won't allow loading of any resources.

Content-Security-Policy: default-src 'none';


Only allow resources from the current domain.

Content-Security-Policy: default-src 'self';


Allow loading from any number of hosts, it can also have an optional protocol e.g. http:// or https://, an optional port e.g. some.website:8080, and/or an optional path e.g. https://some.website/path/to/file.

Content-Security-Policy: img-src https://some.img.host some.other.images.com img.org:8080 img.co.uk/path/to/img.jpg;


You can set just a schema e.g. https:, http:, data: but I generally wouldn't recommend this except perhaps for inline images which are data:xxxx.

Content-Security-Policy: img-src data:;


This works in conjunction with the script HTML tag nonce attribute, the server must generate a unique value.

Content-Security-Policy: script-src nonce-DhcnhD3khTMePgXwdayK9BsMqXjhguVV;


This is a SHA hash of a resource for example, if you apply a content security policy the browser will generate these for you to use if you cannot use any of the other values.

Content-Security-Policy: script-src sha256-jzgBGA4UWFFm;

You can use any of these values in combination with one another to lockdown your content security policy as much as possible.

Here is an example:

Content-Security-Policy: default-src 'none'; script-src 'self' https://static.cloudflareinsights.com; img-src 'self'; style-src 'self'; connect-src 'self' https://cloudflareinsights.com https://api.challenge.new; font-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; manifest-src 'self';


In summary, setting a content security policy is one of the most powerful tools in your arsenal to secure your website. It can take some time to set up a strict content security policy but that time is payed back tenfold in the benefits it provides.

Set that content security policy now!

Happy Building!

These are webmentions powered by webmention.io