前端安全最佳实践

前端安全的重要性

前端安全直接影响用户数据和网站信誉。常见攻击包括 XSS、CSRF 等。了解这些威胁，能帮你写出更安全的代码。

XSS (跨站脚本攻击)

攻击者注入恶意脚本。

防范措施

1. 转义用户输入

// 危险
const html = `<div>${userInput}</div>`;

// 安全
const html = `<div>${escapeHtml(userInput)}</div>`;

2. 使用 CSP (内容安全策略)

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

3. 框架内置防护

React、Vue 等框架默认转义内容。

CSRF (跨站请求伪造)

攻击者诱导用户执行非预期操作。

防范措施

1. SameSite Cookie

Set-Cookie: session=abc123; SameSite=Strict

2. CSRF Token

表单中添加隐藏 token。

<form action="/transfer" method="post">
  <input type="hidden" name="csrf_token" value="abc123">
  <!-- 其他字段 -->
</form>

点击劫持

用透明 iframe 覆盖页面。

防范措施

// 禁止 iframe 嵌套
if (window.top !== window.self) {
  window.top.location = window.self.location;
}

HTTPS

强制使用 HTTPS，防止中间人攻击。

// 重定向到 HTTPS
if (location.protocol !== 'https:') {
  location.replace('https:' + location.href.substring(location.protocol.length));
}

敏感信息处理

• 不要在前端存储敏感数据
• 用环境变量管理 API 密钥
• 定期轮换密钥

依赖安全

• 定期更新依赖
• 用 npm audit 检查漏洞
• 避免使用有风险的包

输入验证

• 前端验证：用户体验
• 后端验证：安全保障

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

错误处理

不要暴露内部错误信息。

try {
  // 危险操作
} catch (error) {
  console.error(error);
  // 显示用户友好的错误信息
  alert('操作失败，请重试');
}

总结

安全是持续的过程。从小事做起：转义输入、使用 HTTPS、定期审计。多学习 OWASP 指南，保持警惕。