Revision 1142437 of Content-Security-Policy

  • Revision slug: Web/HTTP/Headers/Content-Security-Policy
  • Revision title: Content-Security-Policy
  • Revision id: 1142437
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment

Revision Content

{{HTTPSidebar}}

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks ({{Glossary("XSS")}}).

Header type {{Glossary("Response header")}}
{{Glossary("Forbidden header name")}} no

Syntax

Content-Security-Policy: <policy-directive>; <policy-directive>

Directives

Fetch directives

Fetch directives control locations from which certain resource types may be loaded.

{{CSP("child-src")}}
Defines the valid sources for web workers and nested browsing contexts loaded using elements such as {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.
{{CSP("connect-src")}}
Restricts the URLs which can be loaded using script interfaces
{{CSP("default-src")}}
Serves as a fallback for the other {{Glossary("Fetch directive", "fetch directives")}}.
{{CSP("font-src")}}
Specifies valid sources for fonts loaded using {{cssxref("@font-face")}}.
{{CSP("frame-src")}}
Specifies valid sources for nested browsing contexts loading using elements such as {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.
{{CSP("img-src")}}
Specifies valid sources of images and favicons.
{{CSP("manifest-src")}}
Specifies valid sources of application manifest files.
{{CSP("media-src")}}
Specifies valid sources for loading media using the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements.
{{CSP("object-src")}}
Specifies valid sources for the {{HTMLElement("object")}}, {{HTMLElement("embed")}}, and {{HTMLElement("applet")}} elements.
{{CSP("script-src")}}
Specifies valid sources for JavaScript.
{{CSP("style-src")}}
Specifies valid sources for stylesheets.
{{CSP("worker-src")}}
Specifies valid sources for {{domxref("Worker")}}, {{domxref("SharedWorker")}}, or {{domxref("ServiceWorker")}} scripts.

Document directives

Document directives govern the properties of a document or worker environment to which a policy applies.

{{CSP("base-uri")}}
Restricts the URLs which can be used in a document's {{HTMLElement("base")}} element.
{{CSP("plugin-types")}}
Restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.
{{CSP("sandbox")}}
Enables a sandbox for the requested resource similar to the {{HTMLElement("iframe")}} {{htmlattrxref("sandbox", "iframe")}} attribute.
{{CSP("disown-opener")}}
Ensures a resource will disown its opener when navigated to.

Navigation directives govern to which location a user can navigate to or submit a form to, for example.

{{CSP("form-action")}}
Restricts the URLs which can be used as the target of a form submissions from a given context.
{{CSP("frame-ancestors")}}
Specifies valid parents that may embed a page using {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, or {{HTMLElement("applet")}}.
{{CSP("navigation-to")}}
Restricts the URLs to which a document can navigate by any means (a, form, window.location, window.open, etc.)

Reporting directives

Reporting directives control the reporting process of CSP violations. See also the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header.

{{CSP("report-uri")}} {{deprecated_inline}}
Instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP POST request to the specified URI.
{{CSP("report-to")}}
Fires a SecurityPolicyViolationEvent.

Other directives

{{CSP("block-all-mixed-content")}}
Prevents loading any assets using HTTP when the page is loaded using HTTPS.
{{CSP("referrer")}} {{obsolete_inline}}
Used to specify information in the referer (sic) header for links away from a page. Use the {{HTTPHeader("Referrer-Policy")}} header instead.
{{CSP("require-sri-for")}}
Requires the use of {{Glossary("SRI")}} for scripts or styles on the page.
{{CSP("upgrade-insecure-requests")}}
Instructs user agents to treat all of a site's insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS). This directive is intended for web sites with large numbers of insecure legacy URLs that need to be rewritten.

CSP in workers

Workers are in general not governed by the content security policy of the document (or parent worker) that created them. To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which delivered the worker script itself.

The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the content security policy of the document or worker than created it.

Multiple content security policies

CSP allows multiple policies being specified for a resource, including via the Content-Security-Policy header, the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a {{HTMLElement("meta")}} element.

You can use the Content-Security-Policy header more than once like in the example below. Pay special attention to the {{CSP("connect-src")}} directive here. Even though the second policy would allow the connection, the first policy contains connect-src 'none'. Adding additional policies can only further restrict the capabilities of the protected resource, which means that there will be no connection allowed and connect-src 'none' is enforced as the strictest policy.

Content-Security-Policy: default-src 'self' http://example.com;
                         connect-src 'none';
Content-Security-Policy: connect-src http://example.com/;
                         script-src http://example.com/

Examples

Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https:

// header
Content-Security-Policy: default-src https:

// meta tag
<meta http-equiv="Content-Security-Policy" content="default-src https:">

Example: Pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and disable plugins:

Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'

Example: Don't implement the above policy yet; instead just report violations that would have occured

Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/

See Mozilla Web Security Guidelines for more examples.

Specifications

Specification Status Comment
{{specName("CSP 3.0")}} {{Spec2('CSP 3.0')}} Adds disown-opener, manifest-src, navigation-to, report-uri, strict-dynamic, worker-src. Undeprecates frame-src. Deprecates report-uri in favor if report-to.
{{specName("Mixed Content")}} {{Spec2('Mixed Content')}} Adds block-all-mixed-content.
{{specName("Subresource Integrity")}} {{Spec2('Subresource Integrity')}} Adds require-sri-for.
{{specName("Upgrade Insecure Requests")}} {{Spec2('Upgrade Insecure Requests')}} Adds upgrade-insecure-requests.
{{specName("CSP 1.1")}} {{Spec2('CSP 1.1')}} Adds base-uri, child-src, form-action, frame-ancestors, plugin-types, referrer, reflected-xss, and report-uri. Deprecates frame-src.
{{specName("CSP 1.0")}} {{Spec2('CSP 1.0')}} Defines connect-src, default-src, font-src, frame-src, img-src, media-src, object-src, report-uri, sandbox, script-src, and style-src.

Browser compatibility

{{Compat}}

See also

Revision Source

<div>{{HTTPSidebar}}</div>

<p>The HTTP <strong><code>Content-Security-Policy</code></strong> response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks ({{Glossary("XSS")}}).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Header type</th>
   <td>{{Glossary("Response header")}}</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Forbidden header name")}}</th>
   <td>no</td>
  </tr>
 </tbody>
</table>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
Content-Security-Policy: &lt;policy-directive&gt;; &lt;policy-directive&gt;
</pre>

<h2 id="Directives">Directives</h2>

<h3 id="Fetch_directives">Fetch directives</h3>

<p>Fetch directives control locations from which certain resource types may be loaded.</p>

<dl>
 <dt>{{CSP("child-src")}}</dt>
 <dd>Defines the valid sources for <a href="/en-US/docs/Web/API/Web_Workers_API">web workers</a> and nested browsing contexts loaded using elements such as {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.</dd>
 <dt>{{CSP("connect-src")}}</dt>
 <dd>Restricts the&nbsp;URLs which can be loaded using script interfaces</dd>
 <dt>{{CSP("default-src")}}</dt>
 <dd>Serves as a fallback for the other {{Glossary("Fetch directive", "fetch directives")}}.</dd>
 <dt>{{CSP("font-src")}}</dt>
 <dd>Specifies valid sources for fonts loaded using {{cssxref("@font-face")}}.</dd>
 <dt>{{CSP("frame-src")}}</dt>
 <dd>Specifies valid sources for nested browsing contexts loading using elements such as {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.</dd>
 <dt>{{CSP("img-src")}}</dt>
 <dd>Specifies valid sources of images and favicons.</dd>
 <dt>{{CSP("manifest-src")}}</dt>
 <dd>Specifies valid sources of application manifest files.</dd>
 <dt>{{CSP("media-src")}}</dt>
 <dd>Specifies valid sources for loading media using the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements.</dd>
 <dt>{{CSP("object-src")}}</dt>
 <dd>Specifies valid sources for the {{HTMLElement("object")}}, {{HTMLElement("embed")}}, and {{HTMLElement("applet")}} elements.</dd>
 <dt>{{CSP("script-src")}}</dt>
 <dd>Specifies valid sources for JavaScript.</dd>
 <dt>{{CSP("style-src")}}</dt>
 <dd>Specifies valid sources for stylesheets.</dd>
 <dt>{{CSP("worker-src")}}</dt>
 <dd>Specifies valid sources for {{domxref("Worker")}}, {{domxref("SharedWorker")}}, or {{domxref("ServiceWorker")}} scripts.</dd>
</dl>

<h3 id="Document_directives">Document directives</h3>

<p>Document directives govern the properties of a document or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a> environment to which a policy applies.</p>

<dl>
 <dt>{{CSP("base-uri")}}</dt>
 <dd>Restricts the URLs which can be used in a document's {{HTMLElement("base")}} element.</dd>
 <dt>{{CSP("plugin-types")}}</dt>
 <dd>Restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.</dd>
 <dt>{{CSP("sandbox")}}</dt>
 <dd>Enables a sandbox for the requested resource similar to the {{HTMLElement("iframe")}} {{htmlattrxref("sandbox", "iframe")}} attribute.</dd>
 <dt>{{CSP("disown-opener")}}</dt>
 <dd>Ensures a resource will&nbsp;disown its opener&nbsp;when navigated to.</dd>
</dl>

<h3 id="Navigation_directives">Navigation directives</h3>

<p>Navigation directives govern to which location a user can navigate to or submit a form to, for example.</p>

<dl>
 <dt>{{CSP("form-action")}}</dt>
 <dd>Restricts the URLs which can be used as the target of a form submissions from a given context.</dd>
 <dt>{{CSP("frame-ancestors")}}</dt>
 <dd>Specifies valid parents that may embed a page using {{HTMLElement("frame")}},&nbsp;{{HTMLElement("iframe")}},&nbsp;{{HTMLElement("object")}},&nbsp;{{HTMLElement("embed")}}, or {{HTMLElement("applet")}}.</dd>
 <dt>{{CSP("navigation-to")}}</dt>
 <dd>Restricts the URLs to which a document can navigate by any means (a, form, window.location, window.open, etc.)</dd>
</dl>

<h3 id="Reporting_directives">Reporting directives</h3>

<p>Reporting directives control the reporting process of CSP violations. See also the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header.</p>

<dl>
 <dt>{{CSP("report-uri")}} {{deprecated_inline}}</dt>
 <dd>Instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd>
 <dt>{{CSP("report-to")}}</dt>
 <dd>Fires a <code>SecurityPolicyViolationEvent</code>.</dd>
</dl>

<h3 id="Other_directives">Other directives</h3>

<dl>
 <dt>{{CSP("block-all-mixed-content")}}</dt>
 <dd>Prevents loading any assets using HTTP when the page is loaded using HTTPS.</dd>
 <dt>{{CSP("referrer")}} {{obsolete_inline}}</dt>
 <dd>Used to specify information in the referer (sic) header for links away from a page. Use the {{HTTPHeader("Referrer-Policy")}} header instead.</dd>
 <dt>{{CSP("require-sri-for")}}</dt>
 <dd>Requires the use of {{Glossary("SRI")}} for scripts or styles on the page.</dd>
 <dt>{{CSP("upgrade-insecure-requests")}}</dt>
 <dd>Instructs user agents to treat all of a site's insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS). This directive is intended for web sites with large numbers of insecure legacy URLs that need to be rewritten.</dd>
</dl>

<h2 id="CSP_in_workers">CSP in workers</h2>

<p><a href="/en-US/docs/Web/API/Worker">Workers</a> are in general not governed by the content security policy of the document (or parent worker) that created them. To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which delivered the worker script itself.</p>

<p>The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the content security policy of the document or worker than created it.</p>

<h2 id="Multiple_content_security_policies">Multiple content security policies</h2>

<p>CSP allows multiple policies being specified for a resource, including via the <code>Content-Security-Policy</code> header, the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a {{HTMLElement("meta")}} element.</p>

<p>You can use the <code>Content-Security-Policy</code> header more than once like in the example below. Pay special attention to the {{CSP("connect-src")}} directive here. Even though the second policy would allow the connection, the first policy contains <code>connect-src 'none'</code>. Adding additional policies can only further restrict the capabilities of the protected resource, which means that there will be no connection allowed and <code>connect-src 'none'</code> is enforced as the strictest policy.</p>

<pre>
Content-Security-Policy: default-src 'self' http://example.com;
                         connect-src 'none';
Content-Security-Policy: connect-src http://example.com/;
                         script-src http://example.com/</pre>

<h2 id="Examples">Examples</h2>

<p>Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https:</p>

<pre>
// header
Content-Security-Policy: default-src https:

// meta tag
&lt;meta http-equiv="Content-Security-Policy" content="default-src https:"&gt;
</pre>

<p>Example: Pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and disable plugins:</p>

<pre>
Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre>

<p>Example: Don't implement the above policy yet; instead just report violations that would have occured</p>

<pre>
Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre>

<p>See <a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security#Examples_5">Mozilla Web Security Guidelines</a> for more examples.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{specName("CSP 3.0")}}</td>
   <td>{{Spec2('CSP 3.0')}}</td>
   <td>Adds <code>disown-opener</code>, <code>manifest-src</code>, <code>navigation-to</code>, <code>report-uri</code>, <code>strict-dynamic</code>, <code>worker-src</code>.&nbsp;Undeprecates <code>frame-src</code>. Deprecates report-uri in favor if <code>report-to</code>.</td>
  </tr>
  <tr>
   <td>{{specName("Mixed Content")}}</td>
   <td>{{Spec2('Mixed Content')}}</td>
   <td>Adds <code>block-all-mixed-content</code>.</td>
  </tr>
  <tr>
   <td>{{specName("Subresource Integrity")}}</td>
   <td>{{Spec2('Subresource Integrity')}}</td>
   <td>Adds <code>require-sri-for</code>.</td>
  </tr>
  <tr>
   <td>{{specName("Upgrade Insecure Requests")}}</td>
   <td>{{Spec2('Upgrade Insecure Requests')}}</td>
   <td>Adds <code>upgrade-insecure-requests</code>.</td>
  </tr>
  <tr>
   <td>{{specName("CSP 1.1")}}</td>
   <td>{{Spec2('CSP 1.1')}}</td>
   <td>Adds <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, <code>reflected-xss</code>, and <code>report-uri</code>. Deprecates <code>frame-src</code>.</td>
  </tr>
  <tr>
   <td>{{specName("CSP 1.0")}}</td>
   <td>{{Spec2('CSP 1.0')}}</td>
   <td>Defines <code>connect-src</code>, <code>default-src</code>, <code>font-src</code>, <code>frame-src</code>, <code>img-src</code>, <code>media-src</code>, <code>object-src</code>, report-uri,&nbsp;<code>sandbox</code>, <code>script-src,</code> and <code>style-src</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
 <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security in WebExtensions</a></li>
 <li>
  <p><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">Display security and privacy policies In Firefox Developer Tools</a></p>
 </li>
</ul>
Revert to this revision