CSP - Content Security Policy

Contents

1. Intro
2. Directives
3. Values
4. Summary

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!