为何在Chrome与Edge调试时`nonce`变量未定义？

问题详情 #

调试Chrome(127.0.6533.101)和Edge(127.0.2651.98)浏览器时，发现nonce变量显示为undefined，相关环境及依赖如下：

• 环境配置：未启用CSP header
• 使用依赖：
  • "style-loader": "^2.0.0"
  • "url-loader": "^4.1.1"
  • "webpack": "^4.41.2"

解答 #

原因分析 #

1. style-loader未配置nonce参数：style-loader v2.x 不会自动生成或注入nonce变量，只有在webpack配置中明确指定nonce选项，且全局存在对应值时，该变量才会被赋值。你当前未启用CSP，浏览器和构建工具都不会主动生成这个变量。
2. 版本组合特性：webpack 4.x 搭配style-loader 2.x时，若未配置nonce，loader内部不会初始化该变量，调试时自然显示undefined，这属于正常的未初始化状态。

解决方案 #

方案1：手动配置nonce（若需要使用）

在webpack配置中给style-loader添加nonce配置，同时确保全局环境存在对应值：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              // 可以直接写固定值，或者引用全局变量
              nonce: typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : 'your-default-nonce'
            }
          },
          'css-loader'
        ]
      }
    ]
  }
};

如果需要动态生成nonce，在入口文件顶部定义全局变量：

// main.js（入口文件）
// 生成随机nonce示例，实际可根据需求调整
__webpack_nonce__ = btoa(Math.random().toString(36).substring(2));

方案2：直接忽略（无需nonce时）

由于你未启用CSP，nonce并非功能必需项，调试时的undefined只是变量未初始化的正常表现，不会影响项目运行，可直接忽略该提示。

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