CSPViolationReportBody

Also inherits properties from its parent interface, ReportBody.

CSPViolationReportBody.blockedURL Read only

A string representing either the type or the URL of the resource that was blocked because it violates the CSP.

CSPViolationReportBody.columnNumber Read only

The column number in the script at which the violation occurred.

CSPViolationReportBody.disposition Read only

Indicates how the violated policy is configured to be treated by the user agent. This will be "enforce" or "report".

CSPViolationReportBody.documentURL Read only

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

CSPViolationReportBody.effectiveDirective Read only

A string representing the directive whose enforcement uncovered the violation.

CSPViolationReportBody.lineNumber Read only

The line number in the script at which the violation occurred.

CSPViolationReportBody.originalPolicy Read only

A string containing the policy whose enforcement uncovered the violation.

CSPViolationReportBody.referrer Read only

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

CSPViolationReportBody.sample Read only

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.

CSPViolationReportBody.sourceFile Read only

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.

CSPViolationReportBody.statusCode Read only

A number representing the HTTP status code of the document or worker in which the violation occurred.

Also inherits methods from its parent interface, ReportBody.

CSPViolationReportBody.toJSON()

A serializer which returns a JSON representation of the CSPViolationReportBody object.

To obtain a CSPViolationReportBody object, you must configure your page so that a CSP violation will occur. In this example, we will set our CSP to only allow content from the site's own origin, and then attempt to load a script from apis.google.com, which is an external origin.

First, we will set our Content-Security-Policy header in the HTTP response:

Content-Security-Policy: default-src 'self';

or in the HTML <meta> element:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />

Then, we will attempt to load an external script:

<!-- This should generate a CSP violation -->
<script src="https://apis.google.com/js/platform.js"></script>

Finally, we will create a new ReportingObserver object to listen for CSP violations (this will need to be loaded from the same location, before the script that causes the violation).

const observer = new ReportingObserver(
  (reports, observer) => {
    reports.forEach((violation) => {
      console.log(violation);
      console.log(JSON.stringify(violation));
    });
  },
  {
    types: ["csp-violation"],
    buffered: true,
  },
);

observer.observe();

Above we log the each violation report object and a JSON-string version of the object, which might look similar to the object below. Note that the body is an instance of the CSPViolationReportBody and the type is "csp-violation".

{
    "type": "csp-violation",
    "url": "http://127.0.0.1:9999/",
    "body": {
        "sourceFile": null,
        "lineNumber": null,
        "columnNumber": null,
        "documentURL": "http://127.0.0.1:9999/",
        "referrer": "",
        "blockedURL": "https://apis.google.com/js/platform.js",
        "effectiveDirective": "script-src-elem",
        "originalPolicy": "default-src 'self';",
        "sample": "",
        "disposition": "enforce",
        "statusCode": 200
    }
}

Configuring a web page to send a CSP violation report is similar to the previous example. As before, you need to configure your page so that there is a violation.

In addition, you also need to specify the endpoint(s) where the report will be sent. A server specifies endpoints using the Reporting-Endpoints response header: these must be secure URLs (HTTPS). The CSP report-to directive is then used to specify that a particular endpoint is used for reporting CSP violations:

Reporting-Endpoints: csp-endpoint="https://example.com/csp-report-to"
Content-Security-Policy: default-src 'self'; report-to csp-endpoint

As before, we can trigger a violation by loading an external script from a location that is not allowed by our CSP header:

<!-- This should generate a CSP violation -->
<script src="https://apis.google.com/js/platform.js"></script>

The violation report will then be sent to the indicated endpoint as a JSON file. As you can see from the example below, the type is "csp-violation" and the body property is a serialization of the CSPViolationReportBody object:

[
  {
    "age": 53531,
    "body": {
      "blockedURL": "inline",
      "columnNumber": 59,
      "disposition": "enforce",
      "documentURL": "https://example.com/csp-report-to",
      "effectiveDirective": "script-src-elem",
      "lineNumber": 1441,
      "originalPolicy": "default-src 'self'; report-to csp-endpoint",
      "referrer": "https://www.google.com/",
      "sample": "",
      "sourceFile": "https://example.com/csp-report-to",
      "statusCode": 200
    },
    "type": "csp-violation",
    "url": "https://example.com/csp-report-to",
    "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
  }
]

• ReportBody
• ReportingObserver
• Content-Security-Policy
• SecurityPolicyViolationEvent