JavaScript 中如何防止 CSRF (Cross-Site Request Forgery) 攻击？

推荐答案

// www.javascriptcn.com code example
// 1. 使用 CSRF Token
// 在表单或 AJAX 请求中添加 CSRF Token
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

fetch('/api/sensitive-action', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({ data: 'sensitive data' })
});

// 2. 设置 SameSite Cookie 属性
// 在服务器端设置 Cookie 的 SameSite 属性为 'Strict' 或 'Lax'
// 例如在 Express.js 中：
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
    cookie: { sameSite: 'strict' }
}));

本题详细解读

什么是 CSRF 攻击？

CSRF（Cross-Site Request Forgery）攻击是一种利用用户已登录的身份，在用户不知情的情况下，以用户的名义发送恶意请求的攻击方式。攻击者通过诱导用户点击恶意链接或访问恶意网站，利用用户的登录状态发起请求，从而执行未经授权的操作。

如何防止 CSRF 攻击？

1. 使用 CSRF Token

CSRF Token 是一种常见的防御机制。服务器在生成页面时，会为每个用户生成一个唯一的 CSRF Token，并将其嵌入到表单或 AJAX 请求中。当用户提交表单或发送请求时，服务器会验证该 Token 是否与用户会话中的 Token 匹配。如果不匹配，请求将被拒绝。

• 实现步骤：
  1. 服务器生成一个随机的 CSRF Token，并将其存储在用户的会话中。
  2. 在页面中嵌入该 Token，通常通过 <meta> 标签或隐藏的表单字段。
  3. 在每次请求中，客户端将该 Token 作为请求头或请求体的一部分发送到服务器。
  4. 服务器验证请求中的 Token 是否与会话中的 Token 匹配。

2. 设置 SameSite Cookie 属性

SameSite 是 Cookie 的一个属性，用于控制 Cookie 是否在跨站请求中发送。通过将 Cookie 的 SameSite 属性设置为 Strict 或 Lax，可以防止 CSRF 攻击。

• SameSite 属性值：

  • Strict：Cookie 仅在相同站点请求中发送，完全阻止跨站请求。
  • Lax：Cookie 在跨站请求中仅在某些安全的情况下发送（如导航到目标站点）。
  • None：Cookie 在所有请求中发送，包括跨站请求（需要配合 Secure 属性使用）。

• 实现步骤：

  1. 在服务器端设置 Cookie 的 SameSite 属性为 Strict 或 Lax。
  2. 确保所有敏感操作都通过 POST 请求进行，以防止 GET 请求被滥用。

其他防御措施

• 双重提交 Cookie：将 CSRF Token 存储在 Cookie 中，并在请求中同时发送该 Token 作为请求头或请求体的一部分。
• 验证 Referer 头：检查请求的 Referer 头，确保请求来自合法的源。
• 使用 CAPTCHA：在敏感操作前要求用户进行 CAPTCHA 验证，以防止自动化攻击。

通过结合使用这些方法，可以有效地防止 CSRF 攻击，保护用户和系统的安全。