Vue CLI依赖约束下webpack-dev-middleware路径遍历漏洞（CVE-2024-29180）处理咨询

1. 在@vue/cli-service@4.5.19项目中安全更新webpack-dev-middleware #

由于@vue/cli-service@4.5.19依赖的webpack-dev-server@3.11.3指定了webpack-dev-middleware@^3.7.2，直接升级到≥5.3.4会触发依赖冲突，可通过依赖覆盖强制升级，步骤如下：

• 使用npm的overrides（npm 8.3及以上版本）或yarn的resolutions在package.json中强制指定安全版本：

  // npm 配置
  "overrides": {
    "webpack-dev-middleware": "^5.3.4"
  }
  
  // yarn 配置
  "resolutions": {
    "webpack-dev-middleware": "^5.3.4"
  }
  

• 执行npm install或yarn install更新依赖，之后务必测试开发服务器的核心功能（启动、热重载、资源加载等），跨大版本升级可能存在兼容性问题，若出现异常需回退并采用缓解方案。

2. 无需升级Vue CLI/webpack栈的漏洞缓解方案 #

如果强制升级引发兼容性问题，可通过以下措施降低攻击风险：

• 限制devServer访问范围：仅允许本地或可信内部网络访问，在vue.config.js中配置：

  module.exports = {
    devServer: {
      host: '127.0.0.1',
      allowedHosts: ['localhost', 'your-internal-ip'],
      disableHostCheck: false // 禁用主机头绕过检查
    }
  }
  

• 拦截恶意请求：添加自定义中间件过滤包含路径遍历字符的请求：

  module.exports = {
    devServer: {
      before(app) {
        app.use((req, res, next) => {
          // 检测URL中的../或..\路径遍历模式
          if (/(\.\.\/|\.\.\\)/.test(req.url)) {
            res.status(403).send('Forbidden');
            return;
          }
          next();
        });
      }
    }
  }
  

• 反向代理防护：若必须暴露devServer，使用Nginx等反向代理，配置规则拦截含路径遍历字符的请求，并限制仅可信IP访问。

3. 预防此类漏洞的最佳实践 #

• 仅在开发环境使用devServer/devMiddleware：绝对禁止在生产环境部署开发服务器，生产环境使用Nginx、Apache等成熟静态文件服务。
• 及时更新依赖：定期通过Dependabot、Snyk等工具扫描依赖漏洞，优先升级到官方修复的安全版本，避免使用停止维护的依赖分支（如Vue CLI 4已停止官方维护，建议后续迁移到Vue CLI 5或Vite）。
• 严格控制访问权限：开发环境中，devServer仅绑定本地或内部IP，通过allowedHosts限制允许访问的主机，禁止暴露到公网。
• 启用请求校验：自定义中间件或服务器配置，拦截包含路径遍历、恶意字符的请求。
• 锁定依赖版本：维护package-lock.json或yarn.lock的完整性，避免意外引入不安全的依赖版本。

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