# Document: securitypolicyviolation event



The **`securitypolicyviolation`** event is fired when a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) 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](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) to the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object, and is [composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed).

> **NOTE:**
> You should generally add the handler for this event to a top-level object (i.e., [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) or [Document](https://developer.mozilla.org/en-US/docs/Web/API/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 [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget%2FaddEventListener):

```js-nolint
addEventListener("securitypolicyviolation", (event) => { })
```

Alternatively, assign to the [event handler property](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) of the interface:

```js-nolint
onsecuritypolicyviolation = (event) => { }
```

## Event type

A [SecurityPolicyViolationEvent](https://developer.mozilla.org/en-US/docs/Web/API/SecurityPolicyViolationEvent). Inherits from [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event).

## Examples

The code below shows how you might add an event handler function using the `onsecuritypolicyviolation` event handler property (but note that this replaces other event listeners added using `onsecuritypolicyviolation`, if any) or `addEventListener()` on the `Document`.

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

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

## Specifications

## Browser compatibility

## See also

- The [securitypolicyviolation](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Fsecuritypolicyviolation_event) event of the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface
- The [securitypolicyviolation](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope%2Fsecuritypolicyviolation_event) event of the [WorkerGlobalScope](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope) interface
- [HTTP > Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)