Content Security Policy Templates

Here a few common scenarios for content security policies:

Allow everything but only from the same origin

default-src 'self';

use this rule

Only Allow Scripts from the same origin

script-src 'self';

use this rule

Starter Policy

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';

use this rule

This policy allows images, scripts, AJAX, and CSS from the same origin, and does not allow any other resources to load (eg object, frame, media, etc). It is a good starting point for many sites.

Allow Google Analytics, Google AJAX CDN and Same Origin

script-src 'self' www.google-analytics.com ajax.googleapis.com;

use this rule

Social media widgets

  • Google's +1 button includes script from https://apis.google.com, and embeds an iframe from https://plusone.google.com. You'll need a policy that includes both these origins in order to embed the button. A minimal policy would be script-src https://apis.google.com; child-src https://plusone.google.com. You'll also need to ensure that the snippet of JavaScript that Google provides is pulled out into an external JavaScript file. If you had an existing policy using child-src, you would need to change it to child-src.
  • Facebook's Like button has a number of implementation options. I'd recommend sticking with the iframe version, as it's safely sandboxed from the rest of your site. That would require a child-src https://facebook.com directive to function properly. Note that, by default, the iframe code Facebook provides loads a relative URL, //facebook.com. Please change that to explicitly specify HTTPS: https://facebook.com. There's no reason to use HTTP if you don't have to.
  • Twitter's Tweet button relies on access to a script and frame, both hosted at https://platform.twitter.com (Twitter likewise provides a relative URL by default: please edit the code to specify HTTPS when copy/pasting it locally). You'll be all set with script-src https://platform.twitter.com; child-src https://platform.twitter.com, as long as you move the JavaScript snippet Twitter provides out into an external JavaScript file.
Content-Security-Policy:
script-src https://apis.google.com https://platform.twitter.com; child-src https://plusone.google.com https://facebook.com https://platform.twitter.com

use this rule

Lockdown

Assume for a moment that you run a banking site, and want to make very sure that only those resources you've written yourself can be loaded. In this scenario, start with a default policy that blocks absolutely everything (default-src 'none'), and build up from there.

Let's say the bank loads all images, style, and script from a CDN at https://cdn.mybank.net, and connects via XHR to https://api.mybank.com/ to pull various bits of data down. Frames are used, but only for pages local to the site (no third-party origins). There's no Flash on the site, no fonts, no nothing. The most restrictive CSP header that we could send in this scenario is:

Content-Security-Policy:
default-src 'none'; script-src https://cdn.mybank.net; style-src https://cdn.mybank.net; img-src https://cdn.mybank.net; connect-src https://api.mybank.com; child-src 'self';

SSL Only

A wedding-ring discussion forum admin wants to ensure that all resources are only loaded via secure channels, but doesn't really write much code; rewriting large chunks of the third-party forum software that's filled to the brim with inline script and style is beyond his abilities. The following policy would be effective:

Content-Security-Policy:
default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline'

use this rule