CSPViolationReportBody: disposition 属性

CSPViolationReportBody 接口的只读属性 disposition 指示用户代理是配置为强制执行 内容安全策略 (CSP) 违规,还是仅报告这些违规。

可能的值是

"enforce"

策略已执行,并且资源请求被阻止。

"report"

违规已被报告,但资源请求未被阻止。

示例

CSP 内联脚本违规,显示 disposition

此示例使用内联脚本触发 CSP 违规,并使用 ReportingObserver 报告该违规。disposition 会被记录。

HTML

下面的 HTML 文件使用 <meta> 元素将 Content-Security-Policydefault-src 设置为 self,这允许从同一域加载脚本和其他资源,但不允许执行内联脚本。该文档还包含一个内联脚本,因此应该会触发 CSP 违规。

html
<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; report-to csp-endpoint" />
    <meta
      http-equiv="Reporting-Endpoints"
      content="csp-endpoint='https://example.com/csp-reports'" />
    <script src="main.js"></script>
    <title>CSP: Violation due to inline script</title>
  </head>
  <body>
    <h1>CSP: Violation due to inline script</h1>
    <script>
      const int = 4;
    </script>
  </body>
</html>

JavaScript (main.js)

上面的文档还加载了外部脚本 main.js,如下所示。由于它是从与 HTML 相同的域加载的,因此不会被 CSP 阻止。

该脚本创建一个新的 ReportingObserver 来观察类型为 "csp-violation" 的内容违规报告。每次调用回调函数时,我们都会获取报告数组的第一个条目的主体,并使用它将违规的文件、行和列记录到控制台。

js
// main.js
const observer = new ReportingObserver(
  (reports, observer) => {
    const cspViolationBody = reports[0].body;
    console.log(`disposition: ${cspViolationBody.disposition}`);
    // For example: "enforce"
  },
  {
    types: ["csp-violation"],
    buffered: true,
  },
);

observer.observe();

请注意,虽然返回的数组中可能有多份报告,但为了简洁起见,我们只记录第一个元素的这些值。

结果

如果提供上述代码,日志输出将是

disposition: enforce

注意:如果启用了 Content-Security-Policy-Reporting-Only,则 disposition 将是 report。但请注意,Content-Security-Policy-Reporting-Only 必须通过服务器发送:如我们上面所做的那样,它不能在 <meta> 元素中设置。

规范

规范
内容安全策略级别 3
# dom-cspviolationreportbody-disposition

浏览器兼容性

另见