前端安全核心指南

1. XSS (Cross-Site Scripting) 跨站脚本攻击

1.1 原理

攻击者在目标网站上注入恶意脚本（通常是 JS），当其他用户访问该网站时，脚本执行，从而窃取 Cookie、Token 或进行其他恶意操作。

1.2 分类

• 反射型 (Reflected): 恶意脚本存在于 URL 参数中。服务器解析参数并将脚本“反射”回响应页面。
  • 场景：诱导用户点击 http://site.com?q=<script>alert('xss')</script>
• 存储型 (Stored): 恶意脚本被存储在数据库中（如评论区）。用户访问页面时从数据库读取并执行。危害最大。
• DOM 型: 纯前端漏洞。不经过服务器，JS 代码读取 URL 参数或输入，直接操作 DOM 导致执行。

1.3 防御策略

1. 输入/输出转义 (Escaping):
   • 对 HTML 特殊字符 (<, >, &, ", ') 进行转义。
   • 现代框架 (React, Vue) 默认在数据绑定时会自动转义。
   • 慎用: v-html (Vue) 或 dangerouslySetInnerHTML (React)。
2. CSP (Content Security Policy): 限制资源加载来源，禁止内联脚本。
3. HttpOnly Cookie: 禁止 JS 也就是 document.cookie 访问敏感 Cookie。

---

2. CSRF (Cross-Site Request Forgery) 跨站请求伪造

2.1 原理

利用用户已登录的身份（浏览器会自动携带 Cookie 凭证），在用户不知情的情况下，诱导用户发送恶意请求。

2.2 攻击流程

1. 用户登录银行网站 bank.com，本地保留 Cookie。
2. 用户访问恶意网站 evil.com。
3. evil.com 页面包含 <img src="http://bank.com/transfer?to=hacker&money=100">。
4. 浏览器自动携带 bank.com 的 Cookie 发送请求，完成转账。

2.3 防御策略

1. Cookie 的 SameSite 属性:
   • Strict: 完全禁止第三方 Cookie。
   • Lax: (默认) 仅允许导航到目标顶层页面的 GET 请求携带。
   • None: 允许跨站携带 (需配合 Secure).
2. CSRF Token:
   • 每次请求需携带一个服务器下发的随机 Token (放在 Header 或 Body 中)。
   • 攻击者无法获取该 Token (受同源策略限制)。
3. 同源检测: 检查 Header 中的 Origin 和 Referer。

---

3. CSP (Content Security Policy) 内容安全策略

3.1 核心概念

CSP 是一个 HTTP 响应头，允许网站管理员声明允许加载哪些资源。它是防御 XSS 的最后一道防线。

3.2 常见配置

Header: Content-Security-Policy: <policy-directive>; <policy-directive>

• default-src 'self': 默认仅加载同源资源。
• script-src 'self' https://trusted.com: 仅允许运行同源和指定域的脚本。
• img-src * data:: 允许任意图片来源及 Base64 图片。
• style-src 'self' 'unsafe-inline': 允许内联样式 (不推荐，除非必要)。

3.3 示例

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com

---

4. 点击劫持 (Clickjacking)

4.1 原理

攻击者将目标网站通过 iframe 嵌入到恶意页面中，并设置为透明。诱导用户在看似无害的按钮上点击，实际点击的是上方透明 iframe 中的敏感按钮。

4.2 防御策略

1. X-Frame-Options (XFO) Header:
   • DENY: 禁止被嵌入。
   • SAMEORIGIN: 仅允许同源嵌入。
2. CSP frame-ancestors:
   • Content-Security-Policy: frame-ancestors 'none'; (更现代的替代方案)

---

5. 其他安全措施

5.1 SRI (Subresource Integrity)

验证 CDN 加载的资源是否被篡改。

<script src="https://example.com/lib.js" 
        integrity="sha384-..." 
        crossorigin="anonymous"></script>

5.2 Referrer-Policy

控制 Referer 头部的发送策略，保护用户隐私。

• no-referrer: 不发送。
• strict-origin-when-cross-origin: (默认) 跨域只发送 origin，HTTPS -> HTTP 不发送。

5.3 供应链安全

• 定期审计 npm 依赖 (npm audit)。
• 锁定依赖版本 (package-lock.json)。