5个方案！React/Vue全栈CSRF防御实战指南

5个方案！React/Vue全栈CSRF防御实战指南

【免费下载链接】layui项目地址: https://gitcode.com/gh_mirrors/lay/layui

在Web安全领域，CSRF（跨站请求伪造）攻击如同隐形的身份窃贼，通过冒用用户的身份执行未授权操作。本文将围绕React与Vue两大主流前端框架，构建从威胁识别到防御验证的完整防护体系，帮助开发者打造99%攻击都无法突破的安全防线。通过全栈视角的防御策略，让你轻松掌握前端安全防护的核心技术，守护用户数据安全。

一、威胁识别：揭开CSRF攻击的神秘面纱

1.1 CSRF攻击原理

CSRF攻击利用用户已认证的身份，在用户不知情的情况下，通过恶意网站向目标服务器发送伪造请求。其核心原理是利用浏览器自动携带的Cookie，使服务器误认为是用户的合法操作。

1.2 新型攻击场景

场景一：第三方登录劫持

攻击者诱导用户在已登录A网站的情况下访问恶意网站，恶意网站利用用户在A网站的登录状态，伪造请求执行绑定攻击者控制的第三方账号操作，导致账号被盗。

场景二：API接口盗用

电商平台的订单支付接口若缺乏CSRF防护，攻击者可构造恶意页面，当用户访问时自动发送支付请求，将用户账户余额转移到攻击者账户。

场景三：后台操作篡改

内容管理系统（CMS）若存在CSRF漏洞，攻击者可通过诱骗管理员访问恶意链接，执行删除文章、修改密码等高危操作。

二、防御架构：构建多层次安全防护网

2.1 防御体系架构图

2.2 防御矩阵

三、技术实现：主流框架防御方案

3.1 SameSite Cookie

📌核心原理：通过设置Cookie的SameSite属性，限制Cookie仅在同站请求中携带。

React实现

// src/utils/setCookie.js export function setSecureCookie(name, value, days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = `expires=${date.toUTCString()}`; document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/; SameSite=Strict; Secure`; }

Vue实现

// src/utils/cookie.js export const setCookie = (name, value, days = 7) => { const date = new Date(); date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); const expires = `expires=${date.toUTCString()}`; document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/; SameSite=Lax; Secure`; };

⚠️危险操作：不要将SameSite属性设置为None，除非有特殊需求并配合Secure属性使用，否则会增加CSRF风险。

3.2 Token验证

📌核心原理：服务器生成唯一Token并存储，前端请求时携带Token，服务器验证Token有效性。

React实现

// src/services/api.js import axios from 'axios'; const api = axios.create({ baseURL: '/api', headers: { 'Content-Type': 'application/json' } }); // 请求拦截器添加Token api.interceptors.request.use(config => { const token = localStorage.getItem('csrfToken'); if (token) { config.headers['X-CSRF-Token'] = token; } return config; }); export default api;

Vue实现

// src/plugins/axios.js import axios from 'axios'; import store from '../store'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }); service.interceptors.request.use( config => { if (store.getters.csrfToken) { config.headers['X-CSRF-Token'] = store.getters.csrfToken; } return config; }, error => { return Promise.reject(error); } ); export default service;

3.3 双重提交Cookie

📌核心原理：将Token同时存储在Cookie和请求头中，服务器验证两者是否一致。

React实现

// src/utils/csrf.js export const setupCSRF = () => { // 从Cookie获取Token const getCookie = name => { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); }; const csrfToken = getCookie('csrfToken'); // 配置Axios拦截器 axios.interceptors.request.use(config => { if (csrfToken) { config.headers['X-CSRF-Token'] = csrfToken; } return config; }); };

Vue实现

// src/main.js import Vue from 'vue'; import axios from 'axios'; // 获取Cookie中的CSRF Token function getCSRFToken() { const cookies = document.cookie.split(';'); for (let cookie of cookies) { const [name, value] = cookie.trim().split('='); if (name === 'csrfToken') return decodeURIComponent(value); } return null; } // 设置Axios默认请求头 const csrfToken = getCSRFToken(); if (csrfToken) { axios.defaults.headers.common['X-CSRF-Token'] = csrfToken; } Vue.prototype.$axios = axios;

3.4 Origin/Referer检查

📌核心原理：通过验证请求头中的Origin或Referer字段，判断请求来源是否合法。

React实现

// src/middleware/csrfCheck.js export const csrfCheck = (req, res, next) => { const allowedOrigins = ['https://yourdomain.com', 'https://app.yourdomain.com']; const origin = req.headers.origin; if (allowedOrigins.includes(origin) || !origin) { next(); } else { res.status(403).json({ error: 'CSRF检测到非法请求来源' }); } };

Vue实现

// src/server/middleware/csrf.js module.exports = (req, res, next) => { const referer = req.headers.referer; if (referer && referer.startsWith('https://yourdomain.com')) { next(); } else { res.status(403).send('CSRF验证失败'); } };

3.5 自定义请求头

📌核心原理：通过添加自定义请求头，利用浏览器的同源策略限制跨域请求。

React实现

// src/services/api.js import axios from 'axios'; const api = axios.create({ baseURL: '/api', headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-App-Id': 'your-app-id' } }); export default api;

Vue实现

// src/utils/request.js import axios from 'axios'; const request = axios.create({ baseURL: '/api', headers: { 'X-Custom-Header': 'your-custom-value', 'X-Requested-With': 'XMLHttpRequest' } }); export default request;

四、验证体系：全面检测防御效果

4.1 测试用例

4.2 自动化检测脚本

// csrf-test.js const axios = require('axios'); const { JSDOM } = require('jsdom'); async function testCSRFProtection(url) { // 获取初始页面，提取Cookie和可能的Token const response = await axios.get(url); const dom = new JSDOM(response.data); const cookies = response.headers['set-cookie']; // 尝试发起CSRF攻击 try { const attackResponse = await axios.post(`${url}/api/action`, { // 构造恶意请求数据 action: 'delete', id: '123' }, { headers: { 'Cookie': cookies.join('; '), // 不携带Token 'Referer': 'https://malicious.com' } }); if (attackResponse.status === 200) { console.log('⚠️ CSRF防护存在漏洞'); } else { console.log('✅ CSRF防护有效'); } } catch (error) { if (error.response && error.response.status === 403) { console.log('✅ CSRF防护有效'); } else { console.log('⚠️ 测试失败:', error.message); } } } // 测试目标URL testCSRFProtection('https://yourdomain.com');

五、防御强度评估表

六、安全配置检查清单

• 已设置SameSite Cookie属性为Strict或Lax
• 所有重要操作已实现Token验证机制
• 敏感API已添加Origin/Referer检查
• 已使用HTTPS协议并设置Secure Cookie
• 实现了Token定期刷新机制
• 对第三方登录接口进行了额外防护
• 定期进行CSRF漏洞扫描
• 前端请求库已统一配置CSRF防护
• 服务器端对所有非GET请求进行CSRF验证
• 已制定CSRF攻击应急响应预案

通过本文介绍的5个防御方案，你已经掌握了构建全栈CSRF防护体系的核心技术。记住，安全防护是一个持续过程，需要定期更新防御策略并进行安全审计。结合React和Vue框架的特性，选择适合项目的防御方案，为用户打造安全可靠的Web应用。

【免费下载链接】layui项目地址: https://gitcode.com/gh_mirrors/lay/layui