Day-072-前端安全深入

# Day 70: 前端安全深入

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

---

## 清单 目录

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

---

## 前端安全概述

### 前端安全重要性

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

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

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

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

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

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

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

### 前端安全模型

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

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

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

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

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

---

## 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;
}
```

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

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

---

## CSP 内容安全策略

### CSP 基础

**什么是 CSP**：
```
CSP（Content Security Policy）是一种安全机制，
通过指定哪些资源可以加载和执行，
减少 XSS 和其他代码注入攻击。
```

**CSP 指令**：
```
default-src: 默认策略
script-src: 脚本来源
style-src: 样式来源
img-src: 图片来源
connect-src: 连接目标
font-src: 字体来源
object-src: 插件来源
frame-src: 框架来源
```

### CSP 配置

**基础配置**：
```html

Content-Security-Policy: default-src 'self'

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'">
```

**严格配置**：
```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
   - 限制回调
   - 验证来源
```

---

## 前端框架安全

### 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
```

### 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
# 自动依赖更新
# 安全策略
```

---

## 客户端存储安全

### 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 安全前端实现

### 认证令牌管理

**令牌存储**：
```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;
}
```

---

## 前端安全测试

### 自动化测试

**SAST 工具**：
```bash
# ESLint 安全插件
npm install -g eslint-plugin-security
eslint --plugin security .

# SonarQube
# 代码质量平台
# 安全漏洞检测

# Snyk Code
# 静态分析
# 漏洞检测
```

**DAST 工具**：
```bash
# OWASP ZAP
# 动态扫描
# 前端安全测试

# Burp Suite
# 手动测试
# 自动化扫描

# npm audit
# 依赖审计
# 漏洞检测
```

### 手工测试

**测试清单**：
```
XSS 测试：
□ 输入点测试
□ 输出点测试
□ 上下文测试
□ 框架测试

CSRF 测试：
□ Token 验证
□ SameSite 检查
□ Referer 检查

存储测试：
□ Cookie 安全
□ LocalStorage 检查
□ SessionStorage 检查

依赖测试：
□ 漏洞扫描
□ 版本检查
□ 权限审计
```

**测试工具**：
```javascript
// 自定义测试脚本
class SecurityTester {
  async testXSS() {
    const payloads = [
      '<script>alert(1)</script>',
      '<img src=x onerror=alert(1)>',
      '"><script>alert(1)</script>'
    ];
    
    for (const payload of payloads) {
      // 测试输入点
      await this.testInput(payload);
    }
  }
  
  async testCSRF() {
    // 测试 CSRF Token
    // 测试 SameSite
    // 测试 Referer
  }
  
  async testStorage() {
    // 检查 Cookie
    // 检查 LocalStorage
    // 检查 SessionStorage
  }
}
```

---

## 防护策略与最佳实践

### 安全开发流程

**设计阶段**：
```
1. 威胁建模
   - 识别威胁
   - 风险评估
   - 缓解措施

2. 安全设计
   - 安全架构
   - 安全组件
   - 安全接口

3. 安全要求
   - 安全需求
   - 安全标准
   - 合规要求
```

**开发阶段**：
```
1. 安全编码
   - 编码规范
   - 安全库使用
   - 代码审查

2. 依赖管理
   - 依赖审计
   - 版本锁定
   - 持续监控

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

**测试阶段**：
```
1. 安全测试
   - SAST
   - DAST
   - 渗透测试

2. 漏洞管理
   - 漏洞修复
   - 回归测试
   - 安全验证

3. 发布检查
   - 安全检查
   - 配置验证
   - 发布审批
```

### 运行时防护

**监控告警**：
```javascript
// 异常监控
window.onerror = function(message, source, lineno, colno, error) {
  // 记录错误
  logError({
    message,
    source,
    lineno,
    colno,
    error: error?.stack
  });
  
  // 检测异常
  if (isSuspiciousError(error)) {
    // 发送告警
    sendAlert('Suspicious error detected');
  }
};

// 安全事件监控
function monitorSecurityEvents() {
  // 监控 XSS 尝试
  // 监控 CSRF 尝试
  // 监控异常请求
}
```

**响应措施**：
```javascript
// 自动响应
function handleSecurityIncident(incident) {
  switch (incident.type) {
    case 'XSS_ATTEMPT':
      // 记录并阻止
      blockUser(incident.user);
      break;
    case 'CSRF_ATTEMPT':
      // 记录并使令牌失效
      invalidateTokens(incident.user);
      break;
    case 'BRUTE_FORCE':
      // 限制请求
      rateLimit(incident.ip);
      break;
  }
}
```

---

## 总结与思考

### 核心要点回顾

1. **前端安全**
   - XSS 防护
   - CSP 策略
   - 框架安全

2. **依赖安全**
   - 依赖审计
   - 版本管理
   - 持续监控

3. **存储安全**
   - Cookie 安全
   - LocalStorage
   - 令牌管理

### 深入思考问题

1. **微前端安全**？
   - 多应用集成
   - 信任边界
   - 通信安全

2. **WebAssembly 安全**？
   - 新攻击面
   - 性能与安全
   - 检测挑战

3. **PWA 安全**？
   - Service Worker
   - 离线安全
   - 推送安全

### 实战建议

**开发人员**：
1. 安全编码
2. 框架最佳实践
3. 依赖管理
4. 安全测试

**安全人员**：
1. 前端测试
2. 代码审计
3. 监控告警
4. 事件响应

**架构师**：
1. 安全架构
2. CSP 设计
3. 认证设计
4. 持续改进

---

## 参考资料

### 学习资源
- [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)

### 工具资源
- [DOMPurify](https://github.com/cure53/DOMPurify)
- [ESLint Security](https://github.com/nodesecurity/eslint-plugin-security)
- [Snyk](https://snyk.io/)

### 书籍推荐
- 《前端安全》
- 《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)
- [CSP Evaluator](https://csp-evaluator.withgoogle.com/)

---

**标记 明日预告**：Day 71 - Web 安全综合实战

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

---

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