Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Securitypolicyviolationevent sidebar #35384

Merged
merged 6 commits into from
Aug 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@ browser-compat: api.Document.securitypolicyviolation_event

The **`securitypolicyviolation`** event is fired when a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) is violated.

The event is fired on the global scope when violates the policy and will bubble to the {{domxref("Window")}} object. The event may also bubble from {{domxref("Node", "nodes", "", "nocode")}} contained in the document tree.
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).

The handler can be assigned using the `onsecuritypolicyviolation` event handler property or using {{domxref("EventTarget.addEventListener()")}}.
This event [bubbles](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling) to the {{domxref("Window")}} object, and is [composed](/en-US/docs/Web/API/Event/composed).

> [!NOTE]
> It is recommended to add the handler for this event to a top level object (i.e. {{domxref("Window")}} or {{domxref("Document")}}). While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.
> You should add the handler for this event to a top level object (i.e. {{domxref("Window")}} or {{domxref("Document")}}).
> While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is true for dynamically constructed elements, such as document.createElement("img"). Not what this PR changed though.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is saying if your static HTML element would trigger a violation, perhaps because it loads a restricted img, by the time you get to add your handler the event will have already fired? Makes sense, though I guess if you declare the handler inline that might be assigned and ready before the violation triggers. That could be browser dependent.

You're saying that you can add a dynamically constructed element with a handler, but the the policy violation isn't triggered until here is a global context - when you add it to the document. So that should work.

Would this fix it "enough"? I don't want to mess with this too much.

Suggested change
> While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.
> This is because you can't define a handler for elements in your HTML file until they are fully loaded, by which time the event will already have fired.


## Syntax

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ browser-compat: api.Element.securitypolicyviolation_event

The **`securitypolicyviolation`** event is fired when a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) is violated.

The event is fired on the element that violates the policy and bubbles.
It is normally handled by an event handler on the {{domxref("Window")}} or {{domxref("Document")}} object.
The event is fired on the element when there is a violation of the CSP policy.

The handler can be assigned using the `onsecuritypolicyviolation` property or using {{domxref("EventTarget.addEventListener()")}}.
This event [bubbles](/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling) and is [composed](/en-US/docs/Web/API/Event/composed).
It is normally handled by an event handler on the {{domxref("Window")}} or {{domxref("Document")}} object.

> [!NOTE]
> You must add the handler for this event to a top level object (i.e. {{domxref("Window")}} or {{domxref("Document")}}).
> You should add the handler for this event to a top level object (i.e. {{domxref("Window")}} or {{domxref("Document")}}).
> While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.

## Syntax
Expand All @@ -39,6 +39,10 @@ A {{domxref("SecurityPolicyViolationEvent")}}. Inherits from {{domxref("Event")}

The code below shows how you might add an event handler function using the `onsecuritypolicyviolation` global event handler property or `addEventListener()` on the top level `Window` (you could use exactly the same approach on `Document`).

> [!NOTE]
> The example doesn't assign the handler directly to an element because, as noted above, for elements defined in HTML, the event would fired before this code could run.
> You might however add the event listener directly to an element that is dynamically constructed!

```js
window.onsecuritypolicyviolation = (e) => {
// Handle SecurityPolicyViolationEvent e here
Expand Down
11 changes: 9 additions & 2 deletions files/en-us/web/api/reporting_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,6 @@ The Reporting API spec also defines a Generate Test Report [WebDriver](/en-US/do

## Interfaces

- {{domxref("CSPViolationReportBody")}}
- : Contains details of a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) violation.
- {{domxref("DeprecationReportBody")}}
- : Contains details of deprecated web platform features that a website is using.
- {{domxref("InterventionReportBody")}}
Expand All @@ -64,6 +62,15 @@ The Reporting API spec also defines a Generate Test Report [WebDriver](/en-US/do
- {{domxref("ReportingObserver")}}
- : An object that can be used to collect and access reports as they are generated.

### Related interfaces
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note "related". These are not explicitly extension to this API. Separated in this doc so that I can justifiably include the event.


These interfaces are defined as part of the HTTP [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) specifications:

- {{domxref("CSPViolationReportBody")}}
- : Contains details of a CSP violation.
- {{domxref("SecurityPolicyViolationEvent")}}
- : Represents the event object of a `securitypolicyviolation` event fired on an element, document, or worker when its CSP is violated.

## Examples

In our [deprecation_report.html](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html) example, we create a simple reporting observer to observe usage of deprecated features on our web page:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.blockedURI
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`blockedURI`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is a string
representing the URI of the resource that was blocked because it violates a policy.
The **`blockedURI`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is a string representing the URI of the resource that was blocked because it violates a [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP).

## Value

Expand All @@ -34,4 +32,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note, I moved this string up into the first descriptive sentence. If you don't have context you need to know what a policy is straight away.

- [`CSPViolationReportBody.blockedURL`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.blockedurl)
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.columnNumber
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`columnNumber`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is the column number in the
document or worker at which the violation occurred.
The **`columnNumber`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is the column number in the document or worker script at which the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) violation occurred.

## Value

Expand All @@ -34,4 +32,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.columnNumber`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.columnnumber)
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,18 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.disposition
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`disposition`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface indicates how the violated policy
is configured to be treated by the user agent.
The **`disposition`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface indicates how the violated [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) is configured to be treated by the user agent.

