前端安全的基本原则

前端安全是保障用户数据和系统完整性的关键环节。随着Web应用的复杂性增加，前端面临的安全威胁也日益多样化。理解并遵循基本原则，可以有效减少漏洞风险。

输入验证与过滤

用户输入是前端安全的第一道防线。未经验证的输入可能导致XSS（跨站脚本攻击）或SQL注入等漏洞。前端应始终对用户输入进行严格验证，即使后端也有验证逻辑。

// 示例：使用正则表达式过滤HTML标签
function sanitizeInput(input) {
  return input.replace(/<[^>]*>/g, '');
}

const userInput = '<script>alert("XSS")</script>';
console.log(sanitizeInput(userInput)); // 输出: alert("XSS")

对于表单输入，应使用原生HTML5验证属性结合JavaScript验证：

<input type="email" required pattern="[^@]+@[^@]+\.[^@]+">

输出编码

动态内容渲染时必须进行输出编码，防止XSS攻击。不同上下文需要不同的编码方式：

// HTML上下文编码
function encodeHTML(str) {
  return str.replace(/[&<>'"]/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag]));
}

// URL上下文编码
const safeURL = encodeURIComponent(userControlledValue);

现代前端框架如React/Vue已内置部分防护，但仍需注意dangerouslySetInnerHTML等特性。

内容安全策略(CSP)

CSP通过HTTP头定义允许加载的资源来源，是缓解XSS的有效手段：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'

配置示例禁止内联脚本执行：

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

跨域资源共享(CORS)控制

正确配置CORS防止CSRF攻击：

// Express示例
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://trusted-site.com');
  res.header('Access-Control-Allow-Methods', 'GET,POST');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

对于敏感操作应使用SameSite Cookie属性：

document.cookie = "session=value; SameSite=Strict; Secure";

前端依赖安全

第三方库可能引入漏洞，需定期检查更新：

# 使用npm audit检查漏洞
npm audit

示例package.json配置自动修补：

{
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "overrides": {
    "lodash": "4.17.21"
  }
}

敏感数据处理

避免在前端存储或处理敏感信息：

// 不安全的做法
localStorage.setItem('apiKey', 'secret123');

// 更安全的替代方案
sessionStorage.setItem('tempToken', 'expiring-token');

使用HttpOnly和Secure标记的Cookie：

// 服务器设置示例
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Lax

前端加密实践

必要时的客户端加密示例（使用Web Crypto API）：

async function encryptData(data, key) {
  const encoded = new TextEncoder().encode(data);
  const encrypted = await window.crypto.subtle.encrypt(
    { name: 'AES-GCM', iv: new Uint8Array(12) },
    key,
    encoded
  );
  return Array.from(new Uint8Array(encrypted)).map(b => b.toString(16).padStart(2, '0')).join('');
}

错误处理与日志

前端错误处理不应泄露敏感信息：

// 不安全的错误显示
try {
  // 业务逻辑
} catch (err) {
  alert(`Error: ${err.stack}`);
}

// 安全的替代方案
try {
  // 业务逻辑
} catch {
  alert('操作失败，请重试');
}

点击劫持防护

使用X-Frame-Options防止页面被嵌入iframe：

// Express中间件示例
app.use((req, res, next) => {
  res.header('X-Frame-Options', 'DENY');
  next();
});

现代替代方案是使用CSP的frame-ancestors指令：

Content-Security-Policy: frame-ancestors 'none'

性能与安全的平衡

安全措施可能影响用户体验，需要合理权衡。例如密码强度检查可在前端实现即时反馈：

function checkPasswordStrength(pwd) {
  const hasUpper = /[A-Z]/.test(pwd);
  const hasLower = /[a-z]/.test(pwd);
  const hasNumber = /\d/.test(pwd);
  const hasSpecial = /[!@#$%^&*]/.test(pwd);
  return pwd.length >= 8 && hasUpper && hasLower && hasNumber && hasSpecial;
}

持续安全实践

将安全纳入开发全流程：

1. 代码审查时检查安全漏洞
2. 使用自动化工具扫描（如Snyk、SonarQube）
3. 定期进行安全培训
4. 监控已部署应用的安全事件

# 示例：使用snyk测试项目漏洞
npx snyk test

浏览器安全特性利用

充分利用现代浏览器安全功能：

<!-- 启用Referrer Policy -->
<meta name="referrer" content="no-referrer-when-downgrade">

<!-- 禁用浏览器嗅探 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

Feature Policy控制浏览器功能访问：

Feature-Policy: geolocation 'none'; microphone 'none'

移动端特有考量

移动Web应用需额外注意：

• 禁用viewport缩放防止UI伪装攻击
• 处理键盘缓存敏感字段
• 生物认证集成

<!-- 禁用viewport缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- 密码字段禁用自动填充 -->
<input type="password" autocomplete="new-password">

第三方服务集成安全

安全加载外部资源：

// 使用integrity属性验证CDN资源
<script 
  src="https://cdn.example.com/jquery.js"
  integrity="sha384-...">
</script>

沙箱化iframe内容：

<iframe src="https://third-party.com" sandbox="allow-scripts allow-same-origin"></iframe>

实时通信安全

WebSocket安全注意事项：

const socket = new WebSocket('wss://secure.example.com');

// 验证消息来源
socket.onmessage = (event) => {
  if (event.origin !== 'https://secure.example.com') return;
  // 处理消息
};

前端存储安全

客户端存储最佳实践：

// IndexedDB使用加密数据
const request = indexedDB.open('secureDB', 1);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('data', { keyPath: 'id' });
};

自动化测试中的安全

将安全测试纳入CI流程：

# GitHub Actions示例
jobs:
  security-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm audit
      - run: npx snyk test