所属板块：6. DOM/BOM 与宿主环境机制
记录日期：2026-03-xx
更新：遇到跨域或 Web 安全相关题时补充
1. 同源策略（Same-Origin Policy）——浏览器安全的基础
浏览器默认实施同源策略，要求协议（Protocol）、域名（Domain）、端口（Port）三者完全一致才允许访问。
同源策略限制范围：
- 无法读取其他源的 Cookie、LocalStorage、IndexedDB
- 无法操作其他源的 iframe DOM
- AJAX 请求发送后，浏览器会拦截响应（但请求实际已发出）
这是浏览器最核心的安全防线之一。
2. 跨域解决方案对比（面试高频）
| 方案 | 实现方式 | 支持请求类型 | 安全性 | 适用场景 |
|---|---|---|---|---|
| CORS | 后端设置响应头 Access-Control-Allow-Origin | GET/POST 等 | 高 | 生产环境主流方案 |
| JSONP | <script> 标签 + 回调函数 | 仅 GET | 低 | 老项目、简单 GET 请求 |
| Nginx / DevServer 代理 | 前端开发时服务器转发 | 所有 | 高 | 本地开发最常用 |
| postMessage | 窗口间通信 API | - | 中 | iframe 跨域通信 |
CORS 细节：
- 简单请求：满足特定条件（GET/POST + 简单头部）直接发送
- 预检请求（Preflight）：复杂请求会先发 OPTIONS 请求，确认服务器是否允许
3. 前端安全防范基础（XSS 与 CSRF）
XSS（跨站脚本攻击）：
- 攻击者注入恶意脚本并执行
- 防御：
- 用户输入转义（Escape）
- 设置 Cookie
HttpOnly - 开启 CSP（Content-Security-Policy）
CSRF（跨站请求伪造）：
- 攻击者诱导已登录用户发送恶意请求
- 防御：
- 使用 Token（JWT 等）代替 Cookie 验证
- Cookie 设置
SameSite=Strict/Lax - 校验 Referer / Origin 头
4. 小结 & 第六板块完结
- 同源策略 + 跨域方案 + XSS/CSRF 是浏览器安全的三条主线
- [6-1] 渲染机制 + [6-2] 事件模型 + [6-3] BOM 存储 + 本文网络安全，共同构成了 JS 在浏览器宿主环境中的完整武器库
第六板块（DOM/BOM 与宿主环境机制）到此全部结束。
返回总目录：戳这里
