CSPViolationReportBody: blockedURL property

The blockedURL read-only property of the CSPViolationReportBody interface is a string value that represents the resource that was blocked because it violates a Content Security Policy (CSP).

Value

An string containing a value or URL that represents the resource that violated the policy.

If the value is not the URL of a resource, it must be one of the following strings:

inline: An inline resource. For example, an inline script that was used when 'unsafe-inline' was not specified in the CSP.
eval: An eval(). For example, eval() was used but 'unsafe-eval' was not specified in the CSP.
wasm-eval: An Wasm evaluation. For example, eval() was used but 'wasm-unsafe-eval' was not specified in the CSP.
trusted-types-policy: A resource that violated the trusted-types CSP directive. For example, a TrustedTypePolicy was created using window.trustedTypes.createPolicy() with a name that wasn't listed in the CSP trusted-types directive.
trusted-types-sink: A resource that violated the require-trusted-types-for CSP directive. For example, the directive was set to script but the document did not use a TrustedTypePolicy to sanitize data before passing it to a sink such as Element.innerHTML.

Examples

The following examples show HTML that would result in some of the blockedURL values outlined above.

The examples assume that you have a JavaScript file named main.js imported into your script from the same domain. The script, which is shown below, creates a new ReportingObserver to observe content violation reports of type "csp-violation". Each time the callback function is invoked, we log the blockedURL in the first entry of the reports array.

const observer = new ReportingObserver(
  (reports, observer) => {
    console.log(`blockedURL: ${reports[0].body.blockedURL}`);
  },
  {
    types: ["csp-violation"],
    buffered: true,
  },
);

observer.observe();

Note that while there might be multiple reports in the returned array, for brevity we only log the blocked URL of the first report.

blockedURL for an external resource

The HTML below sets a policy of Content-Security-Policy: default-src 'self', which only allows resources from the same site to be loaded, and then attempts to load a script from the external site https://apis.google.com.

html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    <script src="main.js"></script>
  </head>
  <body>
    <!-- This should generate a CSP violation -->
    <script src="https://apis.google.com/js/platform.js"></script>
  </body>
</html>

The result of logging the blockedURL would be:

blockedURL: https://apis.google.com/js/platform.js

blockedURL for unsafe-inline resources

The HTML below demonstrates the conditions that would result in a blockedURL of inline. This sets a policy of Content-Security-Policy: default-src 'self', which does not allow inline scripts to be executed, causing a violation because the page contains an inline script.

html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    <script src="main.js"></script>
  </head>
  <body>
    <script>
      const int = 4;
    </script>
  </body>
</html>

The result of logging the blockedURL would be:

blockedURL: inline

blockedURL for trusted-types-policy resources

The HTML below demonstrates the conditions that would result in a blockedURL of trusted-types-policy. First it defines a policy that allows 'unsafe-inline' scripts to be executed, so that we can create a TrustedTypePolicy that will trigger a violation. The policy also uses the trusted-types directive to specify that a TrustedTypePolicy with the name myPolicy is allowed to be created.

html

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'report-sample' 'unsafe-inline'; trusted-types myPolicy" />
    <script src="main.js"></script>
  </head>

  <body></body>

  <script>
    const policy = trustedTypes.createPolicy("somePolicy", {
      createHTML: (string) => {
        // Some (insufficient) sanitization code
        return string.replace(/</g, "&lt;");
      },
    });
  </script>
</html>

In the script a policy is created with the name somePolicy.

Note: The particular policy we defined above is not a very good policy. The aim of using trusted types is not to enforce a particular policy, but to require enforcement of some policy, and ensure that the sanitization code is in one place and easy to review.

Because this is not listed in the trusted-types directive it is a CSP violation, and we'd see the log output:

blockedURL: trusted-types-policy

If we changed the name of the allowed policy to somePolicy, the page would no longer be in violation.

blockedURL for trusted-types-sink resources

The HTML below demonstrates the conditions that would result in a blockedURL of trusted-types-sink. First it defines a policy that allows 'unsafe-inline' scripts to be executed, and as in the previous example it use the trusted-types directive to specify that a TrustedTypePolicy with the name myPolicy is allowed to be created.

In addition, it specifies the directive require-trusted-types-for 'script', which enforces that sinks should only be passed content that has been sanitized using a trusted type.

html

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'report-sample' 'unsafe-inline'; trusted-types 'myPolicy'; require-trusted-types-for 'script'" />
    <script src="main.js"></script>
  </head>
  <body>
    <input type="text" id="userInput" />
    <button onclick="updateContent()">Update Content</button>
    <div id="content"></div>
  </body>

  <script>
    function updateContent() {
      const userInput = document.getElementById("userInput").value;

      // Passing unsanitized content - a violation of the policy
      document.getElementById("content").innerHTML = userInput;
    }
  </script>
</html>

The updateContent() method passes unsanitized content to the element's innerHTML property, which will cause a CSP violation. We'd see the log output:

blockedURL: trusted-types-sink

In order to avoid the violation we would need to update the script to define a trusted type policy, and use it to sanitize the input passed to the element:

const policy = trustedTypes.createPolicy("myPolicy", {
  createHTML: (string) => {
    // Some (insufficient) sanitization code
    return string.replace(/</g, "&lt;");
  },
});

function updateContent() {
  const userInput = document.getElementById("userInput").value;
  const sanitizedInput = policy.createHTML(userInput);
  document.getElementById("content").innerHTML = sanitizedInput;
}

Specifications

Specification
Content Security Policy Level 3 # dom-cspviolationreportbody-blockedurl

Browser compatibility

BCD tables only load in the browser