Webpack Dev Server 5.0 版本中的 CSP 安全策略问题解析

问题背景

在 Webpack Dev Server 5.0.0 版本发布后，开发者在使用严格内容安全策略(CSP)时遇到了一个关键问题。当开发者在配置中设置了 Content-Security-Policy 头部且未包含 'unsafe-eval' 指令时，应用程序会抛出 EvalError 错误，导致 JavaScript 无法正常加载执行。

问题表现

开发者在使用 Webpack Dev Server 5.0.0 版本时，如果配置了如下 CSP 策略：

Content-Security-Policy: "script-src 'self'"

会收到如下错误：

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script

错误追踪显示问题出在 tapable 库的 HookCodeFactory.js 文件中，该文件尝试通过 new Function() 方式动态创建函数，这在严格的 CSP 策略下是被禁止的。

技术分析

这个问题本质上源于 Webpack Dev Server 5.0.0 版本内部使用了动态代码执行的功能。在严格 CSP 策略下，浏览器会阻止以下行为：

1. 使用 eval() 函数
2. 使用 new Function() 构造函数
3. 使用 setTimeout/setInterval 传入字符串代码
4. 使用 script 元素的 textContent 属性动态执行代码

Webpack Dev Server 在 5.0.0 版本中引入的这种动态代码执行机制，与许多开发者项目中设置的严格 CSP 策略产生了冲突。

解决方案

Webpack 团队在 5.0.1 版本中修复了这个问题。修复方式主要是调整了内部实现，避免在不必要的情况下使用动态代码执行。

对于开发者而言，可以采取以下措施：

1. 升级到 Webpack Dev Server 5.0.1 或更高版本
2. 如果暂时无法升级，可以在开发环境中临时添加 'unsafe-eval' 到 CSP 策略中
3. 检查项目中其他可能依赖动态代码执行的库或代码

最佳实践建议

1. 在开发环境中，建议保持与生产环境一致的 CSP 策略，以便尽早发现潜在问题
2. 定期更新 Webpack 及相关插件到最新稳定版本
3. 在 CI/CD 流程中加入 CSP 合规性检查
4. 对于必须使用动态代码执行的场景，考虑使用更安全的替代方案

这个问题提醒我们，在构建工具链升级时，需要特别关注安全策略相关的变更，确保开发环境与生产环境的一致性，避免因工具链升级引入潜在的安全风险或兼容性问题。