如何将__webpack_nonce__与内容安全策略（CSP）集成并同步运行时nonce？

嘿，这个问题我之前在做企业级前端项目的时候踩过坑，刚好有几个靠谱的解决方案，结合你的场景给你梳理下：

方案一：服务器端生成Nonce（推荐的标准做法） #

其实你提到的“nonce必须随每个请求变更”，最稳妥的实现方式是在服务器端生成nonce，而非客户端。这样能完美同步Webpack的__webpack_nonce__和CSP策略（不管是响应头还是meta标签），具体步骤如下：

1. 服务器端生成并注入Nonce #

以Express为例，每次请求生成加密安全的nonce，同时设置CSP响应头，并将nonce注入到HTML模板中：

// Express服务器代码
const crypto = require('crypto');

app.get('/', (req, res) => {
  // 生成符合CSP要求的nonce：16字节加密随机数转base64
  const nonce = crypto.randomBytes(16).toString('base64');
  
  // 设置CSP响应头（优先级高于meta标签）
  res.setHeader(
    'Content-Security-Policy',
    `default-src 'self'; script-src 'nonce-${nonce}' 'self'; style-src 'nonce-${nonce}' 'self';`
  );
  
  // 渲染HTML模板，把nonce传递给前端
  res.render('index', { nonce });
});

2. 前端模板中配置全局__webpack_nonce__ #

在你的index.html模板里，在Webpack bundle加载之前设置全局__webpack_nonce__，同时给所有内联脚本/样式加上nonce：

<!-- 先设置全局nonce，确保Webpack runtime加载前生效 -->
<script nonce="<%= nonce %>">
  window.__webpack_nonce__ = "<%= nonce %>";
</script>

<!-- 可选：同时设置meta标签的CSP（如果不需要响应头的话） -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-<%= nonce %>' 'self'; style-src 'nonce-<%= nonce %>' 'self';">

<!-- 加载Webpack打包的bundle，带上nonce -->
<script nonce="<%= nonce %>" src="/bundle.js"></script>

为什么推荐这个方案？ #

• 完全满足“每个请求nonce唯一”的要求，服务器端每次请求生成新值
• CSP响应头优先级高于meta标签，安全性更强
• 避免客户端生成nonce时的初始加载拦截问题（比如Webpack runtime还没等到nonce就执行）

方案二：客户端动态生成并更新CSP（仅适用于特定场景） #

如果你确实需要在客户端生成nonce（比如无服务器架构，无法在服务器端注入），可以通过动态修改CSP meta标签来同步，但要注意局限性：

实现步骤 #

在应用入口的最顶部（甚至放在index.html的第一个内联脚本里）执行以下代码：

// 生成加密安全的nonce
const nonce = crypto.randomBytes(16).toString('base64');
// 设置Webpack的全局nonce
window.__webpack_nonce__ = nonce;

// 动态更新或创建CSP meta标签
const cspMeta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
if (cspMeta) {
  // 更新现有meta标签的内容
  cspMeta.content = `default-src 'self'; script-src 'nonce-${nonce}' 'self'; style-src 'nonce-${nonce}' 'self';`;
} else {
  // 没有的话创建新的meta标签，插入到head最前面
  const newMeta = document.createElement('meta');
  newMeta.httpEquiv = 'Content-Security-Policy';
  newMeta.content = `default-src 'self'; script-src 'nonce-${nonce}' 'self'; style-src 'nonce-${nonce}' 'self';`;
  document.head.insertBefore(newMeta, document.head.firstChild);
}

注意事项 #

• 初始页面的CSP不能设置得太严格，否则浏览器可能在你修改meta标签之前就拦截了内联脚本（包括生成nonce的这段代码）
• 这种方式无法同步服务器端的CSP响应头，只能用meta标签的CSP
• 必须确保这段代码是页面中第一个执行的脚本，否则Webpack的runtime可能先加载导致拦截

关键注意点 #

• Nonce必须是加密安全的随机字符串，不能用Math.random()或者时间戳，必须用crypto.randomBytes()或crypto.randomUUID()
• 绝对不能重复使用nonce，每个请求/页面加载都要生成新值
• Webpack的__webpack_nonce__必须在Webpack runtime加载之前设置，否则打包后的脚本不会带上nonce

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