Vite 开发服务器存在任意文件读取漏洞

漏洞描述

Vite 是一个现代前端构建工具,用于快速启动和开发 Vue、React 等应用。在受影响版本中,由于对 @fs 路径的访问控制不严,攻击者可通过构造特殊查询参数(如 ?raw?? 或 ?import&raw??)绕过安全限制,读取服务器上的任意文件(如 /etc/passwd、项目源码、配置文件等)

影响范围

  • 受影响版本

    • Vite ≤ 6.2.2(6.x 分支)

    • Vite ≤ 5.4.14(5.x 分支)

    • Vite ≤ 4.5.9(4.x 分支)

    • 受影响场景

      • 开发模式下显式配置 server.host: '0.0.0.0' 或启动时使用 --host 参数,将开发服务器暴露到公网。

 fofa搜索语法

(header="vite" || body="/@vite/client" || body="__vite_ping")
 && (port="3000" || port="5173" || port="8080" || port="4173")

 复现过程

我们尝试像CNVD-2022-44615一样访问/@fs/etc/passwd,发现已经被403禁止访问了

在后面继续拼接?raw??

在后面拼接?import&raw??,同样也可以绕过

漏洞修复

升级至以下安全版本:

对于Vite = 6.2.0:升级到 6.2.2 以上版本

对于Vite = 6.1.0:升级到 6.1.1 以上版本

对于Vite = 6.0.0:升级到 6.0.11 以上版本

对于Vite = 5.0.0:升级到 5.4.14 以上版本

对于Vite <= 4.5.9:升级到 4.5.9 以上版本

临时解决方案:

禁止在生产环境开放 Vite Dev Server,仅限本地或内网使用。

在防火墙或代理层配置 IP 白名单,限制仅可信地址访问 Dev Server。

在代理层拦截含 /@fs/?raw?import&raw 的请求,防止绕过访问本地文件系统。

<think>我们正在使用Vite,需要配置开发服务器(dev server)以限制文件系统的访问,只允许访问指定的目录:'src'、'public'、'node_modules' 在Vite中,我们可以通过配置`server.fs.allow`选项来实现。该选项用于指定哪些目录可以被服务。默认情况下,Vite会允许访问项目根目录以及根目录下的所有文件。但是,为了安全起见,我们可能需要限制只允许访问特定目录。 根据Vite官方文档([Vite Server Options](https://vitejs.dev/config/server-options.html#server-fs-allow)),`server.fs.allow`是一个数组,可以设置多个路径。我们可以设置允许访问的目录为:'src'、'public'、'node_modules'。 注意:在配置路径时,我们通常使用绝对路径。我们可以使用`path.resolve`来解析绝对路径。 配置示例(在vite.config.js中): </think> ### Vite 开发服务器配置文件访问限制方法 在 Vite 中配置开发服务器限制文件访问,可通过 `server.fs.allow` 选项实现目录白名单控制。以下是详细配置步骤: #### 基础配置方案 ```javascript // vite.config.js import { defineConfig } from 'vite' import path from 'path' export default defineConfig({ server: { fs: { // 设置允许访问的目录白名单 allow: [ path.resolve(__dirname, 'src'), // 源码目录 path.resolve(__dirname, 'public'), // 静态资源目录 path.resolve(__dirname, 'node_modules') // 依赖目录 ] } } }) ``` #### 安全增强配置 ```javascript // vite.config.js import { defineConfig } from 'vite' import path from 'path' export default defineConfig({ server: { fs: { allow: [ // 使用严格路径解析(推荐) path.resolve(__dirname, 'src'), path.resolve(__dirname, 'public'), path.resolve(__dirname, 'node_modules'), // 允许访问 .env 开发环境配置(按需添加)[^1] path.resolve(__dirname, '.env.development') ], // 禁止访问项目根目录外的文件安全加固) strict: true } }, // 防止敏感文件泄露(可选) publicDir: false, // 禁用默认 public 目录 build: { rollupOptions: { external: [/\.env.*$/] // 排除环境配置文件 } } }) ``` #### 配置说明 1. **路径解析**: - 使用 `path.resolve()` 确保绝对路径 - 默认允许访问当前工作目录(`process.cwd()`)[^2] 2. **敏感文件保护**: - 通过 `strict: true` 阻止访问项目根目录外的文件 - 使用 `publicDir: false` 禁用默认静态目录 - 在构建配置中排除 `.env` 文件 3. **特殊目录处理**: - `node_modules` 必须显式声明(Vite 默认不限制) - 允许 `.env.development` 确保开发环境变量可用[^1] #### 验证方法 创建测试文件 `test-restricted-access.js`: ```javascript import fs from 'fs'; const testPaths = [ '/src/main.js', // ✅ 应允许 '/public/logo.png', // ✅ 应允许 '/node_modules/vue/package.json',// ✅ 应允许 '/.env', // ❌ 应阻止(安全) '/etc/passwd', // ❌ 应阻止(系统文件) '../config.json' // ❌ 应阻止(上级目录) ]; testPaths.forEach(p => { try { fs.readFileSync(p); console.log(`✅ 访问成功: ${p}`); } catch (e) { console.log(`❌ 访问阻止: ${p} (${e.code})`); } }); ``` #### 常见问题解决 **vue-router 模块加载错误**: 当出现 `Uncaught SyntaxError` 时,检查是否因路径限制导致模块加载失败[^2]: ```javascript // 确保 node_modules 在允许列表中 allow: [path.resolve(__dirname, 'node_modules')] ``` **路径解析问题**: 使用 `path.resolve()` 替代相对路径: ```javascript // ❌ 错误写法(可能导致路径解析失败) allow: ['./src', './public'] // ✅ 正确写法 allow: [path.resolve(__dirname, 'src')] ``` 此配置通过 Vite 内置的文件服务限制机制实现安全控制,无需额外依赖,是开发环境下的最佳实践方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值