HTML5 Reporting API 通过浏览器自动上报CSP违规和JS错误，需配置Report-To响应头或meta标签指定上报端点，同域上报可自动携带Cookie关联用户，配合后端解析存储实现安全监控。
要用 HTML5 的 Reporting API 收集网页安全违规（如 CSP 违规）和运行时错误，核心是配置浏览器主动上报、确保后端能接收并解析报告、同时把用户上下文关联进去。它不是靠 JS 主动捕获，而是由浏览器在检测到策略违反或错误时自动触发上报。
一、启用 CSP 违规报告（最常用场景）
CSP 是 Reporting API 最典型的使用入口。关键是在 HTTP 响应头中正确设置 Content-Security-Policy 和 Report-To：
- 服务端返回响应头示例：
Content-Security-Policy: script-src 'self'; report-to csp-report-groupReport-To: {"group":"csp-report-group","max_age":10886400,"endpoints":[{"url":"https://api.yoursite.com/csp-reports"}],"include_subdomains":true} - report-to 指向的 group 名必须与 Report-To 头中定义的一致；max_age 单位为秒，建议设为 126 天（10886400），避免频繁重拉配置
- 浏览器收到该配置后，一旦执行了被 CSP 拦截的脚本（比如从 cdn.example.com 加载 JS），就会自动向
/csp-reports发送 POST 请求，携带 JSON 格式的违规详情
二、捕获 JavaScript 运行时错误（需配合 Report-To）
Reporting API 也支持 integrity 和 deprecation 类型，但原生错误（如 Uncaught TypeError）默认不走它。要让 JS 错误也能通过 Reporting API 上报，需额外开启：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
<head>中添加：<meta http-equiv="Report-To" content='{ "group": "error-report-group", "max_age": 86400, "endpoints": [{"url": "https://api.yoursite.com/error-reports"}] }'> - 再配合 CSP 头启用
report-uri或更推荐的report-to指令，例如：Content-Security-Policy: default-src 'self'; report-to error-report-group - 注意：目前主流浏览器对
error类型报告的支持仍有限（Chrome 较好，Safari/Firefox 不稳定），生产环境建议用window.onerror + fetch作为兜底
三、关联用户会话（关键落地环节）
光有违规数据没用，必须知道是谁、在哪台设备、什么时间触发的。Reporting API 的请求本身不带 Cookie 或认证头，所以得靠以下方式注入身份信息：
立即学习“前端免费学习笔记（深入）”；
-
同域上报 + Cookie 自动携带（推荐）：确保
https://api.yoursite.com/csp-reports与主站同域（如都是 yoursite.com），浏览器会在上报请求中自动带上当前用户的 session Cookie -
Service Worker 动态加签（跨域/无 Cookie 场景）：注册 SW 拦截所有上报请求，在 headers 中插入 JWT 或自定义 token：
newHeaders.append('X-User-ID', localStorage.getItem('uid')); - 后端接收到报告后，先解析 JSON 内容（含
violated-directive、blocked-uri、line-number等字段），再结合请求头中的会话标识存入数据库，用于后续分析或告警
四、验证与调试技巧
刚配置完容易“看不见报告”，可用这些方法快速确认是否生效：
- 在 DevTools 的 Application → Clear storage → Clear site data 清空缓存，再刷新页面，强制重新获取 Report-To 配置
- 手动触发 CSP 违规测试：
<script src="https://evil.com/test.js"></script>（前提是 CSP 已禁止外域 script） - 打开 Chrome 的 Network 面板，筛选
reports或csp-reports，看是否有 204 响应；点击请求可查看原始 payload - 如果始终无上报，检查响应头是否被 CDN 或反向代理意外过滤（特别是
Report-To头）
