Contents
Intro
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:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src https://google.com; child-src 'none';">
Directives
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.
default-src
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';
connect-src
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;
img-src
This affects where you can load images from.
Content-Security-Policy: default-src 'none'; img-src https://some.img.host https://another.img.place;
form-action
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.
Values
You can specify many different types of values for each directive and its important to understand the affect of each one.
'none'
This won't allow loading of any resources.
Content-Security-Policy: default-src 'none';
'self'
Only allow resources from the current domain.
Content-Security-Policy: default-src 'self';
Hosts
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;
Schema
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:;
Nonce
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;
SHA
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';
Summary
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!
Top comments (1)
Hey, great post! I would add that this is a good defense against XSS (cross-site scripting) specifically. Maybe an example attack along with how to prevent it using CSP would be a good addition. All the best.