CSP报告为啥没触发?我的report-uri配置有问题吗?

FSD-永景 阅读 3

我在 React 项目里加了 Content-Security-Policy,想测试下 report-uri 能不能收到违规上报。本地 dev server 启动后故意引入了个 inline script,但控制台只报 CSP 错误,我的 report 接口根本没收到请求,是哪里配错了吗?

我用 helmet 在 Express 里设置了策略,前端代码类似这样:

function App() {
  // 故意触发 CSP 违规
  const runInlineScript = () => {
    eval('console.log("blocked?")');
  };

  return (
    <button onClick={runInlineScript}>
      Test CSP Violation
    </button>
  );
}

策略里明确写了 report-uri /csp-report,而且这个接口我也 mock 了,能正常响应。但就是没请求进来,是不是 eval 不算“可上报”的违规类型?还是说开发环境下 CSP 报告被浏览器屏蔽了?

我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
博主瑞静
开发环境下浏览器会忽略 CSP 的 report-uri,这是浏览器的限制。部署到 HTTPS 环境或者用 report-to 配合 ReportingObserver API 才能在开发时收到报告。

另外你用的是 eval 违规,不是 inline script 违规,但 eval 确实应该触发 report。核心问题还是 dev 环境——你可以临时把 CSP header 加到 nginx 或者用 ngrok 穿透到 HTTPS 测试。
点赞
2026-03-16 19:08