前端安全是 Web 开发中至关重要的一环，以下是常见的前端安全问题及对应的防御措施：

1. XSS（跨站脚本攻击）

攻击原理
攻击者向页面注入恶意脚本（如 JavaScript），在用户浏览器中执行，窃取 Cookie、会话信息或篡改页面内容。

类型：

• 存储型 XSS：恶意脚本存储在服务器（如评论区）。

• 反射型 XSS：通过 URL 参数注入脚本。

• DOM 型 XSS：直接操作 DOM 触发漏洞。

防御措施：

• 输入转义：对用户输入的内容进行转义（如 < → <）。

• Content Security Policy (CSP)：通过 HTTP 头限制脚本来源，禁止内联脚本和未授权域。

  Content-Security-Policy: default-src 'self'; script-src 'self' trusted.com

• 使用安全的框架：如 React/Vue 自动转义 HTML，避免直接操作 innerHTML。

• 设置 HttpOnly Cookie：防止 JavaScript 读取敏感 Cookie。

2. CSRF（跨站请求伪造）

攻击原理
诱导用户访问恶意页面，利用已登录的 Cookie 伪造用户身份发起请求（如转账）。

防御措施：

• CSRF Token：服务端生成随机 Token 并验证（如隐藏表单字段）。

• SameSite Cookie 属性：设置 Cookie 的 SameSite=Strict 或 Lax，限制跨域携带。

• 验证 Referer/Origin：检查请求来源是否为合法域名。

• 关键操作二次验证：如短信验证码、密码确认。

3. 点击劫持（Clickjacking）

攻击原理
通过透明 iframe 覆盖在正常页面上，诱导用户点击隐藏按钮（如授权操作）。

防御措施：

• X-Frame-Options：通过 HTTP 头禁止页面被嵌入 iframe。

  X-Frame-Options: DENY

• CSP 的 frame-ancestors 指令：限制页面嵌入的父级来源。

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

4. 不安全的第三方依赖

风险
第三方库/插件可能包含漏洞或被篡改（如通过 CDN 加载恶意脚本）。

防御措施：

• 使用可信来源：从官方渠道获取依赖。

• 子资源完整性（SRI）：校验 CDN 资源哈希值。

  <script src="https://cdn.example.com/lib.js" 
          integrity="sha384-xxxxx">
  </script>

• 定期更新依赖：使用 npm audit 或工具（如 Snyk）扫描漏洞。

5. 不安全的本地存储

风险
敏感数据（如 Token）存储在 localStorage 或 sessionStorage 中，易被 XSS 窃取。

防御措施：

• 避免存储敏感数据：优先使用 HttpOnly Cookie。

• 加密存储数据：如需本地存储，使用加密算法（如 AES）保护。

6. CORS 配置错误

风险
不当的跨域资源共享（CORS）配置导致数据泄露。

防御措施：

• 严格限制 Origin：仅允许可信域名访问 API。

  Access-Control-Allow-Origin: https://your-domain.com

• 避免通配符 *：除非必要，否则不开放全部域。

7. 输入验证不足

风险
未对用户输入进行验证，导致 SQL 注入、命令注入等。

防御措施：

• 前后端双重验证：前端做基础校验（如格式、长度），后端做严格校验。

• 使用参数化查询：防止 SQL 注入（后端责任，但需前后端协作）。

防御核心原则

1. 最小权限原则：仅授予必要权限（如 API 访问、Cookie 范围）。

2. 纵深防御：多层级防护（前端 + 后端 + 基础设施）。

3. 保持更新：定期更新依赖和工具链。

4. 安全审计：使用自动化工具（如 OWASP ZAP）扫描漏洞。

通过以上措施，可以显著降低前端安全风险。始终记住：前端安全需要与后端、运维协同防护，单一层面的防御不足以应对复杂攻击。