The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring what dynamic resources are allowed to load via a HTTP Header.
| Header | Chrome | FireFox | Safari | Internet Explorer |
|---|---|---|---|---|
Content-Security-Policy CSP 1.0 |
25+ | 23+ | 7+ | - |
X-Content-Security-Policy |
- | 4.0+ | - | 10+ Limited |
X-Webkit-CSP |
14+ | - | 6+ | - |
Sources: caniuse.com/contentsecuritypolicy & Mozilla
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 1.0 W3C Candidate Recommendation
| Directive | Example Value | Description |
|---|---|---|
default-src |
'self' cdn.example.com |
The default-src is the default policy for loading content such as JavaScript, Images, CSS, Font's, AJAX requests, Frames, HTML5 Media
See the Source List Reference for possible values. |
script-src |
'self' js.example.com |
Defines valid sources of JavaScript. |
style-src |
'self' css.example.com |
Defines valid sources of stylesheets. |
img-src |
'self' img.example.com |
Defines valid sources of images. |
connect-src |
'self' |
Applies to XMLHttpRequest (AJAX), WebSocket or EventSource. If not allowed the browser emulates a 400 HTTP status code.
|
font-src |
font.example.com |
Defines valid sources of fonts. |
object-src |
'self' |
Defines valid sources of plugins, eg <object>, <embed> or <applet>.
|
media-src |
media.example.com |
Defines valid sources of audio and video, eg HTML5 <audio>, <video> elements.
|
frame-src |
'self' |
Defines valid sources for loading frames. |
sandbox |
allow-forms allow-scripts |
Enables a sandbox for the requested resource similar to the iframe sandbox attribute. The sandbox applies a same origin policy, prevents popups, plugins and script execution is blocked.
You can keep the sandbox value empty to keep all restrictions in place, or add values: allow-forms allow-same-origin allow-scripts, and allow-top-navigation
|
report-uri |
/some-report-uri |
Instructs the browser to POST a reports of policy failures to this URI. You can also append -Report-Only to the HTTP header name to instruct the browser to only send reports (does not block anything).
|
All of the directives that end with -src support similar values known as a source list. Multiple source list values can be space seperated with the exception of * and none which should be the only value.
| Source Value | Example | Description |
|---|---|---|
* |
img-src * |
Wildcard, allows anything. |
'none' |
object-src 'none' |
Prevents loading resources from any source. |
'self' |
script-src 'self' |
Allows loading resources from the same origin (same scheme, host and port). |
data: |
img-src 'self' data: |
Allows loading resources via the data scheme (eg Base64 encoded images). |
domain.example.com |
img-src img.example.com |
Allows loading resources from the specified domain name. |
*.example.com |
img-src *.example.com |
Allows loading resources from the any subdomain under example.com. |
https://img.example.com |
img-src https://img.example.com |
Allows loading resources only over HTTPS matching the given domain. |
https: |
img-src https: |
Allows loading resources only over HTTPS on any domain. |
'unsafe-inline' |
script-src 'unsafe-inline' |
Allows use of inline source elements such as style attribute, onclick, or script tag bodies (depends on the context of the source it is applied to) |
'unsafe-eval' |
script-src 'unsafe-eval' |
Allows unsafe dynamic code evaluation such as JavaScript eval() |
Here a few common scenarios for content security policies:
default-src 'self';
script-src 'self';
script-src 'self' www.google-analytics.com ajax.googleapis.com;
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.
default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';
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.
Want more info on CSP, checkout these links: