在Webpack/NextJS中如何禁用eval-source-maps以解决CSP问题

核心问题 #

Next.js开发环境默认强制使用eval-source-maps，会触发CSP的unsafe-eval限制，且直接设置devtool: false或devtool: 'source-map'会被框架自动覆盖，导致无法在开发环境使用严格CSP。

可行解决方案 #

在next.config.js中通过自定义Webpack配置，强制替换源映射类型并移除框架自带的eval相关插件：

module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (dev && !isServer) {
      // 替换为非eval类型的源映射
      config.devtool = 'source-map';
      // 移除Next.js自动注入的EvalSourceMapDevToolPlugin
      config.plugins = config.plugins.filter(
        plugin => plugin.constructor.name !== 'EvalSourceMapDevToolPlugin'
      );
    }
    return config;
  },
  // 针对Next.js 12+版本，禁用部分可能干扰源映射配置的实验特性
  experimental: {
    legacyBrowsers: false,
  },
};

额外配置：统一开发/生产环境CSP #

在next.config.js中添加全局headers配置，确保开发和生产环境使用一致的严格CSP规则（无需区分环境）：

module.exports = {
  // ... 上述webpack配置
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: `default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;`,
          },
        ],
      },
    ];
  },
};

验证方法 #

启动开发服务器后，打开浏览器控制台：

• 检查是否有CSP相关报错
• 在Sources面板查看bundle文件，确认没有eval(代码块

注意事项 #

• 部分旧版Next.js可能需要调整插件过滤逻辑，可通过console.log(config.plugins)查看具体插件名称
• 使用source-map会略微降低开发构建速度，但对于高安全要求的场景是可接受的 trade-off

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