一文读懂 Web 安全：从同源策略到 XSS/CSRF 防御全攻略
本文系统梳理了前端安全的核心知识点，包括同源策略、CORS 跨域方案，以及 XSS、CSRF、点击劫持等常见攻击的原理与防御最佳实践。
一、同源策略
1. 定义
同源 = 协议 + 域名 + 端口完全一致，是浏览器最基础的安全模型。
2. 限制范围
操作 | 跨域是否受限 | 说明 |
|---|---|---|
DOM 访问 | ✅ 受限 | iframe 跨域无法访问内部 DOM |
Cookie 读取 | ✅ 受限 | 只能读取同源 Cookie |
AJAX 请求 | ✅ 受限 | 响应被浏览器拦截（请求实际已发出） |
<script>/<img>/<link> 加载 | ❌ 不受限 | 允许跨域引用资源（JSONP 原理） |
3. 跨域方案速览
CORS（主流）：服务端设置 Access-Control-* 响应头
JSONP（仅 GET）：利用 <script> 标签不受同源限制
代理转发：同源服务端中转请求
postMessage：跨窗口/iframe 通信
二、CORS 机制
1. 简单请求 vs 预检请求
类型 | 触发条件 | 流程 |
|---|---|---|
简单请求 | GET/POST/HEAD + 限定 Content-Type | 直接发送，携带 Origin 头 |
预检请求 | 其他方法/自定义头/非限定 Content-Type | 先 OPTIONS 预检 → 通过后发真实请求 |
2. 关键响应头
Access-Control-Allow-Origin：允许的源（* 或具体域名）
Access-Control-Allow-Methods：允许的方法
Access-Control-Allow-Headers：允许的自定义头
Access-Control-Allow-Credentials：是否允许携带 Cookie（true 时 Origin 不能为 *）
三、XSS 攻击与防御
1. 三种类型
类型 | 注入位置 | 特点 | 典型场景 |
|---|---|---|---|
存储型 | 数据库 | 持久化，危害最大 | 评论区、富文本编辑器 |
反射型 | URL 参数 | 需诱导点击 | 搜索结果页、错误提示 |
DOM 型 | 前端 JS | 不经过服务端 | innerHTML、document.write |
2. 防御体系
输入过滤：服务端对用户输入做白名单校验
输出编码：HTML 实体转义（< → <）
CSP：Content-Security-Policy 限制脚本来源（script-src 'self'）
HttpOnly Cookie：JS 无法通过 document.cookie 读取
React 安全：JSX 默认对插值做转义，但 dangerouslySetInnerHTML 会绕过保护，必须配合 DOMPurify 等库。
四、CSRF 攻击与防御
1. 攻击原理
攻击者诱导用户访问恶意页面 → 页面自动向目标站点发起请求 → 浏览器自动携带目标站点的 Cookie → 服务端误认为是用户本人操作。
2. 防御手段
方案 | 原理 | 注意事项 |
|---|---|---|
SameSite Cookie | Lax/Strict 限制跨站携带 | Lax 是现代浏览器默认值 |
CSRF Token | 服务端下发随机 Token，请求时校验 | 需前后端配合 |
Referer / Origin 校验 | 验证请求来源是否合法 | Referer 可被用户禁用 |
五、其他安全威胁
1. 点击劫持
攻击：透明 iframe 覆盖在正常页面上，诱导用户点击
防御：X-Frame-Options: DENY 或 CSP frame-ancestors 'none'
2. 中间人攻击（MITM）
攻击：拦截 HTTP 明文通信，窃取/篡改数据
防御：全站 HTTPS + HSTS（Strict-Transport-Security）强制跳转
3. 供应链攻击
攻击：恶意 npm 包注入后门代码
防御：npm audit 审计 + 锁定依赖版本（lock 文件）+ 使用可信源
总结
核心心法
1. 同源策略是浏览器安全基石：协议+域名+端口三元组，跨域走 CORS
2. CORS 分简单请求和预检请求，携带 Cookie 时 Origin 不能为通配符
3. XSS 防御四件套：输入过滤 + 输出编码 + CSP + HttpOnly
4. CSRF 利用 Cookie 自动携带，SameSite + Token 双重防御
5. 安全是体系工程：HTTPS 防中间人、X-Frame-Options 防劫持、npm audit 防供应链