Node.js应用配置Helmet与CSP规则导致谷歌字体、Stripe脚本加载被拒

你配置的meta标签CSP未生效的核心原因是：Helmet.js默认会自动生成Content-Security-Policy响应头，HTTP响应头的CSP优先级远高于页面meta标签的CSP配置，且多个CSP规则同时存在时会以最严格的规则为准，你写的多段meta CSP规则本身就存在冲突，同时还被Helmet的默认规则覆盖，所以才出现资源加载拦截报错。

1. 首先删除页面内所有的CSP meta标签，统一通过Helmet配置CSP规则，避免多规则冲突。
2. 修改Helmet初始化代码，添加所需资源的域名白名单，参考配置如下：

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        // 谷歌字体相关白名单
        styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
        fontSrc: ["'self'", "https://fonts.gstatic.com"],
        // Stripe支付相关白名单
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://js.stripe.com"],
        connectSrc: ["'self'", "https://api.stripe.com"]
      }
    }
  })
);

3. 配置说明：

• styleSrc添加谷歌字体样式域名，解决样式文件加载被拦截的问题
• fontSrc添加谷歌字体静态资源域名，避免后续字体文件加载报错
• scriptSrc添加Stripe脚本域名，解决Stripe SDK加载被拦截的问题
• connectSrc添加Stripe接口域名，避免后续调用Stripe支付接口时被拦截

• 重启Node.js应用服务
• 浏览器打开页面，查看控制台是否还有CSP相关报错
• 可通过浏览器网络面板查看当前页面响应头的Content-Security-Policy字段，确认规则已更新为上述配置

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