Chrome 不报告 CSP 违规行为

Question

由于某种原因，Chrome（或者至少是我的 Chrome）没有报告 CSP 违规行为。它正确地拒绝显示禁止的内容，但没有报告违规行为。相比之下，Firefox 报告违规情况就很好。

考虑这一页。您的浏览器不应在该页面中显示图像，因为该图像来自禁止的 URL。Chrome 很好地完成了这部分工作。但是，Chrome 不遵守report-to 或report-uri 指令（我两者都有）。Firefox 再次遵守这些指令。

我知道浏览器可能会选择不报告多余的违规行为，但这里的情况并非如此。我 尝试过 使用 不同的 网址，但没有一个产生报告。

我使用的是 Chrome 版本 75.0.3770.90（官方版本）（64 位）

任何帮助表示赞赏。

Answer 1

您可以监听“securitypolicyviolation”事件并手动报告

if(window.chrome /* and if not setting report-to using HTTP response headers */) {
  document.addEventListener('securitypolicyviolation', (e)=> {
    let reportToUrl='https://example.com/csp-reports'; // change it
    fetch(reportToUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/csp-report'
      },
      body: JSON.stringify({
        'csp-report':{
          'blocked-uri': e.blockedURI,
          'document-uri': e.documentURI,
          'original-policy': e.originalPolicy,
          'referrer': e.referrer,
          'script-sample': e.sample,
          'source-file': e.sourceFile,
          'violated-directive': e.violatedDirective
        }
      }),
      credentials: "omit",
      cache: "no-cache",
      referrerPolicy: "no-referrer"
    });
  });
}

2023年更新

下面的 HTTP 响应标头应该可以工作。

第一的：

Report-To: {  "group": "csp-endpoint",
              "max_age": 5,
              "endpoints": [
                { "url": "https://example.com/csp-reports" }
              ] }

然后

Content-Security-Policy: report-to csp-endpoint;

或者

Content-Security-Policy-Report-Only: report-to csp-endpoint;