Content Security Policy Reference

What is Content-Security-Policy?

Content-Security-Policy is the name of a HTTP response header that modern browsers use to enhance the security of the document (or web page). The Content-Security-Policy header allows you to restrict which resources (such as JavaScript, CSS, Images, etc.) can be loaded, and the URLs that they can be loaded from.

Although it is primarily used as a HTTP response header, you can also apply it via a meta tag.

The term Content Security Policy is often abbreviated as CSP.

CSP was first designed to reduce the attack surface of Cross Site Scripting (XSS) attacks, later versions of the spec also protect against other forms of attack such as Click Jacking.

CSP Directive Reference

The Content-Security-Policy header value is made up of one or more directives (defined below), multiple directives are separated with a semicolon ;

This documentation is provided based on the Content Security Policy Level 2 W3C Recommendation, and the CSP Level 3 W3C Working Draft

default-src

default-src 'self' cdn.example.com;

script-src

script-src 'self' js.example.com;

style-src

style-src 'self' css.example.com;

img-src

img-src 'self' img.example.com;

connect-src

connect-src 'self';

font-src

font-src font.example.com;

object-src

object-src 'self';

media-src

media-src media.example.com;

frame-src

frame-src 'self';

sandbox

sandbox allow-forms allow-scripts;

report-uri

report-uri /some-report-uri;

child-src

child-src 'self'

form-action

form-action 'self';

frame-ancestors

frame-ancestors 'none';

plugin-types

plugin-types application/pdf;

base-uri

base-uri 'self';

report-to

report-to groupName;

worker-src

worker-src 'none';

manifest-src

manifest-src 'none';

prefetch-src

prefetch-src 'none'

navigate-to

navigate-to example.com

require-trusted-types-for

require-trusted-types-for 'script'

trusted-types

require-trusted-types-for 'script'

upgrade-insecure-requests

upgrade-insecure-requests

block-all-mixed-content

block-all-mixed-content

Source List Reference

All of the directives that end with -src support similar values known as a source list. Multiple source list values can be space separated with the exception of 'none' which should be the only value.

Content-Security-Policy Examples

Here a few common scenarios for content security policies:

Allow everything but only from the same origin

default-src 'self';

Only Allow Scripts from the same origin

script-src 'self';

Allow Google Analytics, Google AJAX CDN and Same Origin

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

Starter Policy

This policy allows images, scripts, AJAX, form actions, 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.

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'

Content-Security-Policy Error Messages

In Chrome when a Content Security Policy Script Violation happens you get a message like this one in the Chrome Developer Tools:

Refused to load the script 'script-uri' because it violates the following Content Security Policy directive: "your CSP directive".

In Firefox you might see messages like this in the Web Developer Tools:

Content Security Policy: A violation occurred for a report-only CSP policy ("An attempt to execute inline scripts has been blocked"). The behavior was allowed, and a CSP report was sent.

In addition to a console message, a securitypolicyviolation event is fired on the window. See https://www.w3.org/TR/CSP2/#firing-securitypolicyviolationevent-events.

Server Side Configuration

Any server side programming environment should allow you to send back a custom HTTP response header. You can also use your web server to send back the header.

Apache Content-Security-Policy Header

Add the following to your httpd.conf in your VirtualHost or in an .htaccess file:

Header set Content-Security-Policy "default-src 'self';"

Nginx Content-Security-Policy Header

In your server {} block add:

add_header Content-Security-Policy "default-src 'self';";

You can also append always to the end to ensure that nginx sends the header regardless of response code.

IIS Content-Security-Policy Header

You can use the HTTP Response Headers GUI in IIS Manager or add the following to your web.config:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="default-src 'self';" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy