Express.js 4.17.1 无法正确解析CSP上报内容问题求解

问题根因 #

1. 变量名引用错误 #

你定义的CSP上报配置变量名为_reportCSP，但在设置响应头时使用的是未定义的reportCSP，导致响应头配置失效。

2. 未兼容CSP上报的两种格式 #

CSP有两种上报格式，结构差异很大：

• 传统上报格式：Content-Type为application/csp-report，请求体是顶层带csp-report字段的对象，不是数组
• 新版Reporting API格式：Content-Type为application/reports+json，请求体是存储多条上报记录的数组
  你直接遍历req.body的逻辑只兼容第二种格式，遇到传统格式时会遍历对象键名，导致输出异常。

3. 不必要的序列化操作 #

request对象包含socket、请求流等存在循环引用的结构，直接JSON.stringify(request)必然会抛出循环引用错误，你只需要序列化req.body即可。

修复方案 #

第一步：修正变量名 #

将变量定义改为：

const reportCSP = {
    endpoints: [
        {
            url: "https://myapp.com/reportCSP"
        }
    ],
    group: "csp-endpoint",
    include_subdomains: true,
    max_age: 31536000
};

或修改响应头引用的变量名为_reportCSP，保持前后一致即可。

第二步：调整express.json配置 #

放宽大小限制，避免上报内容被截断：

app.use(express.json({
    type: [
        "application/json",
        "application/csp-report",
        "application/reports+json"
    ],
    limit: '10kb'
}));

第三步：重写上报处理逻辑，兼容两种格式 #

app.post("/reportCSP", async (req, res) => {
    let reports = [];
    // 兼容两种上报格式
    if (Array.isArray(req.body)) {
        // 新版Reporting API格式
        reports = req.body;
    } else if (req.body?.['csp-report']) {
        // 传统CSP上报格式
        reports = [req.body['csp-report']];
    } else if (typeof req.body === 'string') {
        // 兜底处理未成功解析的字符串格式请求体
        try {
            const parsed = JSON.parse(req.body);
            reports = Array.isArray(parsed) ? parsed : 
                      parsed?.['csp-report'] ? [parsed['csp-report']] : [parsed];
        } catch (err) {
            console.error('请求体解析失败：', err);
        }
    }
    // 打印上报内容
    console.log(`${reports.length} 条CSP违规报告：`);
    reports.forEach((report, idx) => {
        console.log(`第${idx + 1}条报告内容：`, JSON.stringify(report, null, 2));
    });
    // 上报接口必须返回2xx状态码，推荐返回204无内容
    res.sendStatus(204);
});

内容的提问来源于stack exchange，提问作者Mike