标签 认证绕过 下的文章


从源码解析 Vue 路由守卫绕过原理
配套练习靶场：https://github.com/duckpigdog/Vue-Sec

基础知识：什么是 Vue 路由守卫？
在 Vue.js 单页应用（SPA）中，页面跳转并不会刷新浏览器，而是由 vue-router 动态替换组件。为了控制用户访问权限（例如：未登录用户不能访问后台），开发者通常会使用 全局前置守卫


简单来说，路由守卫就像是小区门口的保安：
● to: 你要去哪里？（目标路由）

● from: 你从哪里来？（来源路由）

● next: 是否放行？（控制跳转）



一个典型的守卫代码如下：
​

JavaScript

复制代码
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});

绕过方式一：客户端状态直接篡改
● 场景: 应用依赖前端内存中的状态（如 Pinia/Vuex）来判断用户是否登录

● 目标: 不登录直接访问 Admin 页面



代码审计
我们拿到了靶场的源码，重点关注两个文件：src/router.js（路由配置）和 src/stores/auth.js（状态管理）


审计 src/router.js

​

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true }
}
]
})

router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
console.warn('⛔ Access Denied: User not authenticated.')
next('/login')
} else {
next()

审计 src/stores/auth.js



审计分析
isAuthenticated 只是一个普通的 Vue ref，存储在浏览器的内存中。整个认证逻辑完全运行在客户端


既然判断依据只是浏览器内存中的一个变量，作为客户端的控制者，我们可以随意修改这个变量的值

image.png

image.png


绕过方式二：本地存储伪造
为了实现“保持登录状态”，开发者通常会将 Token 存储在 `localStorage` 或 `sessionStorage` 中


很多开发者写出了类似这样的路由守卫代码：



image.png


打开浏览器控制台输入



image.png

​