无需登录 数据私有 本地保存

Reporting API演示 - CSP/干预/崩溃报告

安全工具 开发工具 Reporting API 安全 报告
33
0
0
0

📡 Reporting API 演示面板

实时观察 & 模拟 CSP违规 / 干预 / 崩溃报告
0
全部报告
0
CSP 违规
0
干预报告
0
弃用警告
0
崩溃报告
报告列表
显示全部

暂无报告

报告将在此处实时显示。点击"模拟报告"生成示例，或使用 ReportingObserver 自动捕获。
报告详情
← 点击左侧报告查看详情
CSP 策略设置
违规操作在隔离的 iframe 中执行，不会影响当前页面。报告通过 postMessage 回传。
iframe 测试输出
点击上方按钮触发CSP违规测试...
端点配置
Report-To 头部 (旧格式)
等待生成...
Reporting-Endpoints 头部 (新格式)
等待生成...
CSP report-to 指令
等待生成...
常见问题与知识点

Reporting API 是一个浏览器原生机制，允许网页以结构化的方式收集和发送各种报告（如CSP违规、浏览器干预、弃用警告、崩溃报告）。它定义了统一的报告格式和传输协议。开发者可以通过 Report-To 或 Reporting-Endpoints HTTP头部指定报告接收端点，浏览器会自动将报告POST到这些端点。前端JS中可使用 ReportingObserver 在页面内捕获这些报告。

关键字段包括：documentURL（违规页面URL）、blockedURL（被阻止的资源URL）、effectiveDirective（生效的CSP指令）、originalPolicy（原始CSP策略）、sourceFile（违规代码所在文件）、lineNumber/columnNumber（违规位置）、sample（违规代码片段，最多40字符）、disposition（enforce强制/report仅报告）。这些字段帮助开发者快速定位和修复CSP配置问题。

Report-To 是旧格式（已逐步弃用但仍有广泛支持），使用JSON格式定义端点组，支持故障转移、权重等高级特性。Reporting-Endpoints 是新格式，语法更简洁：Reporting-Endpoints: default="https://..."，用逗号分隔多个端点。新格式更简单但功能较少。目前建议同时配置两者以确保兼容性。CSP中的 report-to 指令引用端点组名称。

在支持的浏览器中，ReportingObserver 可捕获：csp-violation（CSP违规）、intervention（浏览器干预，如自动播放被阻止）、deprecation（使用已弃用API）、crash（崩溃报告，需浏览器支持）。通过 types 选项可筛选报告类型。注意：ReportingObserver 只能捕获页面内生成的报告，不能捕获跨域iframe中的报告（除非iframe同源）。

生产环境需要搭建报告接收端点（如 /api/reports），该端点接收POST请求，Content-Type为 application/reports+json，请求体是报告数组。可使用现成服务如 Sentry、Report URI、CSPer 等，或自建简单服务存储到日志系统。报告端点需支持CORS（如涉及跨域）。建议对接收到的报告进行去重、聚合分析，并设置告警阈值。

崩溃报告在浏览器进程崩溃后，重启时自动发送。报告包含 crashId（唯一标识）、reason（如oom内存不足）。崩溃报告的生成依赖于浏览器的崩溃报告系统（如Chrome的crashpad），需要浏览器启动时开启崩溃报告功能。Web开发者无法主动触发崩溃报告，但可通过配置 Reporting-Endpoints 来指定接收端点。注意：崩溃报告仅在浏览器层面产生，与JS运行时错误不同。

常见干预场景：自动播放音频被阻止（用户未交互时）、振动API过度调用、后台页面使用requestAnimationFrame、过大的DOM操作、document.write在慢速网络中使用、密码字段在非安全页面等。浏览器通过干预来改善用户体验和安全性。干预报告记录了干预的ID、消息和触发位置，帮助开发者优化代码。
🔧 相关工具