Document: securitypolicyviolation event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2022⁩.

The securitypolicyviolation event is fired when a Content Security Policy is violated.

The event is fired on the document when there is a violation of the document CSP policy (and may also bubble from elements in the document).

This event bubbles to the Window object, and is composed.

Note: You should generally add the handler for this event to a top level object (i.e., Window or Document). While HTML elements can technically be the target of the securitypolicyviolation event, in reality this event does not fire on them—for example, a blocked <img> source directly triggers this event on document as the target, instead of bubbling from the <img> element.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

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

onsecuritypolicyviolation = (event) => { }

Event type

A SecurityPolicyViolationEvent. Inherits from Event.

Examples

The code below shows how you might add an event handler function using the onsecuritypolicyviolation event handler property or addEventListener() on the Document.

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

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