MERN应用部署Heroku后CSP拒绝连接matic RPC报错如何解决？

你遇到的报错核心原因是HTTP响应头中的CSP规则优先级高于页面meta标签定义的CSP规则，浏览器最终会优先采用响应头返回的CSP校验请求，所以你在meta里写的规则没有生效。

常见触发原因 #

• MERN栈常用的Express安全中间件helmet在v4及以上版本默认会开启CSP响应头，默认规则就是报错提到的default-src 'self'，会覆盖meta标签的配置
• Heroku部分静态托管插件/内置配置也会自动注入CSP响应头，覆盖页面自定义的meta规则

验证方法 #

打开浏览器控制台「网络」面板，刷新页面后点开根HTML的请求，查看响应头字段，你会看到存在Content-Security-Policy响应头，规则就是报错里的default-src 'self'

修复方案 #

1. 如果你使用了helmet中间件，手动配置helmet的CSP规则即可，示例代码如下：

const helmet = require('helmet');

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'none'"],
      scriptSrc: ["'self'", "'unsafe-inline'"],
      connectSrc: ["'self'", "https://rpc-mainnet.matic.network/"],
      imgSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      baseUri: ["'self'"],
      formAction: ["'self'"],
      fontSrc: ["'self'", "https://fonts.gstatic.com"]
    }
  })
);

2. 如果你没有使用helmet，检查Heroku的静态托管配置，删除自动注入CSP的规则，或者把https://rpc-mainnet.matic.network/添加到Heroku CSP配置的connect-src字段中
3. 修复完成后可以删除页面内的meta CSP标签，避免两套规则出现冲突

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