DEV Community

loading...

CSP - Content Security Policy

Jordan Finneran
Tech Lead, Physics Grad, Video/Photographer, Tech Fan, All Round Tweeter!
Originally published at jordanfinners.dev ・3 min read

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';">
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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'; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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'; 
Enter fullscreen mode Exit fullscreen mode

'self'

Only allow resources from the current domain.

Content-Security-Policy: default-src 'self'; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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:; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode




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!

Discussion (1)

Collapse
aghost7 profile image
Jonathan Boudreau

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.