Vue 项目中的 CSRF 攻击及防御

跨站请求伪造（CSRF）是一种常见的安全攻击方式，攻击者通过伪装成合法用户向受信任的网站发起请求，从而执行未授权的操作。本文将深入讲解 CSRF 攻击的原理、攻击场景，以及如何在 Vue 项目中通过 CSRF Token 验证、CORS（跨源资源共享）和 SameSite Cookie 等手段来防御 CSRF 攻击。

一、CSRF 攻击原理

CSRF 攻击利用了用户对已登录网站的信任。攻击者可以利用这一点，通过诱导用户访问一个恶意网站，自动向用户已登录的受信任网站发送请求。由于浏览器会自动携带 Cookie，因此受信任网站无法识别请求的真实性。

CSRF 攻击的基本流程：

1. 用户登录：用户在银行网站登录，浏览器保存了相应的身份 Cookie。
2. 访问恶意网站：用户在访问一个恶意网站时，恶意网站中嵌入了一段 JavaScript 代码。
3. 伪造请求：JavaScript 代码在用户不知情的情况下，向银行网站发送一个请求，银行网站将请求当作是用户的正常操作。
4. 操作执行：由于请求中包含了用户的身份 Cookie，银行网站执行了恶意操作（如转账）。

二、攻击场景

• 表单提交：攻击者通过恶意网站中的表单，诱使用户提交请求。
• 图片加载：通过在 HTML 中嵌入 <img> 标签，利用浏览器自动发起的 GET 请求。
• AJAX 请求：攻击者通过 JavaScript 发起 AJAX 请求，例如使用 fetch 或 XMLHttpRequest。

示例攻击场景

假设用户已登录到某银行网站，攻击者发送的恶意请求可能类似于以下形式：

<img src="https://bank.com/transfer?amount=1000&to=attacker_account" style="display:none;" />

当用户访问包含此代码的恶意页面时，浏览器将自动发送该请求。

三、CSRF 攻击的防御策略

为了防止 CSRF 攻击，开发者可以采取多种防御策略：

1. 使用 CSRF Token

   CSRF Token 是一种有效的防御手段。在用户会话开始时，服务器生成一个随机的 Token，并将其返回给客户端。客户端在后续请求中需将此 Token 作为请求参数或请求头的一部分发送到服务器，服务器通过验证 Token 是否有效来判断请求的合法性。

   实施步骤：

   • 后端生成 Token：用户登录后，后端生成 CSRF Token，并将其存储在服务器上（例如，存储在用户会话中）。

   // Node.js Express 示例
   app.post('/login', (req, res) => {
       const csrfToken = generateCsrfToken(); // 生成 CSRF Token
       req.session.csrfToken = csrfToken; // 存储在会话中
       res.json({ token: csrfToken });
   });
   

   • 前端发送 Token：前端使用 Axios 或 Fetch 在请求头中添加 CSRF Token。

   import axios from 'axios';
   
   // 获取 CSRF Token
   const getCsrfToken = async () => {
       const response = await axios.get('/api/csrf-token');
       return response.data.token;
   };
   
   // 设置请求拦截器
   axios.interceptors.request.use(async (config) => {
       const token = await getCsrfToken();
       config.headers['X-CSRF-Token'] = token; // 添加 CSRF Token
       return config;
   });
   

   • 后端验证 Token：后端在处理请求时，验证请求中的 CSRF Token。

   app.post('/api/sensitive-action', (req, res) => {
       if (req.body.csrfToken !== req.session.csrfToken) {
           return res.status(403).json({ message: 'CSRF Token invalid' });
       }
       // 继续处理请求
   });
   

2. CORS（跨源资源共享）

   CORS 是一种浏览器的安全特性，允许或限制跨源请求。通过正确配置 CORS，可以有效阻止恶意网站向服务器发起请求。

   实施步骤：

   • 后端设置 CORS 策略：

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   app.use(cors({
       origin: 'https://your-frontend-domain.com', // 允许的来源
       credentials: true, // 允许携带 Cookie
   }));
   

   • 限制请求来源：确保只允许受信任的域名发起请求。

3. SameSite Cookie

   使用 SameSite 属性可以限制 Cookie 的跨站请求。设置为 Strict 或 Lax 可以有效防止 CSRF 攻击。

   实施步骤：

   • 设置 Cookie 时添加 SameSite 属性：

   // 设置 Cookie 时添加 SameSite 属性
   res.cookie('sessionId', sessionId, {
       httpOnly: true,
       secure: true,
       sameSite: 'Strict', // 或 'Lax'
   });
   

   这确保了 Cookie 只在同源请求中发送，从而防止 CSRF 攻击。

四、前端 CSRF 防御示例

在 Vue 项目中实现 CSRF 防御的具体步骤如下：

1. 获取 CSRF Token：在用户登录后，从服务器获取 CSRF Token，并保存到 Vuex 或 localStorage 中。

2. 在请求中添加 CSRF Token：通过 Axios 拦截器，将 CSRF Token 添加到每个请求的头部。

   // src/services/api.js
   import axios from 'axios';
   
   const getCsrfToken = async () => {
       const response = await axios.get('/api/csrf-token');
       return response.data.token;
   };
   
   axios.interceptors.request.use(async (config) => {
       const token = await getCsrfToken();
       config.headers['X-CSRF-Token'] = token; // 添加 CSRF Token
       return config;
   });
   

3. 服务器端验证：服务器接收请求时，验证请求中的 CSRF Token 是否与用户会话中的 Token 匹配。

五、总结

CSRF 攻击是一种常见的安全威胁，但通过合理的防御策略，我们可以有效地保护应用程序。通过集成 CSRF Token、配置 CORS 策略和使用 SameSite Cookie 属性，可以显著提升应用的安全性。

在进行开发时，务必将 CSRF 防护作为重要的一环，确保用户数据和操作的安全。建议在实现 CSRF 防御的同时，定期审计代码和依赖库，及时更新以防止潜在的安全漏洞。

如果你在实现过程中有任何问题或建议，欢迎在评论区讨论！希望本篇文章能够为你在 Vue 项目的安全实践中提供帮助。

---

上一篇
网络安全：（三）Vue 项目中的敏感信息加密与防泄漏