配置Helmet-CSP仍遭CSP阻止内联脚本的问题求助

问题根源 #

错误提示显示default-src 'none'，说明你的CSP配置并未生效，大概率是Helmet的默认CSP规则覆盖了自定义配置，或中间件使用方式有误。

解决方案 #

1. 正确配置Helmet的CSP（避免单独使用helmet-csp） #

Helmet v4及以上版本默认集成了CSP功能，单独引入helmet-csp可能和Helmet的默认配置冲突，直接通过Helmet本身配置CSP：

const express = require('express');
const helmet = require('helmet');
const app = express();

// 通过helmet配置CSP，覆盖默认规则
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", 'maxcdn.bootstrapcdn.com'],
      // 针对内联脚本配置：
      // 测试环境可临时用'unsafe-inline'，生产环境不推荐，建议用nonce/hash
      scriptSrc: ["'self'", "'unsafe-inline'"] 
    }
  }
}));

2. 排查是否有其他中间件覆盖CSP头 #

检查代码中是否有其他中间件（如模板引擎插件、其他安全中间件）也设置了Content-Security-Policy头，确保你的CSP配置在所有可能设置该头的中间件之后执行，避免被覆盖。

3. 安全处理内联脚本（生产环境推荐） #

直接使用'unsafe-inline'存在安全风险，推荐用nonce或哈希方式授权内联脚本：

Nonce使用示例：

const express = require('express');
const helmet = require('helmet');
const crypto = require('crypto');
const app = express();

// 生成每个请求唯一的随机nonce
app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('hex');
  next();
});

// 配置CSP允许对应nonce的内联脚本
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", 'maxcdn.bootstrapcdn.com'],
      scriptSrc: ["'self'", `'nonce-${res.locals.nonce}'`]
    }
  }
}));

在HTML内联脚本标签中添加nonce属性：

<script nonce="<%= nonce %>">
  // 你的内联脚本代码
</script>

4. 验证CSP配置是否生效 #

打开浏览器开发者工具的Network标签，访问/api/people后查看响应头中的Content-Security-Policy，确认其值与配置一致。若仍显示default-src 'none'，检查Helmet版本是否正确，或是否有代码逻辑跳过了CSP中间件。

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