Content Security Policy (CSP) | Frontend Practical Guide

Widely availableA strong production default for web apps. Use it as part of a layered security strategy, not as a substitute for safe rendering code.

Overview

Content Security Policy limits which resources and execution paths a page can use. It is one of the browser's core defenses against script injection and related attacks.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`nonce`	61	79	75	15.5	61	15.5
`csp` Experimental	61	79			61
DOM API
`securitypolicyviolation_event` The securitypolicyviolation event is fired when a Content Security Policy is violated.	76	79	93	15.4	76	15.4
`securitypolicyviolation_event` The securitypolicyviolation event is fired when a Content Security Policy is violated.	41	15	63	10	41	10
`nonce` The nonce property of the HTMLElement interface returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.	61	79	75	15.4	61	15.4
`csp` Experimental The csp property of the HTMLIFrameElement interface specifies the Content Security Policy that an embedded document must agree to enforce upon itself.	61	79			61
`SecurityPolicyViolationEvent` The SecurityPolicyViolationEvent interface inherits from Event, and represents the event object of a securitypolicyviolation event sent on an Element/securitypolicyviolationevent, Document/securitypolicyviolationevent, or WorkerGlobalScope/securitypolicyviolation_event when its Content Security Policy (CSP) is violated.	41	15	63	10	41	10
`blockedURI` The blockedURI read-only property of the SecurityPolicyViolationEvent interface is a string representing the URI of the resource that was blocked because it violates a Content Security Policy (CSP).	41	15	63	10	41	10
`columnNumber` The columnNumber read-only property of the SecurityPolicyViolationEvent interface is the character position in the source file line of the document or worker script at which the Content Security Policy (CSP) violation occurred.	41	15	63	10	41	10
`disposition` The disposition read-only property of the SecurityPolicyViolationEvent interface indicates how the violated Content Security Policy (CSP) is configured to be treated by the user agent.	56	79	63	15	56	15
`documentURI` The documentURI read-only property of the SecurityPolicyViolationEvent interface is a string representing the URI of the document or worker in which the Content Security Policy (CSP) violation occurred.	41	15	63	10	41	10
`effectiveDirective` The effectiveDirective read-only property of the SecurityPolicyViolationEvent interface is a string representing the Content Security Policy (CSP) directive that was violated.	41	15	63	10	41	10
`lineNumber` The lineNumber read-only property of the SecurityPolicyViolationEvent interface is the line number in the document or worker script at which the Content Security Policy (CSP) violation occurred.	41	15	63	10	41	10
`originalPolicy` The originalPolicy read-only property of the SecurityPolicyViolationEvent interface is a string containing the Content Security Policy (CSP) whose enforcement uncovered the violation.	41	15	63	10	41	10
`referrer` The referrer read-only property of the SecurityPolicyViolationEvent interface is a string representing the referrer for the resources whose Content Security Policy (CSP) was violated. This will be a URL or null.	41	15	63	10	41	10
`sample` The sample read-only property of the SecurityPolicyViolationEvent interface is a string representing a sample of the resource that caused the Content Security Policy (CSP) violation.	59	79	63	15	59	15
`SecurityPolicyViolationEvent` The SecurityPolicyViolationEvent() constructor creates a new SecurityPolicyViolationEvent object.	41	15	63	10	41	10
`sourceFile` The sourceFile read-only property of the SecurityPolicyViolationEvent interface is a string representing the URL of the script in which the Content Security Policy (CSP) violation occurred.	41	15	63	10	41	10
`statusCode` The statusCode read-only property of the SecurityPolicyViolationEvent interface is a number representing the HTTP status code of the window or worker in which the Content Security Policy (CSP) violation occurred.	41	15	63	10	41	10
`violatedDirective` The violatedDirective read-only property of the SecurityPolicyViolationEvent interface is a string representing the Content Security Policy (CSP) directive that was violated.	41	15	63	10	41	10
`worker_support` Available in workers	56	15	63		56
`securitypolicyviolation_event` The securitypolicyviolation event is fired when a Content Security Policy is violated in a worker.	41	15	63	10	41	10
Other
`html.elements.meta.http-equiv.content-security-policy` http-equiv="content-security-policy"	≤59	12	1	≤10.1	≤59	≤10.3
`http.headers.Content-Security-Policy` The HTTP Content-Security-Policy response header allows website 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.	25	14	23	7	25	7
`http.headers.Content-Security-Policy-Report-Only` The HTTP Content-Security-Policy-Report-Only response header helps to monitor Content Security Policy (CSP) violations and their effects without enforcing the security policies. This header allows you to test or repair violations before a specific Content-Security-Policy is applied and enforced.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.base-uri` The HTTP Content-Security-Policy base-uri directive restricts the URLs which can be used in a document's base element. If this value is absent, then any URI is allowed. If this directive is absent, the user agent will use the value in the base element.	40	79	35	10	40	9.3
`http.headers.Content-Security-Policy.child-src` The HTTP Content-Security-Policy (CSP) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as frame and iframe. For workers, non-compliant requests are treated as fatal network errors by the user agent.	40	15	45	10	40	9.3
`http.headers.Content-Security-Policy.connect-src` The HTTP Content-Security-Policy (CSP) connect-src directive restricts the URLs which can be loaded using script interfaces. The following APIs are controlled by this directive:	25	14	50	7	25	7
`http.headers.Content-Security-Policy.default-src` The HTTP Content-Security-Policy (CSP) default-src directive serves as a fallback for the other CSP fetch directive. For each of the following directives that are absent, the user agent looks for the default-src directive and uses this value for it:	25	14	23	7	25	7
`http.headers.Content-Security-Policy.font-src` The HTTP Content-Security-Policy (CSP) font-src directive specifies valid sources for fonts loaded using @font-face.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.form-action` The HTTP Content-Security-Policy (CSP) form-action directive restricts the URLs which can be used as the target of form submissions from a given context.	40	15	36	10	40	9.3
`http.headers.Content-Security-Policy.frame-ancestors` The HTTP Content-Security-Policy (CSP) frame-ancestors directive specifies valid parents that may embed a page using frame, iframe, object, or embed.	40	15	58	10	40	9.3
`http.headers.Content-Security-Policy.frame-src` The HTTP Content-Security-Policy (CSP) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as frame and iframe.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.img-src` The HTTP Content-Security-Policy img-src directive specifies valid sources of images and favicons.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.manifest-src` The HTTP Content-Security-Policy manifest-src directive specifies which manifest can be applied to the resource.	40	79	41	11	40	11
`http.headers.Content-Security-Policy.media-src` The HTTP Content-Security-Policy (CSP) media-src directive specifies valid sources for loading media using the audio and video elements.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.meta-element-support` `<meta>` element support	25	≤18	45	7	25	7
`http.headers.Content-Security-Policy.object-src` The HTTP Content-Security-Policy object-src directive specifies valid sources for the object and embed elements.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.report-sample` `report-sample` source value	59	79	63	15.4	59	15.4
`http.headers.Content-Security-Policy.report-to` The Content-Security-Policy report-to directive indicates the name of the endpoint that the browser should use for reporting CSP violations.	70	79	149	16.4	70	16.4
`http.headers.Content-Security-Policy.sandbox` The HTTP Content-Security-Policy (CSP) sandbox directive enables a sandbox for the requested resource similar to the iframe sandbox attribute. It applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy.	25	14	50	7	25	7
`http.headers.Content-Security-Policy.script-src` The HTTP Content-Security-Policy (CSP) script-src directive specifies valid sources for JavaScript. This includes not only URLs loaded directly into script elements, but also things like inline script event handlers (onclick) and XSLT stylesheets which can trigger script execution.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.script-src-attr` The HTTP Content-Security-Policy (CSP) script-src-attr directive specifies valid sources for JavaScript inline event handlers.	75	79	108	15.4	75	15.4
`http.headers.Content-Security-Policy.script-src-elem` The HTTP Content-Security-Policy (CSP) script-src-elem directive specifies valid sources for JavaScript script elements.	75	79	108	15.4	75	15.4
`http.headers.Content-Security-Policy.script-src.external_scripts` External scripts with hash	59	79	116	15.6	59	15.6
`http.headers.Content-Security-Policy.script-src.wasm-unsafe-eval` Source expression allowing WebAssembly execution	97	97	102	16	97	16
`http.headers.Content-Security-Policy.strict-dynamic` `strict-dynamic` source value	52	79	52	15.4	52	15.4
`http.headers.Content-Security-Policy.style-src` The HTTP Content-Security-Policy (CSP) style-src directive specifies valid sources for stylesheets.	25	14	23	7	25	7
`http.headers.Content-Security-Policy.style-src-attr` The HTTP Content-Security-Policy (CSP) style-src-attr directive specifies valid sources for inline styles applied to individual DOM elements.	75	79	108	15.4	75	15.4
`http.headers.Content-Security-Policy.style-src-elem` The HTTP Content-Security-Policy (CSP) style-src-elem directive specifies valid sources for stylesheet style elements and link elements with rel="stylesheet".	75	79	108	26.2	75	26.2
`http.headers.Content-Security-Policy.unsafe-hashes` `unsafe-hashes` source value	69	79	109	15.4	69	15.4
`http.headers.Content-Security-Policy.worker_support` Worker support	56	79	50	10	56	10
`http.headers.Content-Security-Policy.worker-src` The HTTP Content-Security-Policy (CSP) worker-src directive specifies valid sources for Worker, SharedWorker, or ServiceWorker scripts.	59	79	58	15.5	59	15.5

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline'; img-src *;">

Use cases

Reducing XSS impact
Block unexpected inline scripts or off-origin resources so injected markup has fewer ways to execute.
Controlling resource origins
Restrict images, fonts, frames, and scripts to approved origins that match your deployment model.

Cautions

A weak or outdated policy can give a false sense of safety, so keep directives aligned with the actual app architecture.
Test reporting and rollout carefully because an overly strict policy can break legitimate functionality.

Overview

Browser support

Syntax

Use cases

Reducing XSS impact

Controlling resource origins

Cautions

Accessibility

Related links