JavaScript Document securitypolicyviolation Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word SECURITYPOLICYVIOLATION

Definition

In JavaScript, the securitypolicyviolation event fires when a Content Security Policy (CSP) is violated (MDN). Listen on document (or window) to log or report what was blocked.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for securitypolicyviolation. Start with this line.

JavaScript
addEventListener("securitypolicyviolation", fn)
CallWhat it does
addEventListener("securitypolicyviolation", fn)Primary signature.

Built into the browser. Listen with document.addEventListener("securitypolicyviolation", …) — no import required.

Library declarations
JavaScript
addEventListener("securitypolicyviolation", fn)

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Fires as a Document event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen on document

Register the handler with addEventListener (MDN).

JavaScript
document.addEventListener("securitypolicyviolation", (e) => {
  console.log("CSP violation");
  console.log(e.type);
});
Try It Yourself

How It Works

  1. Choose the document. Top-level listening matches MDN guidance.
  2. Use the event name. Exact string: "securitypolicyviolation".
  3. Wait for a real block. The handler runs only when CSP rejects something.
  4. Confirm the type. e.type is the event name string.

Example 2 — Log Key Fields (MDN)

Read blockedURI, violatedDirective, and originalPolicy.

JavaScript
document.addEventListener("securitypolicyviolation", (e) => {
  console.log(e.blockedURI);
  console.log(e.violatedDirective);
  console.log(e.originalPolicy);
});
Try It Yourself

How It Works

  1. blockedURI. Which resource was rejected.
  2. violatedDirective. Which CSP directive failed (same idea as effectiveDirective).
  3. originalPolicy. The policy text that caused the block.
  4. Use for reports. Log locally or send to your monitoring endpoint.

Example 3 — Sample Dispatch (Lab Demo)

When a real CSP block is unavailable, dispatch a sample event to practice reading fields.

JavaScript
document.addEventListener("securitypolicyviolation", (e) => {
  console.log(e.blockedURI);
  console.log(e.violatedDirective);
});

document.dispatchEvent(
  new SecurityPolicyViolationEvent("securitypolicyviolation", {
    blockedURI: "https://cdn.example/x.png",
    violatedDirective: "img-src",
    effectiveDirective: "img-src",
    originalPolicy: "img-src 'none'",
    disposition: "enforce",
    documentURI: document.documentURI,
    statusCode: 200
  })
);
Try It Yourself

How It Works

  1. Attach first. The listener must exist before you dispatch.
  2. Build the event. new SecurityPolicyViolationEvent(…) fills demo fields.
  3. Dispatch on document. Same target MDN recommends for real CSP events.
  4. Label it clearly. This teaches the API — a real violation still needs a CSP policy.
Compatibility

Browser Support

Document securitypolicyviolation is Baseline Widely available (MDN: since March 2022). Safe to use in modern evergreen browsers.

✓ Baseline · Widely available

securitypolicyviolation

Fires when the document Content Security Policy is violated.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
securitypolicyviolation Excellent

Bottom line: Listen on document or window, log SecurityPolicyViolationEvent fields, and pair with a real CSP policy for production monitoring.

Frequently Asked Questions

It fires when a Content Security Policy (CSP) for the document is violated — for example when a blocked script, image, or style is rejected by the policy (MDN).
No. MDN marks Document securitypolicyviolation as Baseline Widely available (since March 2022). It is not Deprecated, Experimental, or Non-standard.
Yes. MDN states it bubbles to the Window object and is composed. Still, you should usually listen on document or window. Blocked resources typically target document directly.
A SecurityPolicyViolationEvent, which inherits from Event. Useful properties include blockedURI, violatedDirective (alias of effectiveDirective), originalPolicy, disposition, and sample.
On a top-level object: Document or Window. MDN notes that although HTML elements can theoretically be targets, a blocked image typically fires with document as the target — not bubbling from the img.
It indicates whether the user agent enforces the policy ("enforce") or just reports it ("report"), such as with Content-Security-Policy-Report-Only.

Next: selectionchange

Learn the Document event fired when the current selection changes.

selectionchange tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document scrollsnapchanging Event JavaScript Document selectionchange Event