浏览器安全机制

Web 安全是前端开发中不可忽视的重要领域。浏览器通过多种机制来保护用户安全，但开发者仍需了解常见的攻击方式及防御手段。

1. 同源策略 (Same-Origin Policy, SOP)

定义：浏览器核心的安全策略。它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

同源的定义：协议、域名、端口必须完全相同。

限制行为：

官方标准的跨域方案。通过服务器设置 HTTP Header 来告诉浏览器允许哪些源访问。

简单请求 (Simple Request)：直接发送请求。
- 方法：GET, POST, HEAD
- Header: 无自定义头，Type 为 text/plain, multipart/form-data, application/x-www-form-urlencoded
预检请求 (Preflight Request)：
- 方法：PUT, DELETE 或带自定义 Header。
- 如果是预检请求，浏览器会先发送一个 OPTIONS 请求询问服务器。
- Header: Access-Control-Allow-Origin, Access-Control-Allow-Methods。

利用 <script> 标签不受同源策略限制的特性。

原理：攻击者在网页中注入恶意脚本（JS），当用户浏览网页时，脚本执行，从而窃取 Cookie、Session、重定向等。

转义输入输出：不要直接将用户输入的内容渲染为 HTML（innerHTML），尽可能使用 innerText。
CSP (Content Security Policy)：通过 HTTP Header 限制浏览器只能加载指定域下的资源（禁止内联脚本）。
- Content-Security-Policy: default-src 'self'
HttpOnly Cookie：设置 Cookie 为 HttpOnly，禁止 JS 读取 Cookie，防止 Session 劫持。

原理：攻击者诱导用户访问恶意网站，利用用户在目标网站的登录状态（Cookie），在用户不知情的情况下发送请求（如转账、发帖）。

示例：用户登录了银行 bank.com。攻击者网站有一张图片：<img src="http://bank.com/transfer?to=hacker&money=1000"> 当用户访问攻击者网站时，浏览器会自动带上 bank.com 的 Cookie 发送这个请求。

SameSite Cookie：设置 Cookie 的 SameSite 属性。
- Strict：完全禁止跨站发送 Cookie。
- Lax：大部分情况禁止（默认）。
CSRF Token：
- 服务器在页面中注入一个随机 Token。
- 每次请求必须带上这个 Token。
- 攻击者无法获取第三方网站的页面内容，因此拿不到 Token。
验证 Origin / Referer：
- 服务器检查请求头中的来源，拒绝来自非信任域名的请求。