前端常见安全问题都有哪些以及解决方案

前端常见的安全问题主要集中在 输入、数据传输、存储、接口调用 等环节。下面我分门别类给你整理常见问题及对应的解决方案：

---

🔒 一、常见前端安全问题

1. XSS（跨站脚本攻击）

• 场景：恶意用户输入 <script>alert(1)</script>，被页面直接渲染执行。
• 危害：窃取 Cookie、会话信息、页面劫持、钓鱼攻击。
• 解决方案：
• • 转义输出：对 HTML、JavaScript、CSS、URL 输出时进行编码（如 < 替代 <）。
  • CSP（内容安全策略） ：限制资源加载来源，禁止内联脚本。
  • HttpOnly Cookie：防止 JS 读取 Cookie。
  • 使用成熟库（如 React/Vue）默认会转义输出，除非 v-html / dangerouslySetInnerHTML 需谨慎使用。

---

2. CSRF（跨站请求伪造）

• 场景：用户已登录 A 网站，攻击者诱导点击恶意链接，浏览器会自动带上 Cookie 发起请求。
• 危害：在用户不知情的情况下执行转账、改密码等操作。
• 解决方案：
• • CSRF Token：服务端生成 Token，前端请求时带上并校验。
  • SameSite Cookie：设置 SameSite=Strict/Lax 限制跨站点 Cookie 自动携带。
  • 双重验证：关键操作要求输入密码/短信验证码。

---

3. 点击劫持（Clickjacking）

• 场景：攻击者在一个透明 iframe 中嵌入目标网站，引诱用户点击。
• 危害：用户在不知情的情况下执行敏感操作。
• 解决方案：
• • 响应头设置：X-Frame-Options: DENY 或 SAMEORIGIN。
  • 使用 CSP: frame-ancestors 'self' 限制页面被嵌入。
  • 前端可检测是否在 iframe 中（if (window.top !== window.self)），并阻止渲染。

---

4. 敏感信息泄露

• 场景：前端代码中暴露了 API Key、密钥、调试信息。
• 危害：攻击者获取后可直接调用后端接口。
• 解决方案：
• • 不要在前端存放敏感信息（密钥、数据库连接）。
  • 使用 环境变量 + 服务器代理。
  • 生产环境关闭 console.log、sourceMap，避免泄露源码。

---

5. 不安全的存储（本地存储 / Cookie）

• 场景：将 Token 存在 localStorage 或非 HttpOnly Cookie 中。
• 危害：一旦发生 XSS，Token 可能被窃取。
• 解决方案：
• • 优先使用 HttpOnly + Secure Cookie 存储 Token。
  • 必须用 localStorage/sessionStorage 时，结合短期 Token + Refresh Token 机制。

---

6. 中间人攻击（Man-in-the-Middle, MITM）

• 场景：未加密的 HTTP 传输被拦截篡改。
• 危害：用户数据泄露或被篡改。
• 解决方案：
• • 使用 HTTPS。
  • 开启 HSTS（HTTP Strict Transport Security） ，强制浏览器使用 HTTPS。

---

7. 接口越权（前端访问控制不严）

• 场景：前端只在 UI 上隐藏了按钮，但接口仍可被恶意调用。
• 危害：低权限用户可以调用高权限接口。
• 解决方案：
• • 后端必须做权限校验，前端只做辅助。
  • 接口区分角色，避免通过参数直接访问他人资源。

---

8. 依赖库漏洞

• 场景：引入的第三方库（npm 包、CDN 资源）存在漏洞。
• 危害：攻击者通过供应链攻击劫持前端。
• 解决方案：
• • 使用 npm audit、Snyk 定期扫描依赖漏洞。
  • 使用 Subresource Integrity (SRI)  校验外部资源完整性。
  • 锁定依赖版本，避免被投毒。

---

9. 开放式重定向

• 场景：前端参数控制跳转地址 redirect=http://evil.com。
• 危害：被用于钓鱼、跳转到恶意网站。
• 解决方案：
• • 校验跳转地址，限制白名单域名。
  • 不直接使用用户输入作为跳转目标。

---

10. 跨域问题（CORS 配置不当）

• 场景：后端 Access-Control-Allow-Origin: *。
• 危害：任意网站可读取用户敏感数据。
• 解决方案：
• • 后端配置 精确域名白名单，不要用 *。
  • 对跨域请求要求鉴权。

---

✅ 总结

前端安全问题常见的类别及核心解决思路：

• XSS → 转义 & CSP
• CSRF → Token & SameSite
• 点击劫持 → X-Frame-Options & CSP
• 敏感信息 → 不放前端 & 关闭调试信息
• 存储风险 → HttpOnly Cookie
• MITM → HTTPS & HSTS
• 接口越权 → 后端校验
• 依赖漏洞 → SRI & npm audit
• 开放式重定向 → 白名单
• CORS 配置 → 精确控制

---