【网络安全】一文带你了解什么是【CSRF攻击】

经海路大白狗

已于 2024-07-03 10:37:52 修改

阅读量1.6k

点赞数 53

分类专栏： WEB前端最新面试题 - 又全又卷文章标签： web安全 csrf 安全

于 2024-07-01 14:35:02 首次发布

本文链接：https://blog.youkuaiyun.com/xingyu_qie/article/details/140100418

版权

WEB前端最新面试题 - 又全又卷专栏收录该内容

93 篇文章

订阅专栏

CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种网络攻击方式，它利用已认证用户在受信任网站上的身份，诱使用户在不知情的情况下执行恶意操作。具体来说，攻击者通过各种方式（如发送恶意链接、在第三方网站上嵌入恶意代码等）诱导用户的浏览器发送未经授权的请求到受信任的网站。这些请求会携带用户的认证信息（如Cookie、Session），从而让受信任的网站误以为是用户本人发起的合法请求。

1 CSRF攻击的基本原理

2 预防CSRF攻击的方法

3 使用CSRF令牌（Token）的具体实现

1 CSRF攻击的基本原理

用户登录受信任的网站：用户在受信任的网站上登录，浏览器保存了该网站的会话Cookie。
用户访问恶意网站：攻击者诱导用户访问恶意网站或点击恶意链接。
恶意网站发送请求：恶意网站构造一个请求，利用用户的浏览器发送到受信任的网站。由于用户已经登录，浏览器会自动附带用户的会话Cookie。
受信任的网站处理请求：受信任的网站接收到请求后，看到附带的合法会话Cookie，以为这是用户发起的合法请求，从而执行相应的操作。

2 预防CSRF攻击的方法

使用CSRF令牌（Token）：在每次提交表单时，服务器生成一个唯一的CSRF令牌，并将其包含在表单中。服务器在处理请求时验证令牌的有效性，确保请求来自合法的来源。
验证HTTP头部：检查请求的来源（Referer或Origin头部），确保请求是从受信任的域名发出的。
使用双重提交Cookie：在请求中同时包含会话Cookie和一个自定义的CSRF令牌，服务器验证这两个值是否一致。
使用SameSite Cookie属性：设置Cookie的SameSite属性为Strict或Lax，限制Cookie的跨站使用，从而减少CSRF攻击的风险。

CSRF攻击的目标通常是执行用户不希望的操作，例如更改账户设置、进行交易或发送敏感数据等。因此，理解和防范CSRF攻击对于保护用户的安全至关重要。

3 使用CSRF令牌（Token）的具体实现

使用CSRF令牌（Token）是防范CSRF攻击的一种有效方法。下面是一个具体的实现步骤，假设你使用的是Node.js和Express框架，前端使用HTML和JavaScript。

3.1 在服务器端生成CSRF令牌

首先，需要在服务器端生成一个唯一的CSRF令牌，并将其存储在用户的会话中。

const express = require('express');
const session = require('express-session');
const crypto = require('crypto');

const app = express();

app.use(session({
  secret: 'your_secret_key',
  resave: false,
  saveUninitialized: true
}));

// 中间件：生成CSRF令牌并存储在会话中
app.use((req, res, next) => {
  if (!req.session.csrfToken) {
    req.session.csrfToken = crypto.randomBytes(32).toString('hex');
  }
  next();
});

3.2 在HTML表单中包含CSRF令牌

在服务器端的响应中，需要将CSRF令牌包含在HTML表单中，通常以隐藏字段的形式。

app.get('/form', (req, res) => {
  res.send(`
    <form action="/submit" method="POST">
      <input type="hidden" name="csrfToken" value="${req.session.csrfToken}">
      <!-- 其他表单字段 -->
      <button type="submit">Submit</button>
    </form>
  `);
});

3.3 在服务器端验证CSRF令牌

在处理表单提交请求时，服务器需要验证提交的CSRF令牌是否有效。

app.post('/submit', (req, res) => {
  const { csrfToken } = req.body;
  if (csrfToken !== req.session.csrfToken) {
    return res.status(403).send('CSRF token mismatch');
  }
  // 处理表单提交
  res.send('Form submission successful');
});

3.4 解析请求体（中间件）

为了从POST请求中解析CSRF令牌，需要使用body-parser中间件。

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

3.5 完整的示例代码

下面是完整的示例代码，将上述步骤结合起来：

const express = require('express');
const session = require('express-session');
const crypto = require('crypto');
const bodyParser = require('body-parser');

const app = express();

app.use(session({
  secret: 'your_secret_key',
  resave: false,
  saveUninitialized: true
}));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use((req, res, next) => {
  if (!req.session.csrfToken) {
    req.session.csrfToken = crypto.randomBytes(32).toString('hex');
  }
  next();
});

app.get('/form', (req, res) => {
  res.send(`
    <form action="/submit" method="POST">
      <input type="hidden" name="csrfToken" value="${req.session.csrfToken}">
      <!-- 其他表单字段 -->
      <button type="submit">Submit</button>
    </form>
  `);
});

app.post('/submit', (req, res) => {
  const { csrfToken } = req.body;
  if (csrfToken !== req.session.csrfToken) {
    return res.status(403).send('CSRF token mismatch');
  }
  // 处理表单提交
  res.send('Form submission successful');
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});