## Value

A value defined in the [SecurityPolicyViolationEventDisposition enum](https://w3c.github.io/webappsec-csp/#enumdef-securitypolicyviolationeventdisposition)
representing the URI of the blocked resource. Possible values are `"enforce"` or `"report"`
Possible values are:

- `"enforce"`
- : The policy is enforced and the resource request is blocked.
- `"report"`
- : The violation is reported but the resource request is not blocked.

## Examples

Expand All @@ -35,4 +37,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.disposition`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.disposition)
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.documentURI
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`documentURI`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is a string
representing the URI of the document or worker in which the violation was found.
The **`documentURI`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is a string representing the URI of the document or worker in which the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) violation occurred.

## Value

A string representing the URI of the document or worker in which the
violation was found.
A string representing the URI of the document or worker in which the violation occurred.

## Examples

Expand All @@ -35,4 +32,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.documentURL`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.documenturl)
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.effectiveDirective
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`effectiveDirective`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is a string
representing the directive whose enforcement uncovered the violation.
The **`effectiveDirective`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is a string representing the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) directive that was violated.

This supersedes {{domxref("SecurityPolicyViolationEvent.violatedDirective")}}, its historial alias.

## Value

A string representing the directive whose enforcement uncovered the
violation.
A string representing the particular [`Content-Security-Policy` directive](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives) that was violated.

## Examples

Expand All @@ -35,4 +34,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.effectiveDirective`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.effectivedirective)
24 changes: 15 additions & 9 deletions files/en-us/web/api/securitypolicyviolationevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ page-type: web-api-interface
browser-compat: api.SecurityPolicyViolationEvent
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`SecurityPolicyViolationEvent`** interface inherits from {{domxref("Event")}}, and represents the event object of an event sent on a document or worker when its content security policy is violated.
The **`SecurityPolicyViolationEvent`** interface inherits from {{domxref("Event")}}, and represents the event object of a `securitypolicyviolation` event sent on an {{domxref("Element/securitypolicyviolation_event", "Element")}}, {{domxref("Document/securitypolicyviolation_event", "Document")}}, or {{domxref("WorkerGlobalScope/securitypolicyviolation_event", "worker","","nocode")}} when its [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) is violated.

{{InheritanceDiagram}}

Expand All @@ -23,25 +23,27 @@ The **`SecurityPolicyViolationEvent`** interface inherits from {{domxref("Event"
- {{domxref("SecurityPolicyViolationEvent.columnNumber")}} {{ReadOnlyInline}}
- : The column number in the document or worker at which the violation occurred.
- {{domxref("SecurityPolicyViolationEvent.disposition")}} {{ReadOnlyInline}}
- : Indicates how the violated policy is configured to be treated by the user agent. This will be `"enforce"` or `"report"`.
- : A string indicating whether the user agent is configured to enforce or just report the policy violation.
- {{domxref("SecurityPolicyViolationEvent.documentURI")}} {{ReadOnlyInline}}
- : A string representing the URI of the document or worker in which the violation was found.
- : A string representing the URI of the document or worker in which the violation occurred.
- {{domxref("SecurityPolicyViolationEvent.effectiveDirective")}} {{ReadOnlyInline}}
- : A string representing the directive whose enforcement uncovered the violation.
- : A string representing the directive that was violated.
- {{domxref("SecurityPolicyViolationEvent.lineNumber")}} {{ReadOnlyInline}}
- : The line number in the document or worker at which the violation occurred.
- {{domxref("SecurityPolicyViolationEvent.originalPolicy")}} {{ReadOnlyInline}}
- : A string containing the policy whose enforcement uncovered the violation.
- : A string containing the policy whose enforcement caused the violation.
- {{domxref("SecurityPolicyViolationEvent.referrer")}} {{ReadOnlyInline}}
- : A string representing the URL for the referrer of the resources whose policy was violated, or `null`.
- {{domxref("SecurityPolicyViolationEvent.sample")}} {{ReadOnlyInline}}
- : A string representing a sample of the resource that caused the violation, usually the first 40 characters. This will only be populated if the resource is an inline script, event handler, or style — external resources causing a violation will not generate a sample.
- {{domxref("SecurityPolicyViolationEvent.sourceFile")}} {{ReadOnlyInline}}
- : If the violation occurred as a result of a script, this will be the URL of the script; otherwise, it will be `null`. Both `columnNumber` and `lineNumber` should have non-null values if this property is not `null`.
- : If the violation occurred as a result of a script, this will be the URL of the script; otherwise, it will be `null`.
Both `columnNumber` and `lineNumber` should have non-null values if this property is not `null`.
- {{domxref("SecurityPolicyViolationEvent.statusCode")}} {{ReadOnlyInline}}
- : A number representing the HTTP status code of the document or worker in which the violation occurred.
- {{domxref("SecurityPolicyViolationEvent.violatedDirective")}} {{ReadOnlyInline}}
- : A string representing the directive whose enforcement uncovered the violation.
- : A string representing the directive that was violated.
This is a historical alias of [`effectiveDirective`](#effectivedirective).

## Examples

Expand All @@ -63,4 +65,8 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- HTTP [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- {{domxref("CSPViolationReportBody")}}
- The {{domxref("Element/securitypolicyviolation_event", "securitypolicyviolation")}} event of the {{domxref("Element")}} interface
- The {{domxref("Document/securitypolicyviolation_event", "securitypolicyviolation")}} event of the {{domxref("Document")}} interface
- The {{domxref("WorkerGlobalScope/securitypolicyviolation_event", "securitypolicyviolation")}} event of the {{domxref("WorkerGlobalScope")}} interface
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.lineNumber
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`lineNumber`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is the line number in the document
or worker at which the violation occurred.
The **`lineNumber`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is the line number in the document or worker script at which the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) violation occurred.

## Value

Expand All @@ -34,4 +32,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.lineNumber`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.linenumber)
Copy link
Member

