IntegrityViolationReportBody

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

TheIntegrityViolationReportBody dictionary is an extension of theReporting API that represents the body of anIntegrity Policy violation report.

Integrity violation reports can be reported toreporting server endpoints or via aReportingObserver.They have atype of"integrity-violation", aurl indicating the document that contains the violation, and abody property that is an object matching this dictionary.

Instance properties

blockedURLRead only: A string representing the URL of the resource blocked by an enforced integrity policy (or just reported for areportOnly policy).
documentURLRead only: A string representing the URL of the document that is attempting to load the resource.
destinationRead only: A string indicating theRequest.destination of the resource that was blocked.This can currently only be"script".
reportOnlyRead only: A boolean:false if the policy was enforced, andtrue if the violation was only reported.

Description

Integrity Policy violations are reported when a document attempts to load a resource that does not meet theSubresource Integrity guarantees of a policy set using either theIntegrity-Policy orIntegrity-Policy-Report-Only HTTP headers.

Specifically, a report is sent when a document attempts to load a<script> resource (or otherrequest destination listed in the policy) that does not have valid integrity metadata, or to make a request inno-cors mode.

Violation reports may be obtained in a violating document using aReportingObserver callback (defined in theReportingObserver() constructor), filtering on report objects that have atype of"integrity-violation".

Violation reports may also be sent as JSON objects inPOST requests to theendpoints specified in theIntegrity-Policy andIntegrity-Policy-Report-Only headers.The JSON report objects are a serialization of the reports returned in theReportingObserver, and therefore also have atype of"integrity-violation", and abody property that is a serialization of this object.Note that endpoint values set in the policy must map to identifiers set using theReporting-Endpoints header.

Examples

Reporting using the API

This example shows how you can obtain Integrity Policy violation reports using aReportingObserver.

First we set a page's integrity policy using theIntegrity-Policy.The policy below reports and blocks resource loading of any<script> element orHTMLScriptElement object that does not specify anintegrity attribute, or when a script resource is requested inno-cors mode.Note that for this example we're only interested in reporting the violations using the API, so we're omitting the reporting endpoints:

http

Integrity-Policy: blocked-destinations=(script)

Next, we'll assume that our page includes the following element to load a script.Because we want to trigger a violation, it omits theintegrity attribute used to check the script matches our expected version.We could also omit thecross-origin attribute so the request is sent inno-cors mode.

html

<script  src="https://example.com/example-framework.js"  crossorigin="anonymous"></script>

Note:A script that complies with the policy might look like this:

html

<script  src="https://example.com/example-framework.js"  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"  crossorigin="anonymous"></script>

To observe violations within the page, we construct a newReportingObserver object to listen for reports with the type"integrity-violation", passing a callback that will receive and log the reports.This code needs to be loaded before the script that causes the violation, in the same page:

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

Above, we log each violation report object and a JSON-string version of the object, which might look similar to the object below.

json

{  "type": "integrity-violation",  "url": "https://example.com",  "body": {    "documentURL": "https://example.com",    "blockedURL": "https://example.com/example-framework.js",    "destination": "script",    "reportOnly": false  }}

Sending a report to a reporting endpoint

Configuring a web page to send an Integrity Policy violation report to areporting server endpoint is very similar to the previous example.

The main difference is that we need to specify one or more reporting endpoints where we want the reports to be sent, using theReporting-Endpoints response header, and then reference these in theendpoints field when setting the policy.

You can see this below, where we first define two endpoints —integrity-endpoint andbackup-integrity-endpoint — and then reference them in our policy:

http

Reporting-Endpoints: integrity-endpoint=https://example.com/integrity, backup-integrity-endpoint=https://report-provider.example/integrityIntegrity-Policy: blocked-destinations=(script), endpoints=(integrity-endpoint, backup-integrity-endpoint)

We can trigger a violation by loading an external script from the page that does not meet the subresource integrity guidelines.Just to differ from the previous example, here we send the request inno-cors mode:

html

<script  src="https://example.com/example-framework.js"  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>

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

The report in this case would look the same as our JSON report in the previous example.

json

{  "type": "integrity-violation",  "url": "https://example.com",  "body": {    "documentURL": "https://example.com",    "blockedURL": "https://example.com/example-framework.js",    "destination": "script",    "reportOnly": false  }}