.webp){kind=small}
浏览器 Web 安全基础系列：从同源策略到 XSS 与资源防护
这套系列不是漏洞名词清单，而是一条按依赖关系组织的学习路线。先理解浏览器如何区分网站，再理解 Cookie 与 Session 为什么能维持登录，随后进入跨源访问、CSRF、XSS 和浏览器防御机制，最后讨论第三方资源与静态资源保护。
浏览器 Web 安全基础系列
为什么要按这个顺序学习
很多安全概念单独看都不难，难点在于它们互相依赖。例如，没理解 Cookie 会被浏览器自动携带，就很难真正理解 CSRF；没理解同源策略只限制跨源读取，就容易误以为 CORS 能阻止所有跨站请求；没理解 XSS 代码运行在目标站点的 Origin 下，也很难理解为什么 XSS 能绕过很多 CSRF 防护。
整套内容围绕一次浏览器请求展开：
浏览器先判断当前页面和目标地址是否同源、是否同站。
根据 Cookie 的 Domain、Path、Secure、SameSite 等规则决定是否携带 Cookie。
如果 JavaScript 跨源读取响应，浏览器执行 CORS 检查。
服务端验证登录状态、权限、请求来源与 CSRF Token。
页面渲染不可信数据时，需要防止 XSS。
页面还需要限制可执行脚本、iframe 嵌入和第三方资源完整性。
适合哪些读者
默认读者知道 HTML、JavaScript、GET、POST 和接口调用，但没有系统学习过 Web 安全。每篇先从问题场景开始，再讲请求过程、关键代码、可运行实验和常见误区。正文只保留核心代码，完整示例在压缩包的 examples/ 目录中。
实验环境
所有实验统一使用 Node.js 18 以上版本。部分实验使用原生 http、https 模块，部分使用 Express。根目录安装一次依赖后，可以通过独立 npm 命令启动每个实验。
cd examples
npm install
npm run demo:csrf
实验只监听本机地址，故意保留的危险接口也只用于理解浏览器行为，不应复制到生产项目。
建议的阅读方式
先按顺序完成 01～08，建立浏览器安全模型；09～11 是浏览器防御增强；12 则把 Referer、鉴权与 CDN 场景串起来。遇到概念混淆时，回到第 01、02、05、07 篇对照“同源、同站、Cookie、CORS、请求来源”五个关键词。
系列边界
本系列暂不展开 SQL 注入、命令注入、SSRF、路径穿越、文件上传和越权等服务端漏洞。它们需要另一条从输入验证、数据库访问、操作系统调用和权限模型出发的学习路线。
参考资料
浏览器 Web 安全基础系列：从同源策略到 XSS 与资源防护
https://lautung.com/archives/web-security-series
评论