Content Security Policy Examples
This article contains a collection of different Content-Security-Policy examples.
Simple Policy
This policy includes two different directives: script-src
, style-src
.
The script-src
and style-src
specify where javascript and CSS are allowed to be loaded from.
self
is a keyword that means that resources can be loaded from the same origin.
Generic Unsafe Policy
By default Content Security Policy does not allow inline javascript. This means you can not directly embed javascript into your HTML files. This is because most client side attacks involve maliciously injecting javascript into HTML, so they are blocked by CSP.
You can relax this restriction by including the unsafe-inline
keyword in your script-src
(and/or style-src
). Keep in mind this defeats the purpose of CSP (info).
Content Security Policy also blocks eval
s and other dynamic javascript sinks. There are another common source of vulnerabilities because they sometimes allow untrusted input to be executed. This protection can also be turned off by specifying unsafe-eval
.
Starter Policy
This policy allows a number of resources to be loaded from the same origin, and blocks some of the riskier resources unless they are needed.
There are free tools that can automatically build policies for websites.
report-uri
Content Security Policy includes a mechanism to alert on blocked resources called report-uri
. When a browser blocks a resource, it'll send information about what it blocked to all URLs in the report-uri
list.
Using this, we can get insights about what's being blocked on our website, vulnerabilities, bugs and more. Csper is a tool that collections these reports and gives policy owners actionable insights on vulnerabilities in their websites (Learn More).
Other Sources
font-src https:;
allows any font to be loaded from an https websiteimg-src data: blob:;
allows inline images to be loadedobject-src 'none';
does not allow any objects (plugins, embeds, applets, etc) to be loaded
Clickjacking Protections
Previously to protect against clickjacking attacks (where an attacker sneakily embeds hidden iframes to get a victim to click on things they don't intent to click on), it was recommended to use the X-Frame-Options
header. It is now recommended to instead use the frame-src
directive.
The above policy allows the webpage to be included in an iframe it the parent page is from the same origin, or if the parent page is from any domain under *.mydomain.com
Upgrading Insecure Requests
The upgrade-insecure-requests
will automatically convert all http
requests to https
requests. This is similar to the HTTP Strict-Transport-Security
header, except HSTS works on the initial page load (and applies to resources served from a domain), and upgrade-insecure-requests
applies to all resources requested by a page.
nonce- and sha256-
This policy allows an inline javascript to execute via a nonce-src, and an inline style to be included by a hash-src.
The nonce-
source in the policy allows any <script nonce="5e442efeecd37e3d7e7ea5b6d6cd0dc2">
tag with the nonce included to execute. It is extremely important that the nonce is not guessable and completely random on every page request.
The sha256-
source in the policy allows any style with that hash. In this case body { "background-color": "red"}
. When generating these hashes, you have to be careful about spaces and newlines. The easiest way to get these hashes is from the error message in a browser console.
Full Example
Here is an example of what a full policy for a website might look like.
Recommendations
- For any policy, it is recommended to first run the policy in
report-only
mode so that you can be alerted of any issues - It is also recommended to always use a report-uri when deploying a policy to understand what is being blocked.
Related Articles
An Introduction To Content Security Policy
An introduction to content security policy and cross site scripting.
Getting Started with Content Security Policy using NodeJS/Express and Csper
This guide covers building and installing content security policy (CSP) on a nodejs express server. This guide covers content security policy, generating a content security policy, report-uri, inline scripts, and deployment.
Other Security Features of Content Security Policy
Other security features of content security policy including upgrade-insecure-requests, block-all-mixed-content, frame-ancestors, sandbox, form-actions, and more
Looking for tools to make CSP easier?
Csper has the tools to help you understand, deploy and manage your content security policy. Get started in minutes. Report aggregations, classification, analysis, alerting, realtime and more. Free 14 day trial.