前端常见安全问题都有哪些以及解决方案
前端常见的安全问题主要集中在 输入、数据传输、存储、接口调用 等环节。下面我分门别类给你整理常见问题及对应的解决方案：
🔒 一、常见前端安全问题
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 配置 → 精确控制