有哪些可能引起前端安全的问题

31 阅读2分钟

一、漏洞类攻击

  1. XSS(跨站脚本攻击)!!!

    • 风险:恶意脚本窃取 Cookie、篡改页面。
    • 防范:输入过滤 + 输出转义(根据上下文转义 <, > 等字符),启用 CSP 策略。
  2. CSRF(跨站请求伪造)!!!

    • 风险:诱导用户发起非预期请求(如转账)。
    • 防范:CSRF Token、SameSite Cookie、校验 Referer/Origin 头。
  3. 点击劫持(Clickjacking)

    • 风险:透明 iframe 覆盖按钮诱导用户误点。
    • 防范:HTTP 头 X-Frame-Options: DENY 或 CSP 的 frame-ancestors 指令。

二、第三方依赖风险

  1. 第三方库/组件漏洞!!!

    • 风险:如 jQuery、React 旧版本存在已知漏洞。
    • 防范:定期更新依赖,使用 npm audit 或 Snyk 扫描漏洞。
  2. JSONP 劫持

    • 风险:恶意网站通过 JSONP 接口窃取数据。
    • 防范:弃用 JSONP,改用 CORS;校验 Referer 或添加随机 Token。

三、配置与通信问题

  1. CORS 配置错误

    • 风险Access-Control-Allow-Origin: * 导致数据泄露。
    • 防范:严格限制允许的域名,避免通配符。
  2. 中间人攻击(MITM)!!!

    • 风险:公共 Wi-Fi 下数据被窃听。
    • 防范:全站 HTTPS + HSTS 头,用户侧使用 VPN。

四、数据存储与传输

  1. 敏感信息明文存储

    • 风险:将密码、Token 存在 localStorage 或 Cookie 未加密。
    • 防范:避免前端存储敏感数据;Cookie 设置 Secure; HttpOnly
  2. WebSocket 未加密

    • 风险ws:// 协议传输数据被窃取。
    • 防范:强制使用 wss://(WebSocket over TLS)。

五、其他安全问题

  1. SSRF(服务端请求伪造)

    • 风险:前端参数控制后端请求内网资源(如 ?url=http://内网IP)。
    • 防范:后端校验请求目标域名/IP,禁止访问内网。
  2. 错误信息泄露

    • 风险:前端返回详细的错误堆栈(如数据库报错)。
    • 防范:生产环境隐藏错误详情,统一返回友好提示。

面试回答示例

“前端安全问题主要包括 XSS、CSRF、点击劫持、第三方库漏洞、CORS 配置错误等。防范需结合输入过滤、输出转义、CSRF Token、HTTPS 加密、严格 CORS 策略,并定期更新依赖库。”


快速记忆口诀

前端安全六防线:

  1. XSS 转义不能忘CSRF Token 要跟上
  2. HTTPS 全程加密CORS 域名严控防
  3. 三方库勤更新敏感数据别存方
  4. 点击劫禁 iframe错误信息莫泄漏