Vue 项目安全设置方案：XSS/CSRF 防护指南

爱敲代码的小旗2025-08-12 8:41

在 Vue 项目中实施全面的 XSS 和 CSRF 防护需要前后端协同配合。以下是完整的实现方案：

Vue 前端安全配置方案

1. XSS 防御策略

安全数据渲染方案
vue 复制代码 
<template>
  <div>
    <!-- 安全文本渲染（自动转义） -->
    <p>{{ userInput }}</p>
    
    <!-- HTML 内容渲染（使用 DOMPurify 净化） -->
    <div v-if="trustedContent" v-html="sanitizedHtml"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      userInput: '<script>alert("XSS")<\/script>',
      trustedContent: '<b>安全内容</b>'
    };
  },
  computed: {
    sanitizedHtml() {
      // 使用 DOMPurify 净化 HTML
      return DOMPurify.sanitize(this.trustedContent, {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'], // 仅允许安全标签
        ALLOWED_ATTR: ['href', 'title'] // 仅允许安全属性
      });
    }
  }
};
</script>
URL 参数安全处理
javascript 复制代码 
// 在请求 URL 参数时进行编码
const unsafeValue = "<script>malicious</script>";
const safeParam = encodeURIComponent(unsafeValue);

this.$http.get(`/api/data?param=${safeParam}`);
内容安全策略 (CSP) 设置
javascript 复制代码 
// 在 public/index.html 的 head 中添加 CSP meta 标签
<meta 
  http-equiv="Content-Security-Policy" 
  content="default-src 'self'; 
    script-src 'self' 'nonce-random123' https://trusted.cdn.com;
    style-src 'self' 'unsafe-inline';
    img-src 'self' data:; 
    connect-src 'self';
    font-src 'self';
    object-src 'none';
    frame-src 'none';
">

2. CSRF 防护策略

Axios 全局配置
javascript 复制代码 
// src/utils/http.js
import axios from 'axios';
import store from '@/store';

const http = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000,
});

// 请求拦截器：自动添加 CSRF Token
http.interceptors.request.use(config => {
  if (['post', 'put', 'patch', 'delete'].includes(config.method.toLowerCase())) {
    config.headers['X-CSRF-Token'] = store.state.csrfToken;
  }
  return config;
});

// 响应拦截器：处理 403 错误（CSRF 失效）
http.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 403) {
      store.dispatch('refreshCSRF'); // 刷新 CSRF Token
      // 可选：自动重新发送原始请求
      return http.request(error.config);
    }
    return Promise.reject(error);
  }
);

export default http;
CSRF Token 存储与刷新
javascript 复制代码 
// Vuex store 模块
const securityModule = {
  namespaced: true,
  state: {
    csrfToken: null
  },
  mutations: {
    SET_CSRF_TOKEN(state, token) {
      // 基本验证
      if (typeof token === 'string' && token.length >= 32) {
        state.csrfToken = token;
      }
    }
  },
  actions: {
    async fetchCSRFToken({ commit }) {
      try {
        const response = await http.get('/api/csrf-token');
        commit('SET_CSRF_TOKEN', response.data.token);
        
        // 设置 token 到 meta 标签（可选，SSR 场景下）
        let meta = document.querySelector('meta[name="csrf-token"]');
        if (!meta) {
          meta = document.createElement('meta');
          meta.name = 'csrf-token';
          document.head.appendChild(meta);
        }
        meta.content = response.data.token;
      } catch (error) {
        console.error('获取 CSRF Token 失败', error);
      }
    }
  }
};

3. 路由安全防护

