Node.js中PUG结合Helmet配置CSP nonce后内联脚本被拦截求助

当前配置失效的本质，是CSP nonce的校验逻辑没有被满足，核心踩坑点集中在3个高频错误场景：

• nonce值双向不匹配：CSP响应头里声明的nonce值，和页面里script标签携带的nonce值存在逐字符的差异
• 中间件挂载顺序错误：给请求赋值nonce的逻辑，在Helmet CSP生成响应头的逻辑之后执行，导致Helmet拿到的nonce值是空的
• 渲染逻辑错误：PUG最终输出到浏览器的HTML中，script标签没有正确携带nonce属性

服务端（app.js）配置 #

不要硬编码固定nonce值，nonce的设计要求是每个HTTP请求都要生成随机、不可预测的字符串，硬编码固定值不仅失去安全防护意义，还会因为渲染同步问题导致匹配失败。

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

// 必须在Helmet CSP中间件之前挂载
app.use((req, res, next) => {
  // 每次请求生成16字节长度的随机nonce
  res.locals.cspNonce = crypto.randomBytes(16).toString('hex');
  next();
});

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: [
        "'self'",
        // 读取当前请求的nonce，拼接为CSP要求的格式
        (req, res) => `'nonce-${res.locals.cspNonce}'`
      ]
    }
  })
);

PUG模板配置 #

不要硬编码nonce值，直接从服务端传递的res.locals中读取当前请求对应的nonce值，保证和CSP头里的值是同一个变量来源，从根源上避免两边值不一致的问题：

script(nonce=res.locals.cspNonce).
  function populate() {
      var dbn = document.getElementById("dbname").value;
      var schem = document.getElementById("dbschema").value;
      var nom = document.getElementById("nomuser").value.replace(/\s+/g, '');
      document.getElementById("username").value = dbn + "_" + schem + "_" + nom;
  }
  function valid() {}

• 打开浏览器DevTools，切到网络面板，找到对应登录页的请求，逐字符对比两个位置的值：
  • 响应头里Content-Security-Policy字段中包含的nonce字符串
  • 元素面板里，报错的那个script标签上实际携带的nonce属性值
    从当前报错信息来看，CSP头已经正确生成了nonce-e33ccde670f149c1789b1e1e113b0916，说明服务端CSP配置是正常的，问题出在script标签没有正确携带同值的nonce属性。
• 检查中间件挂载顺序：确认nonce赋值的中间件，写在helmet.contentSecurityPolicy代码的前面，否则Helmet生成CSP头的时候，会因为拿不到res.locals.cspNonce的值，生成空的nonce串。
• 检查是否有其他Helmet相关的中间件已经提前设置了CSP响应头：比如全局调用的app.use(helmet())默认配置，会在自定义CSP配置之前就设置好CSP规则，导致后面写的自定义配置完全不生效。

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