Vue Academy · 课时

Vue SPA 中的 CSRF 防护

Q: 「Vue SPA 中的 CSRF 防护」这节课中我会学到什么？

SameSite Cookie、Axios 中的 CSRF 令牌，以及双重提交 Cookie 模式 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

SameSite Cookie、Axios 中的 CSRF 令牌，以及双重提交 Cookie 模式

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

什么是 CSRF

跨站请求伪造会利用浏览器自动发送的 Cookie，诱骗已登录用户的浏览器向您的网站发起不需要的状态变更请求。攻击者无法读取响应，但可以造成转账或删除等副作用。

Cookie 为什么会导致 CSRF

如果身份验证依赖会话 Cookie，浏览器就会将它附加到发送给您域名的每个请求上，包括由恶意网站触发的请求。如果没有额外防护，服务器无法区分伪造请求和合法请求。

SameSite Cookie 属性

在 Cookie 上设置 SameSite，可以告知浏览器何时发送它。SameSite=Strict 会在任何跨站请求中都不发送 Cookie，从而直接阻止大多数 CSRF 攻击。

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict 与 Lax

Strict 最安全，但用户从外部链接进入时可能会被登出。Lax 只会在顶层 GET 导航中发送 Cookie，是一种常见的折中方案。

同步令牌模式

纵深防御会额外加入攻击者无法得知的 CSRF token。服务器签发 token；客户端必须在状态变更请求中将它原样返回。

双重提交 Cookie

一种常见的 SPA 做法是：服务器将 CSRF token 设置在可读取的（非 HttpOnly）Cookie 中。客户端读取它，再通过标头重新发送。服务器验证这两个值是否匹配。

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

从 Cookie 中读取 token

在 Vue 应用中使用一个小型辅助函数读取 CSRF Cookie 的值。

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

为请求设置标头

在每个状态变更请求（POST、PUT、PATCH、DELETE）中，通过类似 X-CSRF-Token 的自定义标头发送 token。

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Axios 默认标头

使用 Axios 时，可以将该标头设置一次作为默认值，让每个请求都自动包含它。

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Axios 内置的跨站请求伪造支持

Axios 可以自动完成这项工作：配置 Cookie 名称和标头名称后，它会为您读取 Cookie 并设置标头。

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

自定义标头为何有帮助

如果没有通过的 CORS 预检，浏览器会阻止跨源网站设置自定义标头。要求提供 X-CSRF-Token 后，伪造的跨站请求就无法包含它，因此服务器会拒绝该请求。

快速检查

仅凭自身作用，哪一个 Cookie 属性能最直接地缓解 CSRF？

回顾

CSRF 利用自动发送的 Cookie 伪造状态变更请求。请将 SameSite=Strict 设置在身份验证 Cookie 上作为主要防护，并添加 CSRF token：从 Cookie 中读取它，然后通过 X-CSRF-Token 标头将它发送到每个变更请求中；可以将其设置为 Axios 默认值，或通过 Axios 内置的跨站请求伪造选项进行配置。

常见问题解答

「Vue SPA 中的 CSRF 防护」课时是免费的吗？

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

「Vue SPA 中的 CSRF 防护」这节课中我会学到什么？

SameSite Cookie、Axios 中的 CSRF 令牌，以及双重提交 Cookie 模式你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「Vue SPA 中的 CSRF 防护」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy