report-uri已废弃，必须改用report-to配合report-to响应头；前端csp中需写report-to group-name，服务端须返回合法json格式的report-to头，且url必须https、group名严格匹配。
report-uri 已被弃用，改用 report-to
HTML 中的 Content-Security-Policy 的 report-uri 指令在 Chrome 98+、Firefox 103+ 和 Safari 15.4+ 中已完全失效。浏览器不再发送违规报告到 report-uri 指定的地址，即使策略里写了也不会触发请求。这是 CSP Level 3 的正式变更，不是 bug，也不是兼容性问题——它就是不工作了。
必须改用 report-to + Report-To HTTP 响应头配合使用。单独写 report-to 在 CSP 里而没配 Report-To 头，同样收不到报告。
实操建议：
-
Report-To是独立的响应头，需服务端显式返回（不能只靠 meta 标签或 CSP 内联） -
report-to指令值必须与Report-To头中某个group名称严格匹配（区分大小写） - Chrome 对
Report-To头的解析非常严格：JSON 格式错误、字段缺失、过期时间格式不对，都会导致整个头被忽略 - 本地开发时注意：HTTP 协议下
Report-To头可能被浏览器静默丢弃（部分版本要求 HTTPS）
Report-To 响应头怎么写才有效
这是一个典型可用的 Report-To 响应头（单 group）：
Report-To: {"group":"csp-endpoint","max_age":3600,"endpoints":[{"url":"https://example.com/csp-report"}]}
关键点：
-
group值（这里是"csp-endpoint"）必须和 CSP 中report-to csp-endpoint完全一致 -
max_age单位是秒，设为 0 会立即失效；设太小（如 60）会导致报告频繁中断 -
endpoints是数组，至少含一个对象，url必须是 HTTPS（除非 localhost 或 file:// 协议） - 该头必须出现在 HTML 响应中（即服务端渲染页面时返回），不能靠 JS 动态注入
CSP 策略里 report-to 的写法和常见错误
正确示例（HTTP 响应头中设置 CSP）：
Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com; report-to csp-endpoint
错误写法及后果：
-
report-to "csp-endpoint"—— 引号是非法的，会直接让整条 CSP 解析失败（浏览器降级为无 report-to） -
report-to csp-endpoint; report-uri /old-report——report-uri被忽略，但不会报错，容易误以为还在生效 -
report-to csp-endpoint单独存在，但没配Report-To头 —— 静默失败，控制台无提示，报告发不出去 - 多个
report-to指令（如report-to a; report-to b）—— 只有最后一个生效
如何验证 report-to 是否真正生效
不能只看网络面板有没有请求，要分三步确认：
- 打开 DevTools → Application → Clear storage → 清空所有站点数据（包括 Reporting API 缓存）
- 刷新页面，检查 Network → Filter 输入
report，看是否有/csp-report类请求（注意：这是由浏览器自动发起的 POST，不是页面 JS 发的） - 在 Console 中执行
navigator.sendBeacon测试无效；正确方式是手动触发违规，例如插入：<script>eval('alert(1)')</script>（前提是 CSP 里禁了unsafe-eval） - 后端接收端必须返回 200（且响应体为空或 JSON），返回 4xx/5xx 会导致浏览器停止后续报告
Reporting API 的状态不容易调试，一旦配置出错，它不会报错也不会重试，只是沉默丢弃。最易忽略的是 Report-To 头未随 HTML 响应发出，或 group 名拼写差一个字母。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