javascript 复制代码 
// src/router/index.js
const router = new VueRouter({
  routes: [
    // ...
    {
      path: '/admin',
      component: AdminPanel,
      meta: { 
        requiresAuth: true,
        capabilities: ['admin']
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 检查认证需求
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
      return;
    }
    
    // 检查权限
    const requiredCapabilities = to.meta.capabilities || [];
    if (requiredCapabilities.length > 0 && 
        !store.getters.hasCapabilities(requiredCapabilities)) {
      next('/forbidden'); // 无权限页面
      return;
    }
  }
  
  // 每次路由切换滚动到顶部
  window.scrollTo(0, 0);
  
  next();
});

4. Vuex 安全实践

javascript 复制代码 
// 增强安全性的 Vuex store
export default new Vuex.Store({
  state: {
    userData: null
  },
  mutations: {
    // 数据存储前的净化处理
    SET_USER_DATA(state, rawData) {
      // 执行深层次的净化
      state.userData = deepSanitize(rawData);
    }
  },
  actions: {
    // 安全获取用户数据
    async fetchUserData({ commit }, userId) {
      try {
        const response = await http.get(`/api/users/${userId}`);
        commit('SET_USER_DATA', response.data);
      } catch (error) {
        handleSecurityError(error);
      }
    }
  }
});

// 深层数据净化函数
function deepSanitize(data) {
  if (typeof data === 'string') {
    // 移除 HTML 标签
    return data.replace(/<[^>]*>/g, '');
  } 
  if (Array.isArray(data)) {
    return data.map(item => deepSanitize(item));
  }
  if (typeof data === 'object' && data !== null) {
    return Object.keys(data).reduce((acc, key) => {
      acc[key] = deepSanitize(data[key]);
      return acc;
    }, {});
  }
  return data;
}

// 安全错误处理
function handleSecurityError(error) {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        // 处理未认证错误
        router.push('/login');
        break;
      case 403:
        // 处理未授权错误
        store.dispatch('handleForbidden');
        break;
      case 419:
        // CSRF Token 失效
        store.dispatch('refreshCSRF');
        break;
      default:
        console.error('API Error:', error);
    }
  }
}

服务端配合实现（Node.js 示例）

1. CSRF Token 生成与验证

javascript 复制代码 
// 使用 Express + csurf 中间件
const express = require('express');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
const helmet = require('helmet');

const app = express();
app.use(cookieParser());
app.use(express.json());

// 设置 CSRF 保护
const csrfProtection = csrf({
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 86400 // 1 天
  }
});

// 提供 CSRF Token 端点
app.get('/api/csrf-token', csrfProtection, (req, res) => {
  res.json({ token: req.csrfToken() });
});

// 受保护的 API 端点
app.post('/api/update-profile', csrfProtection, (req, res) => {
  try {
    // 1. 验证输入（使用验证库）
    // 2. 处理业务逻辑
    // 3. 返回响应
    res.json({ success: true });
  } catch (error) {
    handleSecurityError(res, error);
  }
});

// 错误处理中间件
function handleSecurityError(res, error) {
  if (error.name === 'ValidationError') {
    res.status(400).json({ error: '无效请求' });
  } else {
    res.status(500).json({ error: '服务器错误' });
  }
}

2. HTTP 安全头设置

javascript 复制代码 
// 使用 Helmet 设置安全头
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'nonce-random123'", "trusted-cdn.example.com"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:"],
      connectSrc: ["'self'"],
      fontSrc: ["'self'"],
      objectSrc: ["'none'"],
      frameSrc: ["'none'"]
    }
  },
  xssFilter: true,
  noSniff: true,
  frameguard: { action: 'deny' },
  hsts: {
    maxAge: 31536000, // 1 年
    includeSubDomains: true
  },
  referrerPolicy: { policy: 'same-origin' }
}));

3. 输入验证与净化

javascript 复制代码 
// 使用验证库，例如 Joi
const Joi = require('joi');

const userSchema = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required(),
    
  email: Joi.string()
    .email({
      minDomainSegments: 2,
      tlds: { allow: ['com', 'net', 'org'] }
    })
    .required(),
    
  bio: Joi.string()
    .max(500)
    .optional()
    .escapeHTML() // 清除 HTML
});

