Web Experience Platforms
Security
HTTP Header Series: Content-Security-Policy
Tuesday, October 29, 2019
Layer One - Director of Digital Delivery - Jim Schram
In our opening to this series, we discussed some of the reasons for Security Headers. In this post we will describe in more detail the Content-Security-Policy header that allows web site administrators to control resources the user agent is allowed to load for a given page. This header is critical is defending against cross-site scripting attacks.
Content-Security-Policy Syntax:
Content-Security-Policy: <policy-directive>; <policy-directive>where <policy-directive> consists of: <directive> <value> with no internal punctuation.
Content-Security-Policy Directives:
|
Directive |
Description |
|
default-src |
|
|
script-src |
Defines valid sources of JavaScript. |
|
style-src |
Defines valid sources of stylesheets or CSS. |
|
img-src |
Defines valid sources of images. |
|
connect-src |
Applies to XMLHttpRequest (AJAX), WebSocket, fetch(), <a ping> or EventSource. If not allowed the browser emulates a 400 HTTP status code. |
|
font-src |
Defines valid sources of font resources (loaded via @font-face). |
|
object-src |
Defines valid sources of plugins (<object>, <embed>, <applet>) |
|
media-src |
Defines valid sources of audio and video, (<audio>, <video>) |
|
frame-src |
Defines valid sources for loading frames. |
|
sandbox |
Enables a sandbox for the requested resource similar to the <iframe> sandbox attribute. |
|
report-uri |
Instructs the browser to POST a reports of policy failures to this URI. hese violation reports consist of JSON documents sent via an HTTP POST request to the specified URI. |
|
child-src |
Defines valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>. Instead of child-src, if you want to regulate nested browsing contexts and workers, you should use the frame-src and worker-src directives, respectively. |
|
form-action |
Defines valid sources that can be used as an HTML <form> action. |
|
frame-ancestors |
Specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>. |
|
plugin-types |
Restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded. This is a MIME type and should be set to “application/x-java-applet” to load and applet. |
|
base-uri |
Defines a set of allowed URLs which can be used in the “src” attribute of a HTML base tag. |
|
report-to |
Defines a reporting group name defined by a Report-To HTTP response header. See the Reporting API for more info. |
|
worker-src |
Restricts the URLs which may be loaded as a Worker, SharedWorker or ServiceWorker scripts. |
|
manifest-src |
Specifies valid sources of application manifest files. |
|
prefetch-src |
Specifies valid sources to be prefetched or prerendered. |
|
navigate-to |
Restricts the URLs to which a document can initiate navigation by any means, including <form> (if form-action is not specified), <a>, window.location, window.open, etc. |
Examples:
Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'
Content-Security-Policy: default-src 'none'; script-src 'self' www.google-analytics.com ajax.googleapis.com; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'
Content-Security-Policy: default-src 'none'; script-src 'self' www.google-analytics.com ajax.googleapis.com; connect-src 'self'; img-src 'self' img.example.com; style-src 'self' css.example.com;base-uri 'self';form-action 'self'
Interested in learning more?
Contact Us