已将localhost加入script-src，为何Helmet仍拒绝执行脚本？

核心原因 #

你碰到的问题是CSP的优先级规则在起作用：当script-src里同时存在哈希/nonce值和'unsafe-inline'时，浏览器会直接忽略'unsafe-inline'——哪怕你加了http://localhost:3000/也没用，因为这个域名规则只允许从该地址加载外部脚本文件，而你报错的是页面里的内联脚本（比如<script>...</script>代码块、onclick这类内联事件）。

可行解决方案 #

1. 移除哈希/nonce（如果不需要严格校验） #

如果你的内联脚本没有安全风险，直接删掉CSP配置里的哈希或nonce规则，'unsafe-inline'就会生效。示例Helmet配置：

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "http://localhost:3000/"],
    },
  })
);

2. 为内联脚本添加匹配的哈希值 #

如果必须保留哈希校验，要确保你配置的哈希和内联脚本的实际哈希完全一致：

• 计算哈希：用Node.js终端命令就能算，比如：

  const crypto = require('crypto');
  const inlineScript = "你的内联脚本代码";
  const hash = crypto.createHash('sha256').update(inlineScript).digest('base64');
  console.log(`'sha256-${hash}'`);
  

• 把计算出的哈希值加到scriptSrc里，示例：

  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        scriptSrc: ["'self'", "'sha256-abcdef123456...'", "'unsafe-eval'", "http://localhost:3000/"],
      },
    })
  );
  

3. 用Nonce替代哈希（适合动态脚本） #

如果内联脚本内容会变化，用nonce更灵活：

• 每次请求生成随机nonce：

  app.use((req, res, next) => {
    res.locals.nonce = crypto.randomBytes(16).toString('hex');
    next();
  });
  

• 在Helmet配置中引入nonce：

  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        scriptSrc: [(req) => `'nonce-${res.locals.nonce}'`, "'self'", "'unsafe-eval'", "http://localhost:3000/"],
      },
    })
  );
  

• 页面内的脚本标签加上nonce属性：

  <script nonce="<%= res.locals.nonce %>">
    // 你的内联脚本内容
  </script>
  

关键提醒 #

• http://localhost:3000/管的是外部脚本加载，和内联脚本完全是两回事，别搞混。
• 只要CSP里有哈希或nonce，'unsafe-inline'就会被忽略，这是CSP的强制规则，和你加不加域名无关。

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