CSPViolationReportBody: referrer 属性
CSPViolationReportBody 接口的只读属性 referrer 是一个字符串，表示资源（其 Content Security Policy (CSP) 被违反）的引用页面的 URL。
Referrer 是导致 CSP 违规页面加载的那个页面。例如，如果我们点击一个链接进入一个 CSP 违规页面，那么 referrer 就是我们从中导航过来的页面。
值
一个字符串，表示带有 CSP 违规的页面的 referrer 的 URL，或者为 null。
请注意，如果 referrer 是 HTTP(S) URL，则会删除任何用户名、密码或片段。如果 URL 方案不是 http: 或 https:，则只返回方案。
示例
显示 referrer 的 CSP 内联脚本违规
此示例使用内联脚本触发 CSP 违规，并使用 ReportingObserver 报告违规。我们从另一个页面导航到该页面，并记录 referrer、documentURL 和 blockedURL。
HTML
首先，我们定义我们的 referrer 页面 /bounce/index.html。此页面仅包含一个指向另一个页面 ../report_sample/index.html 的链接。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<ul>
<li><a href="../report_sample/">report sample</a></li>
</ul>
</body>
</html>
../report_sample/index.html HTML 文件定义如下。它使用 <meta> 元素设置 Content-Security-Policy 的 script-src-elem 为 self，这允许从同一域加载脚本，但不允许执行内联脚本。该文档还包含一个内联脚本，这将触发 CSP 违规。
<!doctype html>
<!-- /report_sample/index.html -->
<html lang="en">
<head>
<meta
http-equiv="Content-Security-Policy"
content="script-src-elem 'self' 'report-sample'" />
<script src="main.js"></script>
</head>
<body>
<script>
const int = 4;
</script>
</body>
</html>
JavaScript (main.js)
上面的报告示例还加载了外部脚本 main.js，如下所示。由于这是从与 HTML 相同的域加载的，因此它不会被 CSP 阻止。
该脚本创建一个新的 ReportingObserver 来观察类型为 "csp-violation" 的内容违规报告。每次调用回调函数时，我们都会获取报告数组的第一个条目的主体，并使用它将违规的 documentURL、referrer 和 blockedURL 记录到控制台。
// main.js
const observer = new ReportingObserver(
(reports, observer) => {
console.log(`documentURL: ${reports[0].body.referrer}`);
console.log(`referrer: ${reports[0].body.referrer}`);
console.log(`blockedURL: ${reports[0].body.blockedURL}`);
},
{
types: ["csp-violation"],
buffered: true,
},
);
observer.observe();
请注意，虽然返回的数组中可能有多份报告，但为了简洁起见，我们只记录第一个元素的这些值。
结果
上述代码的控制台输出可能类似于下方（网站将取决于页面如何提供）：
documentURL: http://127.0.0.1:9999/report_sample/ referrer: http://127.0.0.1:9999/bounce/ blockedURL: inline
请注意，referrer 是我们从中导航过来的页面，documentURL 是发生 CSP 违规的页面，而 blockedURL 在这种情况下不是 URL，而是表示违规是由不安全的内联脚本引起的。
规范
| 规范 |
|---|
| 内容安全策略级别 3 # dom-cspviolationreportbody-referrer |
浏览器兼容性
加载中…