修复Vue Router漏洞 | 编程教程

简介

在这个项目中，你将学习如何通过修改 cleanPath 函数来修复 vue-router 库中的一个漏洞。vue-router 库是Vue.js应用程序中一种流行的路由解决方案，确保其正确运行非常重要，特别是对于像以多个斜杠开头的路径这样的边界情况。

👀 预览

🎯 任务

在这个项目中，你将学习：

了解 vue-router 库中 cleanPath 函数存在的问题
为项目安装必要的依赖项
定位并修改 cleanPath 函数以修复问题
使用更新后的 cleanPath 函数重建项目
测试修复以确保问题得到解决

🏆 成果

完成这个项目后，你将能够：

识别和诊断第三方库中的问题
修改和更新第三方库中的代码以修复漏洞
使用更新后的代码重建并发布项目
测试修复以确保问题得到解决

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/str_manip("`String Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") subgraph Lab Skills javascript/functions -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} javascript/str_manip -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} javascript/error_handle -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} javascript/dom_select -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} javascript/dom_manip -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} javascript/event_handle -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} javascript/http_req -.-> lab-445763{{"`修复Vue Router的cleanPath函数`"}} end

设置项目结构

在这一步中，你将设置项目结构，并了解 vue-router 库中的问题以及如何修复它。

vue-router 库在 3.5.2 版本中有一个漏洞，即一个以多个斜杠（///）开头的路径实际上可能会重定向到另一个域名。这是因为该库中的 cleanPath 函数只替换两个斜杠，而不是所有多个斜杠。

要修复此问题，你需要修改 vue-router-3.5.2/src/util/path.js 文件中的 cleanPath 函数。

首先，看一下左侧文件的目录结构如下：

├── vue-router-3.5.2
├── vue.js
└── index.html

点击 WebIDE 右下角的 Go Live 按钮来运行项目。
在虚拟机顶部打开 “Web 8080” 并手动刷新，效果应如下所示：

复制上面图片中的地址，在你的浏览器中打开一个新窗口，然后点击 “Go to Foo” 按钮，页面将跳转到谷歌页面。

修复 `cleanPath` 函数

打开 vue-router-3.5.2/src/util/path.js 文件。

找到 cleanPath 函数：

export function cleanPath(path: string): string {
  return path.replace(/\/\//g, "/");
}

更新 cleanPath 函数，将所有多个连续斜杠替换为单个斜杠：
```
export function cleanPath(path: string): string {
  return path.replace(/\/+/g, '/');
}
```
/\/+/g 正则表达式将匹配一个或多个连续的斜杠，并将它们替换为单个斜杠。

重建并测试项目

在终端中，导航到 vue-router-3.5.2 目录。
运行命令 npm install 来安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按 Ctrl+C 终止进程，然后再次运行此命令。）
所有依赖项成功安装后，运行命令 npm run build 以使用更新后的 cleanPath 函数重建并发布项目。
返回网页并刷新页面。
点击 “Go to Foo” 按钮，你应该会看到页面不再重定向到谷歌页面，而是停留在本地应用程序上。