Vue项目安全实践指南：从输入验证到状态管理的全方位防护

一、项目背景

在Vue2项目开发过程中，我们遇到了一些需要优化的安全实践问题。本文将分享我们在项目中的一些安全优化经验，希望能帮助到其他开发者。

主要优化点：

输入输出安全处理
请求安全防护
数据存储安全
路由访问控制
文件上传处理
表单数据验证
依赖包管理
配置信息管理
敏感数据处理

二、安全优化方案

1. 输入输出安全处理

优化目标：
确保用户输入内容的安全性，防止恶意代码注入。

解决方案：

// Vue2/Vue3通用实现
<template><div v-html="sanitizedComment"></div>
</template><script>
// Vue2实现
export default {data() {return {comment: '',}},computed: {sanitizedComment() {return DOMPurify.sanitize(this.comment, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong'],ALLOWED_ATTR: []});}}
}
</script>// Vue3实现
<script setup>
import { ref, computed } from 'vue'
import DOMPurify from 'dompurify'const comment = ref('')
const sanitizedComment = computed(() => {return DOMPurify.sanitize(comment.value, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong'],ALLOWED_ATTR: []})
})
</script>

2. 请求安全防护

优化目标：
增强请求安全性，防止未授权访问。

解决方案：

// Vue2/Vue3通用实现
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000
});service.interceptors.request.use(config => {const token = localStorage.getItem('requestToken');if (token) {config.headers['X-Request-Token'] = token;}return config;},error => {return Promise.reject(error);}
);// Vue3差异：使用useStorage
import { useStorage } from '@vueuse/core'
const storage = useStorage('requestToken', '')
// 其他实现相同

3. 路由访问控制

优化目标：
实现细粒度的路由访问控制。

解决方案：

// Vue2实现
import Vue from 'vue'
import VueRouter from 'vue-router'
import { secureStorage } from '@/utils/secureStorage'Vue.use(VueRouter)const router = new VueRouter({routes: [{path: '/admin',component: () => import('@/views/Admin.vue'),meta: { requiresAuth: true, roles: ['admin'] }}]
})router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {const token = secureStorage.get('token')if (!token) {next({path: '/login',query: { redirect: to.fullPath }})} else {const userRoles = secureStorage.get('userRoles')if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {next({ path: '/403' })} else {next()}}} else {next()}
})// Vue3实现
import { createRouter, createWebHistory } from 'vue-router'
import { useStorage } from '@vueuse/core'const router = createRouter({history: createWebHistory(),routes: [{path: '/admin',component: () => import('@/views/Admin.vue'),meta: { requiresAuth: true, roles: ['admin'] }}]
})const storage = useStorage('token', '')
const rolesStorage = useStorage('userRoles', [])// 守卫逻辑相同，但使用storage.value和rolesStorage.value

4. 状态管理安全

优化目标：
确保状态管理中的数据安全。

解决方案：

// Vue2 + Vuex实现
import { secureStorage } from '@/utils/secureStorage'export default {state: {userInfo: secureStorage.get('userInfo') || null},mutations: {SET_USER_INFO(state, info) {state.userInfo = infosecureStorage.set('userInfo', info)}}
}// Vue3 + Pinia实现
import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'export const useUserStore = defineStore('user', {state: () => ({userInfo: useStorage('userInfo', null)}),actions: {setUserInfo(info) {this.userInfo = info}}
})

5. 组件安全

优化目标：
增强组件的安全性和可靠性。

解决方案：

// Vue2实现
export default {props: {value: {type: String,required: true,validator: value => value.length <= 100}},data() {return {safeInput: this.sanitizeInput(this.value)}},methods: {sanitizeInput(input) {return input.replace(/[<>'"]/g, '')},handleInput(e) {const safeValue = this.sanitizeInput(e.target.value)this.$emit('input', safeValue)}}
}// Vue3实现
<script setup>
const props = defineProps({modelValue: {type: String,required: true,validator: value => value.length <= 100}
})const emit = defineEmits(['update:modelValue'])const safeInput = ref(sanitizeInput(props.modelValue))function sanitizeInput(input) {return input.replace(/[<>'"]/g, '')
}function handleInput(e) {const safeValue = sanitizeInput(e.target.value)emit('update:modelValue', safeValue)
}watch(() => props.modelValue, (newVal) => {safeInput.value = sanitizeInput(newVal)
})
</script>

三、架构优化

1. Vue2/Vue3通用架构

Vue2/Vue3差异：

Vue2使用Vuex进行状态管理
Vue3使用Pinia进行状态管理
Vue3可以使用Composition API更好地封装安全逻辑
Vue3的TypeScript支持更好，可以增强类型安全

四、最佳实践总结

1. 通用建议

输入验证：使用v-model配合计算属性进行数据验证
输出处理：优先使用v-text，必要时使用DOMPurify
路由控制：使用路由守卫进行权限控制
状态管理：敏感数据使用加密存储
请求处理：使用axios拦截器统一处理
文件上传：限制文件类型和大小，检查文件内容
错误处理：统一处理错误，避免敏感信息泄露
依赖管理：定期更新依赖，使用npm audit检查漏洞

2. Vue2/Vue3差异建议

Vue2：
- 使用Vuex进行状态管理
- 使用Options API组织代码
- 注意this上下文的使用
Vue3：
- 使用Pinia进行状态管理
- 使用Composition API封装安全逻辑
- 使用TypeScript增强类型安全
- 使用<script setup>简化代码
- 使用defineProps和defineEmits做类型声明