CSPViolationReportBody: columnNumber 属性
CSPViolationReportBody 接口的只读属性 columnNumber 指示了触发 内容安全策略 (CSP) 违规的源文件中的列号。
请注意，浏览器会从触发违规的文件全局对象中提取该值。如果触发 CSP 违规的资源未加载，则该值为 null。有关更多信息，请参阅 CSPViolationReportBody.sourceFile。
此属性与 CSPViolationReportBody.sourceFile 和 CSPViolationReportBody.lineNumber 结合使用最为有用，因为它提供了导致违规的该文件和行中的列位置。
值
一个整数，包含触发违规的列号，或者 null。
示例
CSP 内联脚本违规
此示例使用内联脚本触发 CSP 违规，并使用 ReportingObserver 报告违规。
HTML
下面的 HTML 文件使用 <meta> 元素将 Content-Security-Policy 的 default-src 设置为 self，这允许从同一来源加载脚本和其他资源，但不允许执行内联脚本。该文档还包含一个内联脚本，因此应该会触发 CSP 违规。
<!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" 的内容违规报告。每次调用回调函数时，我们都会获取报告数组的第一个条目的主体，并使用它将违规的文件、行和列记录到控制台。
// main.js
const observer = new ReportingObserver(
(reports, observer) => {
const cspViolationBody = reports[0].body;
console.log(`sourceFile: ${cspViolationBody.sourceFile}`);
console.log(`lineNumber: ${cspViolationBody.lineNumber}`);
console.log(`columnNumber: ${cspViolationBody.columnNumber}`);
},
{
types: ["csp-violation"],
buffered: true,
},
);
observer.observe();
请注意，虽然返回的数组中可能有多份报告，但为了简洁起见，我们只记录第一个元素的这些值。
结果
您可以使用 本地服务器 来尝试此操作。将上面的代码复制到 test/index.html 和 test/main.js 中，并在根目录中运行服务器。假设本地服务器的地址是 http://127.0.0.1:9999，然后您可以从 http://127.0.0.1:9999/test/（或 http://127.0.0.1:9999/test/index.html）加载 HTML 文件。
使用上述设置，Chrome 上的日志输出是
sourceFile: http://127.0.0.1:9999/test/ lineNumber: 15 columnNumber: 0
Firefox 的结果类似
sourceFile: http://127.0.0.1:9999/test/ lineNumber: 15 columnNumber: 13
请注意，两个浏览器报告的列号不同。Chrome 似乎始终报告 0。Firefox 上的值表示结束 <script> 标签后的第一个字符的位置。
规范
| 规范 |
|---|
| 内容安全策略级别 3 # dom-cspviolationreportbody-columnnumber |
浏览器兼容性
加载中…