app.post('/api/users', csrfProtection, (req, res) => {
  const { error, value } = userSchema.validate(req.body);
  
  if (error) {
    return res.status(400).json({ error: error.details[0].message });
  }
  
  // value 现在是安全、净化后的数据
  createUser(value);
});

项目部署安全配置

Nginx 示例配置

nginx 复制代码 
server {
    listen 443 ssl;
    server_name yourdomain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/privkey.pem;
    
    # Security headers
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-random123' trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none';";
    add_header X-Content-Type-Options "nosniff";
    add_header X-Frame-Options "DENY";
    add_header X-XSS-Protection "1; mode=block";
    add_header Referrer-Policy "same-origin";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    
    # Vue app
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # API proxy
    location /api/ {
        proxy_pass http://backend-service:3000/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
    }
}

最佳实践检查清单

XSS 防护

  • 所有动态 HTML 渲染使用 DOMPurify.sanitize()
  • 严格限制 v-html 指令的使用
  • 内容安全策略 (CSP) 正确配置并启用
  • URL 参数值使用 encodeURIComponent 处理
  • 禁用内联事件处理（如：onclick="..."）
  • 设置 Cookie 的 HttpOnly 和 Secure 标志

CSRF 防护

  • 所有状态变更请求（POST/PUT/PATCH/DELETE）均包含 CSRF Token
  • Token 生成、传输和存储安全
  • Token 随每个请求变化（一次性使用最佳）
  • Cookie 设置 SameSite=Strict 或 Lax
  • API 端点验证 Origin/Referer

框架级防护

  • Vue 生产环境模式启用
  • 定期使用 npm audit 检查依赖漏洞
  • Vue Router 路由守卫实现权限控制
  • 禁用 Vue 配置中的 Devtools 在生产环境（Vue.config.devtools = false）

服务器协同

  • 所有响应设置安全头（X-Content-Type-Options, X-Frame-Options 等）
  • API 端点实施严格的输入验证
  • 敏感操作（如密码更改）增加二次认证
  • 使用 HTTPS 加密所有通信
  • API 启用 CORS 并严格配置白名单
  • 设置速率限制防止暴力破解

项目流程图

首页 子页面 未授权 已授权 GET 请求 状态变更请求 Token 无效 Token 有效 持续失败 用户访问 Vue 应用加载 获取 CSRF Token 检查路由权限 存储于 Vuex 跳转登录页 渲染页面 用户操作 直接发送 添加 CSRF Token 服务器验证 自动刷新 Token
并重试请求 执行操作 终止请求
提示用户

实际项目中应根据具体业务需求和安全等级要求进行调整。

相关推荐
华科易迅17 分钟前
Vue如何集成封装Axios
前端·javascript·vue.js
Figo_Cheung35 分钟前
Figo义商本体约束推理引擎 (CRE)：基于已部署CRE本地模型的技术实践研究——迈向AGI时代的AI伦理安全框架
人工智能·安全
h_jQuery1 小时前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
信创DevOps先锋2 小时前
DevOps工具链选型新趋势：本土化适配与安全可控成企业核心诉求
运维·安全·devops
ayt0072 小时前
Netty AbstractNioChannel源码深度剖析：NIO Channel的抽象实现
java·数据库·网络协议·安全·nio
阿赛工作室2 小时前
Vue中onBeforeUnmount不触发的解决方案
前端·javascript·vue.js
_院长大人_3 小时前
Vue + ECharts 实现价格趋势分析图
前端·vue.js·echarts
疯笔码良3 小时前
【Vue】自适应布局
javascript·vue.js·css3
盟接之桥4 小时前
盟接之桥®制造业EDI软件,打通全球供应链“最后一公里”，赋能中国制造连接世界
网络·安全·低代码·重构·汽车·制造
ZKNOW甄知科技4 小时前
数智同行：甄知科技2026年Q1季度回顾
运维·服务器·人工智能·科技·程序人生·安全·自动化
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05MySQL表约束详解：8大核心约束实战指南06Oh My Codex 快速使用指南07CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南08VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）09实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了10UV安装并设置国内源