WEB应用安全与防护 - 实操案例 2：CSRF（跨站请求伪造）—— 伪造用户操作

本期新开课程《WEB应用安全与防护》，为了帮同学们理解并实践 JavaScript 应用中的核心安全问题，我整理了3 个高频且易上手的实操案例，涵盖前端最常见的安全漏洞，每个案例包含「问题场景」「漏洞分析」「修复方案」和「验证方法」，新手也能快速掌握。

案例 2：CSRF（跨站请求伪造）------ 伪造用户操作

场景描述

假设你开发了一个「修改密码」的功能，仅通过 Cookie 验证用户身份，前端发送请求的代码如下：

javascript

运行

复制代码

// 有CSRF漏洞的代码
const changePwdBtn = document.getElementById('change-pwd-btn');

changePwdBtn.addEventListener('click', () => {
  const newPwd = document.getElementById('new-pwd').value;
  // 直接发送POST请求，仅依赖Cookie验证
  fetch('/api/change-password', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ newPassword: newPwd })
  });
});

攻击者可构造恶意页面，诱导用户点击后，以用户身份发送「修改密码」请求（因为浏览器会自动携带 Cookie）。

漏洞分析

CSRF 的核心是请求未验证「请求发起者是否为合法用户」，仅依赖 Cookie 验证身份，攻击者可伪造请求。

修复方案（核心：添加 CSRF Token 验证）

步骤 1：前端获取 CSRF Token（通常从后端返回的页面 / 接口获取）

javascript

运行

复制代码

// 安全的代码：添加CSRF Token验证
const changePwdBtn = document.getElementById('change-pwd-btn');
// 从页面meta标签获取后端生成的CSRF Token（后端渲染页面时写入）
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

changePwdBtn.addEventListener('click', () => {
  const newPwd = document.getElementById('new-pwd').value;
  fetch('/api/change-password', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': csrfToken // 携带CSRF Token
    },
    body: JSON.stringify({ newPassword: newPwd })
  });
});

步骤 2：后端验证（关键）

后端需要：

为每个用户会话生成唯一的 CSRF Token；
接收请求时，验证请求头中的X-CSRF-Token是否与用户会话中的 Token 一致；
不一致则拒绝请求。

验证方法

手动修改请求头中的X-CSRF-Token为无效值，发送修改密码请求；
后端返回 403 Forbidden，说明 CSRF 防护生效。