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")}}).
For more information, see the introductory article on Content Security Policy (CSP).
| Header type | {{Glossary("Response header")}} |
|---|---|
| {{Glossary("Forbidden header name")}} | no |
Content-Security-Policy: <policy-directive>; <policy-directive>
Fetch directives control locations from which certain resource types may be loaded.
Instead of child-src, authors who wish to regulate nested browsing contexts and workers should use the {{CSP("frame-src")}} and {{CSP("worker-src")}} directives, respectively.
object-src are perhaps coincidentally considered legacy HTML elements and are not recieving new standardized features (such as the security attributes sandbox or allow for <iframe>). Therefore it is recommended to restrict this fetch-directive (e.g. explicitly set object-src 'none' if possible).rel="stylesheet".Document directives govern the properties of a document or worker environment to which a policy applies.
Navigation directives govern to which location a user can navigate to or submit a form to, for example.
Reporting directives control the reporting process of CSP violations. See also the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header.
POST request to the specified URI.
Though the {{CSP("report-to")}} directive is intended to replace the deprecated report-uri directive, {{CSP("report-to")}} is not supported in most browsers yet. So for compatibility with current browsers while also adding forward compatibility when browsers get {{CSP("report-to")}} support, you can specify both report-uri and {{CSP("report-to")}}:
Content-Security-Policy: ...; report-uri https://endpoint.example.com; report-to groupname
In browsers that support {{CSP("report-to")}}, the report-uri directive will be ignored.
SecurityPolicyViolationEvent.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 requested 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 that created it.
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, as the strictest policy, connect-src 'none' is enforced.
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/
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: Do not implement the above policy yet; instead just report violations that would have occurred:
Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/
See Mozilla Web Security Guidelines for more examples.
| Specification | Status | Comment |
|---|---|---|
| {{specName("CSP 3.0")}} | {{Spec2("CSP 3.0")}} | Adds manifest-src, navigate-to, report-to, 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, 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. |
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
{{Compat("http.headers.csp.Content-Security-Policy")}}