CSPViolationReportBody: sample 属性

CSPViolationReportBody 接口的只读属性 sample 是一个字符串，其中包含违反内容安全策略 (CSP) 的资源的某一部分。

这个 sample 通常是违反 CSP 限制的内联脚本、事件处理程序或样式的开头 40 个字符。如果未填充，则为空字符串 ""。

请注意，这仅在尝试加载违反 CSP script-src* 和 style-src* 规则的内联脚本、事件处理程序或样式时才会填充 — 违反 CSP 的外部资源不会生成 sample。此外，只有当被违反的 Content-Security-Policy 指令还包含 'report-sample' 关键字时，才会包含 sample。

注意： 违反报告应被视为攻击者可控的数据。此字段的内容尤其应在存储或渲染前进行清理。

值

一个字符串，包含违反 CSP 的内联资源的 sample，通常是前 40 个字符，或者是一个空字符串。

示例

CSP 内联脚本违规

此示例使用内联脚本触发 CSP 违反，并使用 ReportingObserver 报告该违反。我们还在 CSP 中添加了 'report-sample' 以填充 body 中的 sample。

HTML

下面的 HTML 文件使用 <meta> 元素设置 Content-Security-Policy script-src-elem 为 self，它允许从同一域加载脚本，但不允许执行内联脚本。我们在指令中包含了 'report-sample'，以便生成 sample。该文档还包含一个内联脚本，这应该会触发 CSP 违反。

html

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src-elem 'self' 'report-sample'" />
    <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" 的内容违反报告。每次调用回调函数时，我们获取报告数组的第一个条目的 body，并使用它将违反的 sample 记录到控制台。

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

observer.observe();

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