-
Notifications
You must be signed in to change notification settings - Fork 22.5k
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
Changes from all commits
909535f
c409761
acbec69
68c7e3d
a34b0df
9d74140
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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")}} | ||
|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
|
||
|
@@ -34,4 +32,4 @@ document.addEventListener("securitypolicyviolation", (e) => { | |
|
||
## See also | ||
|
||
- [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
---|---|---|
|
@@ -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 | ||
|
||
|
@@ -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) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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) There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
There was a problem hiding this comment.
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.There was a problem hiding this comment.
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.