JavaScript Element securitypolicyviolation Event

What You’ll Learn

The securitypolicyviolation event fires when a Content Security Policy (CSP) is violated. Learn SecurityPolicyViolationEvent, why you usually listen on document / window, key properties such as blockedURI and violatedDirective, and five try-it labs.

Introduction

A Content Security Policy tells the browser which scripts, images, styles, and other resources a page may load. When something breaks that policy, securitypolicyviolation fires so you can log, debug, or report it.

The event is documented on Element, but MDN notes you should generally attach the handler to a top-level object (Window or Document). In practice, a blocked resource (such as an <img>) often targets document directly rather than bubbling from the element.

Understanding securitypolicyviolation

An instance event that answers: “Did this page break its Content Security Policy?”

• Trigger — a resource or inline content violates CSP.
• Event type — SecurityPolicyViolationEvent.
• Bubbles & composed — reaches Window.
• Listen high — prefer document / window.
• Baseline Widely available on MDN (since October 2018).

🔒 CSP in One Minute

Policies can arrive via HTTP headers or a <meta http-equiv="Content-Security-Policy"> tag. Example that blocks remote images while allowing inline scripts for demos:

<meta http-equiv="Content-Security-Policy"
  content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src 'none'">

Loading an external image under that policy triggers securitypolicyviolation so your listener can inspect the details.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("securitypolicyviolation", (event) => { });

onsecuritypolicyviolation = (event) => { };

Event type

A SecurityPolicyViolationEvent (inherits from Event).

Handy properties

⚖️ Where to Listen

Examples Gallery

Examples follow MDN Element: securitypolicyviolation event and SecurityPolicyViolationEvent. Try-it labs use a tight CSP meta tag, then intentionally load a blocked image.

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

https://example.com/blocked.png
img-src
default-src 'none'; ... img-src 'none'

window.onsecuritypolicyviolation = (e) => {
  // Handle SecurityPolicyViolationEvent e here
};

window.addEventListener("securitypolicyviolation", (e) => {
  // Handle SecurityPolicyViolationEvent e here
});

violation: img-src · https://example.com/blocked.png

const out = document.getElementById("out");

document.addEventListener("securitypolicyviolation", (e) => {
  out.textContent =
    "directive=" + e.violatedDirective +
    "\nblocked=" + e.blockedURI +
    "\ndisposition=" + e.disposition;
});

// Trigger: policy has img-src 'none'
const img = new Image();
img.src = "https://example.com/blocked.png";

directive=img-src
blocked=https://example.com/blocked.png
disposition=enforce

document.addEventListener("securitypolicyviolation", (e) => {
  if (e.disposition === "enforce") {
    console.log("Blocked by enforced CSP:", e.blockedURI);
  } else {
    console.log("Report-only CSP violation:", e.blockedURI);
  }
});

Blocked by enforced CSP: https://example.com/blocked.png

const out = document.getElementById("out");
let n = 0;

document.addEventListener("securitypolicyviolation", (e) => {
  n += 1;
  out.textContent =
    "violations=" + n +
    " · last=" + e.violatedDirective;
});

["a.png", "b.png", "c.png"].forEach((name) => {
  const img = new Image();
  img.src = "https://example.com/" + name;
});

violations=3 · last=img-src

🚀 Common Use Cases

• Log CSP breaks during staging before tightening production policy.
• Send violation details to your monitoring / analytics pipeline.
• Debug which third-party script or image is blocked by script-src / img-src.
• Distinguish enforce vs report-only with disposition.
• Surface a friendly “resource blocked by security policy” message for developers.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since October 2018) — no Deprecated / Experimental / Non-standard banner.
• Prefer listeners on document or window, not individual elements.
• Bubbles to Window and is composed.
• Also available for workers via WorkerGlobalScope.
• Related learning: scrollsnapchanging, addEventListener(), JavaScript hub.

💡 Best Practices