@Josh-Cena Josh-Cena Aug 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: link to the property page, even if it doesn't exist, so we don't need to update it in the future. (Same below)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, but I don't think so. A link that works now is worth far more than one in future that might.

Copy link
Member

@Josh-Cena Josh-Cena Aug 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I've added a check to https://jc-verse.github.io/mdn-graph/warnings (Replace DT link with real target) so this is in our backlog.

Copy link
Collaborator Author

@hamishwillee hamishwillee Aug 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be an excellent improvement. I wonder if the linter could do this automagically.

Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.originalPolicy
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`originalPolicy`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is a string
containing the policy whose enforcement uncovered the violation.
The **`originalPolicy`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is a string containing the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) whose enforcement uncovered the violation.

## Value

A string representing the policy whose enforcement uncovered the
violation.
A string representing the policy whose enforcement uncovered the violation.

This is the string in the {{HTTPHeader("Content-Security-Policy")}} HTTP header that contains the list of [directives](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives) and their values that make the CSP policy.

## Examples

Expand All @@ -35,4 +34,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.originalPolicy`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.originalpolicy)
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.referrer
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`referrer`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is a string
representing the referrer of the resources whose policy was violated. This will be a URL
or `null`.
The **`referrer`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is a string representing the referrer for the resources whose [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) was violated.
This will be a URL or `null`.

## Value

A string representing the URL of the referrer of the violating
resources.
A string representing the URL for the referrer of the resources whose policy was violated, or `null`.

## Examples

Expand All @@ -36,4 +33,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.referrer`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.referrer)
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,14 @@ page-type: web-api-instance-property
browser-compat: api.SecurityPolicyViolationEvent.sample
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`sample`** read-only property of the
{{domxref("SecurityPolicyViolationEvent")}} interface is a string
representing a sample of the resource that caused the violation.
The **`sample`** read-only property of the {{domxref("SecurityPolicyViolationEvent")}} interface is a string representing a sample of the resource that caused the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) violation.

## Value

A string containing a sample of the resource that caused the
violation, usually the first 40 characters. This will only be populated if the resource
is an inline script, event handler, or style — external resources causing a violation
A string containing a sample of the resource that caused the violation, usually the first 40 characters.
This will only be populated if the resource is an inline script, event handler, or style — external resources causing a violation
will not generate a sample.

## Examples
Expand All @@ -37,4 +34,4 @@ document.addEventListener("securitypolicyviolation", (e) => {

## See also

- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP)
- [`CSPViolationReportBody.sample`](/en-US/docs/Web/API/CSPViolationReportBody#cspviolationreportbody.sample)
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ page-type: web-api-constructor
browser-compat: api.SecurityPolicyViolationEvent.SecurityPolicyViolationEvent
---

{{HTTPSidebar}}
{{APIRef("Reporting API")}}

The **`SecurityPolicyViolationEvent()`** constructor creates a new {{domxref("SecurityPolicyViolationEvent")}} object.

Expand Down
Loading