网络安全：（四）Vue 项目中的 CSRF 攻击及防御

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', (