我花了三天时间，终于把 Cookie、XSS、CSRF 和浏览器存储给整明白了

你是否也有过这样的经历：每次面试被问到 cookie 与 localStorage 的区别时标准答案背得很熟——cookie 4KB 会随请求发送。localStorage 5MB 不会自动发；但一旦再往深一点的题目出现，比如 XSS 如何利用 cookie 攻击。CSRF 是怎么回事，HttpOnly 具体防什么你就会开始支支吾吾。

这段时间，我决定自己写一个完整 Demo，用 Express 搭建一个最基本的 Cookie‑Session 登录流程。并在此基础上理清 XSS、CSRF、localStorage 与 sessionStorage 的全貌。 不过，代码跑起来的那一刻，所有概念突然都变得通透。 下面把我的学习过程拆成若干章节，希望对你有所帮助。

主要登录代码

const express = require;const { v4: uuidv4 } = require;const cookieParser = require;说起来，const app = express;app.use)，app.use);怎么说呢，const usersDB =;const sessionStore = {};// server‑side memory store
app.post => {
const { username,password } = req.body;const user = usersDB.find;
if {
return res.status.json;}
const sessionId = uuidv4;话说回来，// 随机字符串
sessionStore = { // 把使用者信息放进服务器内存
id : user.id。username: user.username,role : user.role,loginTime : new Date
};res.cookie('sessionId',sessionId,{
httpOnly : true。// 防止 JS 访问
maxAge : 24 * 60 * 60 * 1000,path : '/'
// 也可以加 Secure/SameSite 等属性
});res.json，});app.listen，

这段代码看似简单，却隐藏着几个关键点：

• 后端生成随机 sessionId 并保存在服务器内存里而不是把整个使用者对象写进 cookie。
• 通过 res.cookie 把 sessionId 种到浏览器。
• 随后每次请求。浏览器会自动把该 cookie 放进请求头，让服务器快速判断身份。

至于XSS，从“偷走”Cookie说起

XSS 就是攻击者通过注入恶意脚本来窃取或篡改页面内容。假设你在评论区没有做任何过滤：

当这段代码被渲染时浏览器会执行它，并将当前域名下所有能被 JS read 的 cookie 一并发送给攻击者的服务器。只要获取到你的 sessionId,攻击者就能冒充你进行任何操作。

XSS 防御两道防线

1. HttpOnly Cookie： 设置 { httpOnly:true },则 JavaScript 无法读取此 cookie，即使执行了上面的 fetch。也拿不到 `document.cookie`.
2. User Input 转义： 始终不要直接将使用者输入渲染为原生 HTML，而是进行转义：

function escapeHtml {
return str
.replace
.replace
.replace
.replace
.replace;}

"