搭建Content-Security-Policy Reporting API环境无报告流入问题排查

以下是当前配置中可能遗漏或错误的地方，逐一排查：

1. Reporting-Endpoints 地址配置错误 #

主服务器中Reporting-Endpoints头使用的是占位符https://<SOME_ENDPOINT>/csp-reports，但模拟报告服务器实际运行在http://localhost:3001，需要替换为可访问的真实地址：

// 主服务器app.get("/")接口中修改
res.setHeader("Reporting-Endpoints", 'csp-endpoint="http://localhost:3001/csp-reports"');

注意：主服务器与报告服务器端口不同属于跨域场景，必须处理跨域请求。

2. 报告接收服务器缺少CORS支持 #

浏览器发送CSP报告前会发起OPTIONS预检请求，当前报告服务器未配置跨域规则，会导致请求被拦截。添加CORS配置：

• 先安装cors依赖：npm install cors
• 修改报告服务器代码：

const express = require('express')
const cors = require('cors')
const app = express()
const port = 3001

app.use(cors()); // 测试环境允许所有跨域请求
app.use(express.json({ type: ['application/json', 'application/csp-report'] })); // 兼容CSP报告的Content-Type

app.post('/csp-reports', (req, res) => {
    console.log('Received data:', req.body);
    res.status(200).json({ message: 'Data received successfully!' }); 
});

app.listen(port, () => {
    console.log(`Reporting app listening on port ${port}`)
});

3. 请求体解析未兼容CSP报告的Content-Type #

CSP违规报告的Content-Type为application/csp-report，默认express.json()仅解析application/json类型请求，需扩展解析类型，上述代码已包含该配置：express.json({ type: ['application/json', 'application/csp-report'] })

4. 浏览器端验证与调试 #

• 打开Chrome开发者工具Security面板，确认浏览器已检测到CSP违规行为
• 切换到Network面板，过滤Other类型请求，查看是否有发送至/csp-reports的请求，若存在，根据状态码（如404、403）定位问题
• 检查chrome://flags/#reporting-api，确保Reporting API处于启用状态

内容的提问来源于stack exchange，提问作者Francisco Carriedo Scher