无法解析 CSP 报告的内容

Question

我正在通过report-to 指令发送 CSP 报告：

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

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

res.setHeader("content-security-policy", `default-src 'none'; script-src https://*.someHost.com 'self' 'unsafe-eval' 'unsafe-inline'; style-src https://*.someHost.com 'self'; font-src https://*.someHost.com 'self'; img-src 'self'; connect-src https://*.someHost.com https://*.dropboxapi.co 'self'; frame-ancestors 'none'; report-to ${reportCSP.group};`);

res.setHeader("report-to", JSON.stringify(reportCSP));

URL https://*.dropboxapi.co 仅用于 CSP 报告测试目的。

基于this 示例，我按以下方式处理 CSP 报告请求：

function echoReports(request, response) {

    for (const report of request.body) {
        console.log(`Report content: ${report}`);
        console.log(`Report content: ${JSON.stringify(report)}`);
    }
}

app.post("/reportCSP",

    async (req, res) => {

        console.log(`${req.body.length} CSP violation reports:`);

        echoReports(req, res);
    }
);

结果，我进入了服务器端：

1 CSP violation reports:
Report content: [object Object]
Report content: "[object Object]"

在 DevTools 中我看到了正确的错误报告：

Refused to connect to 'https://content.dropboxapi.com/…' because it violates the following Content Security Policy directive: "connect-src https://*.someHost.com https://*.dropboxapi.co 'self'"

Refused to connect to 'https://content.dropboxapi.com/…' because it violates the document's Content Security Policy.

JSON.stringify(request) 内部的echoReports(req, res) 导致：

TypeError: Converting circular structure to JSON
     --> starting at object with constructor 'Socket'
     |     property 'parser' -> object with constructor 'HTTPParser'
     --- property 'socket' closes the circle
     at JSON.stringify (<anonymous>)
     at echoReports (file:///app/src/server/app.mjs:2949:33)

由于我使用的是 Express.js 4.17.1，因此我不使用 body-parser，而是使用 express.json(…)。

我尝试了几种方法在服务器端打印 CSP 报告的内容，但没有成功。

当然，任何反横幅、安全和隐私保护软件都已停用。

附：我已经详细阐述了这个问题，以便更清楚地说明我要解决的问题是什么。

Answer 1

1. 检查浏览器是否接收到Report-To HTTP 头，引导是here。

2. 使用chrome://net-export/ 和https://netlog-viewer.appspot.com 工具检查网络日志：

• 对于最新的 Chrome 版本，请在单独的选项卡上打开 chrome://net-export 页面并启用将网络日志记录到磁盘。
• 使用发布Report-To 标头的页面重新加载选项卡。
• 使用chrome://net-export 页面上的<Stop logging> 按钮停止将网络日志记录到磁盘。
• 在单独的选项卡上打开 https://netlog-viewer.appspot.com 日志查看器，然后选择您的日志文件。
• 在左侧菜单中选择“报告”，然后在“队列报告”部分中，单击“显示原始报告”链接。如果所有报告都已发送，您将看到 CSP 报告已创建并排队或为空。
  还可以查看“Per-origin config”表的底部： 在“上传”列中，将显示已发送报告的数量。

完整的分步指南是here

1. 发布Report-To 标头的页面本身必须使用 HTTPS: 加载，否则将不会发送报告。 Endpoint 的 Url 也应该是 HTTPS：

2. 请注意，如果您的站点在 Cloudflare 后面运行，Report-To 标头将不起作用。

更新

好像这段代码sn-p：

app.post("/policyViolationReport",

    async (req) => {
        console.log("Bingo! CSP Report occurred.");
    });

将不会收到违规报告，因为违规报告不是作为普通 POST 数据发送的（即&param=value）。浏览器只发送 JSON 正文。

尝试使用这个：

app.use(
    bodyParser.json({
        type: ['application/json', 'application/csp-report', 'application/reports+json'],
    })
);
    
app.post('/policyViolationReport', (req, res) => {
    console.log(req.body);
    res.status(204).end();
});