CSRF防御进阶：SameSite Cookie与双重提交Token的深度解析

MenzilBiz

于 2025-04-04 06:21:10 发布

阅读量1k

点赞数 16

分类专栏： Nginx 运维文章标签： csrf 前端

本文链接：https://blog.youkuaiyun.com/qaknar826/article/details/146992554

版权

运维同时被 2 个专栏收录

15 篇文章

订阅专栏

Nginx

6 篇文章

订阅专栏

SameSite Cookie简介

SameSite是Cookie的一个属性，它允许开发者声明该Cookie是否应限制在"同站"（Same Site）上下文中发送。这是浏览器层面提供的原生CSRF防护机制，由RFC 6265bis标准定义，能够有效防止跨站请求携带敏感Cookie。

SameSite的三种模式

Strict模式：
- 设置方式：SameSite=Strict
- 特点：Cookie仅在同站请求中发送，完全阻止跨站携带
- 适用场景：银行交易、修改密码等高敏感操作
- 副作用：从第三方网站点击链接访问时不会携带Cookie，可能导致用户需要重新登录
Lax模式：
- 设置方式：SameSite=Lax
- 特点：允许安全HTTP方法（如GET）在顶级导航中携带Cookie，阻止POST等非安全方法的跨站请求
- 适用场景：大多数常规网站，平衡安全性与用户体验
- 浏览器默认行为：Chrome 80+将未指定SameSite的Cookie默认视为Lax
None模式：
- 设置方式：SameSite=None; Secure
- 特点：允许跨站携带Cookie，但必须同时设置Secure属性（仅HTTPS）
- 适用场景：需要跨站共享Cookie的嵌入式应用、第三方服务等
- 安全风险：可能暴露于CSRF攻击，需配合其他防护措施

实现示例与最佳实践

// 推荐的安全配置
Set-Cookie: sessionid=xxxx; SameSite=Lax; Secure; HttpOnly; Path=/

实施建议：

优先为所有Cookie设置SameSite属性
会话Cookie建议使用Lax模式
必须跨站的Cookie使用None模式并确保Secure
配合CSP（内容安全策略）增强防护

兼容性与迁移策略

浏览器兼容性现状：

Chrome 80+、Firefox 79+、Edge 80+全面支持
Safari在macOS 10.14+和iOS 12+支持
需要关注IE11等旧浏览器的降级处理

迁移路线图：

审计现有Cookie使用情况
测试环境逐步部署SameSite属性
监控异常情况并调整策略
最终对所有Cookie明确指定SameSite值

双重提交Token：增强型防御方案

双重提交Token原理

双重提交Token模式是对传统CSRF Token机制的增强，其核心思想是：

服务器生成随机Token并存储在客户端Cookie中
客户端需要在请求体（表单）或头（AJAX）中携带相同Token
服务器验证Cookie中的Token与提交的Token是否一致

这种机制确保了攻击者即使能构造恶意请求，也无法同时篡改Cookie和请求体。

详细实现步骤

Token生成与服务端设置：

// 使用加密安全的随机数生成器
const crypto = require('crypto');

function generateCSRFToken() {
  return crypto.randomBytes(32).toString('hex');
}

// Express中间件示例
app.use((req, res, next) => {
  if (!req.cookies['csrf-token']) {
    const token = generateCSRFToken();
    res.cookie('csrf-token', token, {
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'Strict',
      httpOnly: false // 允许JS读取
    });
  }
  next();
});

客户端集成方案：

<!-- 传统表单方案 -->
<form action="/checkout" method="POST">
  <input type="hidden" name="csrf_token" id="csrf_token">
  <!-- 其他表单字段 -->
</form>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const token = document.cookie.match(
    /(?:^|; )csrf-token=([^;]*)/
  )?.[1];
  if (token) {
    document.getElementById('csrf_token').value = token;
  }
});
</script>

<!-- AJAX请求方案 -->
<script>
fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': document.cookie.match(
      /(?:^|; )csrf-token=([^;]*)/
    )?.[1]
  }
});
</script>

服务端验证逻辑增强：

function csrfProtection(req, res, next) {
  const cookieToken = req.cookies['csrf-token'];
  const submittedToken = req.body.csrf_token 
    || req.headers['x-csrf-token'];
  
  if (!cookieToken || !submittedToken) {
    return res.status(403).json({ error: 'CSRF token missing' });
  }
  
  if (!timingSafeEqual(cookieToken, submittedToken)) {
    return res.status(403).json({ error: 'CSRF token invalid' });
  }
  
  next();
}

高级实现技巧

Token轮换策略：
- 每次验证后生成新Token
- 防止重放攻击
- 需要处理并发请求场景

多页面应用优化：

// 使用meta标签共享Token
<meta name="csrf-token" content="token-value">

// 统一拦截AJAX请求添加Token
$.ajaxSetup({
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRF-Token', 
      $('meta[name="csrf-token"]').attr('content'));
  }
});