Frontend Academy · 课时

CSRF：SameSite Cookie 与令牌

了解跨站请求伪造如何利用 Cookie，使用 SameSite=Strict/Lax 防止此类攻击，并添加同步令牌提供额外保护。

第 2 / 4 课14 个步骤

CSRF：SameSite Cookie 与令牌 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 CSRF？

跨站请求伪造：攻击者诱骗已通过身份验证的用户浏览器向您的站点发送请求。浏览器会附带用户的 Cookie，因此服务器会将其视为用户本人发出的合法请求。

经典 CSRF 攻击

用户已登录 bank.com，然后访问 evil.com。evil.com 向 bank.com/transfer 提交一个隐藏表单，其中包含攻击者的账户号码。浏览器会自动发送 bank.com 的会话 Cookie。服务器于是转账。

信任问题

CSRF 之所以有效，是因为浏览器会在跨源请求中自动包含 Cookie。如果没有额外防护，服务器无法判断请求是否来自恶意站点。

SameSite Cookie——现代解决方案

SameSite Cookie 属性控制 Cookie 何时随跨源请求发送。Strict：绝不跨源发送。Lax（Chrome 中的默认值）：仅在顶级 GET 导航时发送。None：始终发送（还必须设置 Secure）。

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Lax

SameSite=Lax 默认值

如果未指定 SameSite，Chrome 会将所有 Cookie 默认设为 Lax。这可以阻止大多数 CSRF，但您仍应明确设置该属性。

使用 SameSite=Strict 获得最高安全性

对最敏感的 Cookie（管理员会话、银行交易）使用 Strict。缺点是：用户通过其他站点的链接进入时，看起来会像是未登录。

CSRF 令牌（同步器模式）

如果需要支持较旧的浏览器，或希望增加一层安全性，请使用 CSRF 令牌。服务器生成随机令牌，将其嵌入页面，并要求每个会改变状态的请求都携带该令牌。

// Server embeds token in HTML or sets it as a non-HttpOnly cookie:
<meta name="csrf-token" content="a1b2c3...">

// Client reads token and sends in header:
const token = document.querySelector('meta[name=csrf-token]').content;
fetch('/transfer', {
  method: 'POST',
  headers: { 'X-CSRF-Token': token },
  body: JSON.stringify({ amount: 100 })
});

// Server verifies the X-CSRF-Token header matches the user's session

双重提交 Cookie

服务器设置一个 CSRF Cookie（不能设置 HttpOnly，以便 JS 读取）。客户端读取该 Cookie，并将其值放入标头中发送。服务器检查 Cookie 与标头中的值是否匹配。攻击者无法跨源读取 Cookie，因此无法构造相同的标头。

原理

攻击者的 evil.com 无法读取 bank.com 的 Cookie（同源策略）。因此，它无法设置 X-CSRF-Token 标头。请求会在服务器的令牌检查中失败。

使用 Bearer 令牌的 SPA 中的 CSRF

如果您使用存储在内存中的 Authorization: Bearer <jwt> 进行身份验证（而不是使用 Cookie），则不受 CSRF 影响，因为浏览器不会自动发送标头。代价是更容易受到 XSS 攻击（因为 JS 可访问的令牌可能被窃取）。

自定义标头技巧

对于只接受带自定义标头的 JSON 的 API（例如 X-Requested-With），浏览器会发送预检 OPTIONS 请求，并且不会在预检请求中包含 Cookie。这实际上可以阻止基于简单表单的 CSRF。

幂等端点与变更端点

CSRF 主要影响会改变状态的请求（POST、PUT、DELETE）。GET 端点应当是幂等的，即不产生副作用，这样伪造的 GET 请求就无法造成损害。

快速检查

在现代浏览器中，哪个 SameSite Cookie 值默认可以阻止 Cookie 随大多数跨站请求发送？

在交互式课程中回答

回顾：CSRF 防御

为会话 Cookie 设置 SameSite=Lax（或 Strict），以阻止大多数 CSRF。添加 HttpOnly + Secure。使用 CSRF 令牌（同步器模式或双重提交 Cookie）提供额外保护。标头中的 Bearer 令牌可以避免 CSRF，但会增加 XSS 风险。自定义标头技巧会强制浏览器发送预检请求。确保 GET 请求具有幂等性。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「CSRF：SameSite Cookie 与令牌」课时是免费的吗？

是的 — 「CSRF：SameSite Cookie 与令牌」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「CSRF：SameSite Cookie 与令牌」这节课中我会学到什么？

了解跨站请求伪造如何利用 Cookie，使用 SameSite=Strict/Lax 防止此类攻击，并添加同步令牌提供额外保护。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「CSRF：SameSite Cookie 与令牌」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy