V.5 安全基础：保护前端应用程序

目的：保护 Web 应用程序免受恶意攻击，保护用户数据并维护系统完整性。

• OWASP Top 10 相关漏洞：最关键的 Web 应用程序安全风险列表。
  • 跨站脚本 (XSS)：向 Web 应用程序注入恶意代码，在客户端执行。缓解措施：适当的输入净化和输出过滤。
  • 跨站请求伪造 (CSRF)：欺骗用户提交非预期表单。缓解措施：使用反 CSRF 令牌。
  • 其他风险：DoS 攻击、过时框架/库、不安全的第三方库、不受限制的功能策略、缺乏子资源完整性。
• 缓解策略：
  • 内容安全策略 (CSP)：一个 HTTP 头，控制浏览器允许加载哪些资源，从而防止 XSS 攻击。
  • 跨域资源共享 (CORS)：一种基于 HTTP 头的机制，允许服务器指示哪些源被允许跨域加载资源，从而防止未经授权的访问。
  • 子资源完整性 (SRI)：一项安全功能，允许浏览器使用加密哈希验证从第三方主机（例如 CDN）获取的文件是否未被意外篡改。
  • 防御性编程：编写不易受意外输入或操作导致错误的健壮代码，包括安全 Web 存储/消息传递和适当的事件处理。

前端安全是一个持续的过程，需要多层防御策略。仅仅依靠客户端验证是不够的。CSP、CORS 和 SRI 的使用 表明了向利用浏览器原生安全机制的转变，这有效地减少了攻击面并提高了应用程序的整体弹性。

表格：常见前端安全风险及缓解策略

风险类型	描述	缓解策略（示例）
跨站脚本 (XSS)	注入恶意脚本，在用户浏览器执行	输入净化，输出过滤，内容安全策略 (CSP)
跨站请求伪造 (CSRF)	欺骗用户执行非预期操作	反 CSRF 令牌，验证 HTTP Referer 头
过时框架/库	使用已知漏洞的旧组件	定期更新，使用 SCA 工具扫描漏洞，仅使用官方来源组件
不安全第三方库	引入漏洞或恶意代码	审计和扫描第三方库，使用 SRI 校验 CDN 资源
拒绝服务 (DoS)	通过大量请求使服务不可用	速率限制，使用 CDN/WAF 过滤恶意流量
不受限制的功能策略	恶意网站滥用浏览器 API（如摄像头、麦克风）	使用 Feature-Policy HTTP 头限制功能访问
缺乏子资源完整性 (SRI)	CDN 资源被篡改，加载恶意代码	对 CDN 资源使用 integrity 属性和加密哈希
客户端数据验证不足	恶意用户绕过客户端验证发送无效数据	始终在服务器端进行数据验证，客户端验证仅用于 UX 提升

这个表格提供了常见前端漏洞及其解决方案的实用指南。它帮助学习者理解具体的威胁以及如何实施对策，这对于构建安全可靠的 Web 应用程序至关重要。