猫头虎分享已解决Bug || 跨站请求伪造（CSRF）错误：CsrfException: CSRF token mismatch

CaracalTiger

于 2024-04-25 23:10:51 发布

阅读量949

点赞数 21

分类专栏：已解决的Bug专栏文章标签： bug csrf 前端 sql 数据库架构开发语言

公众号：猫头虎技术团队

本文链接：https://blog.csdn.net/CaracalTiger/article/details/138202275

版权

已解决的Bug专栏专栏收录该内容

165 篇文章 4 订阅

订阅专栏

博主猫头虎的技术世界

🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！

专栏链接：

🔗 精选专栏：

《面试题大全》 — 面试准备的宝典！
《IDEA开发秘籍》 — 提升你的IDEA技能！
《100天精通鸿蒙》 — 从Web/安卓到鸿蒙大师！
《100天精通Golang（基础入门篇）》 — 踏入Go语言世界的第一步！
《100天精通Go语言（精品VIP版）》 — 踏入Go语言世界的第二步！

领域矩阵：

🌐 猫头虎技术领域矩阵：
深入探索各技术领域，发现知识的交汇点。了解更多，请访问：

猫头虎技术矩阵
新矩阵备用链接

在这里插入图片描述

文章目录

猫头虎分享已解决Bug || 跨站请求伪造（CSRF）错误：CsrfException: CSRF token mismatch

猫头虎分享已解决Bug || 跨站请求伪造（CSRF）错误：CsrfException: CSRF token mismatch

摘要 📜

🐯 猫头虎博主来啦！今天我们要聊聊一个非常棘手但又常见的后端问题 —— CSRF (Cross-Site Request Forgery)错误，具体来说是CsrfException: CSRF token mismatch。这个问题在web应用的安全防护中极为重要，涉及到会话管理、用户验证以及如何确保每次请求都是经过允许的。在这篇博客中，我将深入解析CSRF攻击的工作原理，为什么会出现token不匹配的问题，如何一步步地解决这个问题，并提供一些防范策略和编码实践，保证你的web应用更加安全。准备好了吗？让我们一起跳进这个技术的深海中吧！🌊

详细解析 🔍

什么是CSRF？ 🤔

CSRF，全称Cross-Site Request Forgery，是一种攻击方式，攻击者诱导受害者在已认证的网站上执行攻击者预设的请求。这种攻击可能导致受害者不知不觉中更改密码、转账等，非常危险。

错误现象：CSRF token mismatch 🚨

当后端接收到前端请求时，会检查请求中的CSRF token是否和服务器生成的匹配。如果不匹配，就会抛出CsrfException: CSRF token mismatch错误，这是一种安全措施，用来防止CSRF攻击。

解决方案 ✅

步骤1：检查Token生成和验证机制 🛠

首先，确认后端服务是否每次对话都生成了一个独特的CSRF token，并且前端在发起请求时附带了这个token。

// 假设使用Express.js + CSRF middleware
app.use(csrf());
app.use(function(req, res, next) {
    res.cookie('XSRF-TOKEN', req.csrfToken());
    next();
});

步骤2：前端Token使用检查 🖥

确保每次请求都从cookie中读取最新的CSRF token，并在请求的headers中正确发送。

fetch('/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'CSRF-Token': Cookies.get('XSRF-TOKEN') // 使用js-cookie读取cookie中的token
    },
    body: JSON.stringify(data)
});

步骤3：处理Token过期问题 🔧

如果用户长时间停留在页面未操作，可能导致token过期。你需要在前端捕获这种情况，提示用户刷新页面或重新登录以获取新的token。

步骤4：服务器端的Token验证策略 🗝

服务器应当每次请求都验证CSRF token的有效性，并确保它与用户的会话匹配。如果出现不匹配，应该考虑是否有安全漏洞或会话已被篡改。

代码案例演示 📄

以下是一个简单的Node.js/Express示例，展示如何设置和验证CSRF token：

const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf');

const csrfProtection = csrf({ cookie: true });
const app = express();

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

app.get('/form', csrfProtection, (req, res) => {
    // 发送带有CSRF token的表单到客户端
    res.send(`<form action="/process" method="POST">
                <input type="hidden" name="_csrf" value="${req.csrfToken()}">
                <button type="submit">提交</button>
              </form>

`);
});

app.post('/process', csrfProtection, (req, res) => {
    res.send('数据处理成功！');
});

app.listen(3000, () => console.log('App listening on port 3000'));

注意事项 ⚠️

保持软件更新：确保所有使用的库和框架都是最新的，以利用最新的安全特性和修复。
日志审查：定期检查和分析安全日志，以便及时发现和应对可能的安全威胁。

参考资料 📖

QA 环节 ❓

Q1：CSRF token应该存放在哪里最安全？

A1： 最佳实践是将CSRF token存放在HttpOnly的Cookie中，这样可以防止通过XSS攻击窃取token。

Q2：如果发现CSRF攻击，我应该怎么办？

A2： 首先，立即使受影响的会话无效，并对系统进行彻底的安全检查和清理。然后，强化CSRF防护措施，并通知受影响的用户。

表格总结 📊

关键点	描述	处理策略
Token不匹配	前后端CSRF token不一致	检查生成和发送机制
Token过期	用户会话过期未更新token	前端提示用户操作
安全策略	防御CSRF攻击	使用CSRF tokens和验证