什么是CSRF 攻击

CSRF(Cross-Site Request Forgery,跨站请求伪造)攻击是一种网络攻击手段,它利用合法用户的权限来执行非授权的操作。攻击者通过伪装成合法用户向Web应用程序发送请求,从而执行非预期的操作,如更改密码、转账等。CSRF攻击之所以能够成功,是因为攻击者可以利用用户的登录状态来发送请求,而服务器无法区分这些请求是由合法用户还是攻击者发起的。

CSRF攻击的工作原理

  1. 用户登录

    • 用户登录到一个网站,并且浏览器保存了网站的Cookie。
  2. 攻击者构建恶意链接

    • 攻击者构建一个包含恶意请求的URL,这个请求指向受害者的账户所在网站,并且包含一些预定义的操作,如转账、更改邮箱地址等。
  3. 用户点击恶意链接

    • 用户在不知情的情况下点击了包含恶意请求的URL。此时,用户的浏览器会自动附带上先前保存的Cookie(因为Cookie是自动发送的)。
  4. 请求发送到服务器

    • 包含恶意请求的HTTP请求被发送到了受害者的账户所在的网站,由于请求包含了正确的Cookie,所以服务器认为这是合法用户的请求。
  5. 服务器执行请求

    • 服务器根据请求的内容执行了相应的操作,如转账等。

如何防御CSRF攻击

防御CSRF攻击的关键是在服务器端采取措施,确保请求是用户主动发起的,而不是被恶意链接触发的。以下是一些常用的防御策略:

  1. 使用CSRF Token

    • 在表单中加入一个隐藏字段,包含一个随机生成的token。这个token应该在服务器端生成并在用户会话开始时存储在session中。每次提交表单时,都要求客户端提供这个token,并在服务器端验证这个token的有效性。
    html 复制代码
    <form action="/transfer" method="post">
      <input type="hidden" name="_csrf" value="some-random-token">
      <!-- 其他表单字段 -->
      <button type="submit">Transfer</button>
    </form>
  2. 验证Referer头

    • 服务器端可以检查HTTP请求的Referer头,确保请求来自预期的页面。但是这种方法并不总是可靠,因为Referer头可以被伪造。
  3. 双因素认证

    • 对于敏感操作,可以要求用户进行二次确认,如输入手机验证码、使用硬件令牌等。
  4. 限制请求频率

    • 对于特定的API端点,可以限制请求的频率,超出限制则拒绝服务。
  5. 使用HTTP-only Cookie

    • 设置HTTP-only标志,使得Cookie不能通过JavaScript访问,减少攻击面。
  6. SameSite Cookie属性

    • 使用SameSite属性来限制Cookie仅在原站点上下文内发送。设置SameSite=StrictSameSite=Lax可以帮助防止CSRF攻击。
  7. 教育用户

    • 提醒用户不要随便点击不明链接或附件,提高用户的网络安全意识。

示例:使用CSRF Token

假设你正在使用Node.js和Express框架构建一个Web应用,可以使用如下代码来实现CSRF防护:

javascript 复制代码
const express = require('express');
const csrf = require('csurf');
const session = require('express-session');

const app = express();
app.use(express.urlencoded({ extended: false }));
app.use(session({ secret: 'secret', resave: false, saveUninitialized: false }));
app.use(csrf()); // 使用CSRF中间件

app.use((req, res, next) => {
  res.locals.csrfToken = req.csrfToken(); // 将CSRF token传递给前端
  next();
});

app.get('/login', (req, res) => {
  res.render('login');
});

app.post('/login', (req, res) => {
  // 登录逻辑
});

app.get('/transfer', (req, res) => {
  res.render('transfer', { csrfToken: req.csrfToken() }); // 在模板中包含CSRF token
});

app.post('/transfer', (req, res) => {
  const { amount, csrf } = req.body;
  // 验证CSRF token
  if (!req.csrfToken(csrf)) {
    return res.status(403).send('Invalid CSRF token');
  }
  // 转账逻辑
  res.send('Transfer successful');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

通过以上措施,可以有效地减轻CSRF攻击的风险。然而,任何安全措施都不是绝对的,因此需要综合多种手段来提高系统的安全性。

相关推荐
abigale032 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
Setsuna_F_Seiei2 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑3 小时前
追踪来自Agent的Web 流量
前端
wefly20173 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年4 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen114 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年5 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js
~无忧花开~7 小时前
React生命周期全解析
开发语言·前端·javascript·react.js·前端框架·react
cj81407 小时前
Prompt,Agent,Skill,Mcp分别于langchain有什么关系
前端