一、漏洞类攻击
-
XSS(跨站脚本攻击)!!!
- 风险:恶意脚本窃取 Cookie、篡改页面。
- 防范:输入过滤 + 输出转义(根据上下文转义
<
,>
等字符),启用 CSP 策略。
-
CSRF(跨站请求伪造)!!!
- 风险:诱导用户发起非预期请求(如转账)。
- 防范:CSRF Token、SameSite Cookie、校验 Referer/Origin 头。
-
点击劫持(Clickjacking)
- 风险:透明 iframe 覆盖按钮诱导用户误点。
- 防范:HTTP 头
X-Frame-Options: DENY
或 CSP 的frame-ancestors
指令。
二、第三方依赖风险
-
第三方库/组件漏洞!!!
- 风险:如 jQuery、React 旧版本存在已知漏洞。
- 防范:定期更新依赖,使用
npm audit
或 Snyk 扫描漏洞。
-
JSONP 劫持
- 风险:恶意网站通过 JSONP 接口窃取数据。
- 防范:弃用 JSONP,改用 CORS;校验 Referer 或添加随机 Token。
三、配置与通信问题
-
CORS 配置错误
- 风险:
Access-Control-Allow-Origin: *
导致数据泄露。 - 防范:严格限制允许的域名,避免通配符。
- 风险:
-
中间人攻击(MITM)!!!
- 风险:公共 Wi-Fi 下数据被窃听。
- 防范:全站 HTTPS + HSTS 头,用户侧使用 VPN。
四、数据存储与传输
-
敏感信息明文存储
- 风险:将密码、Token 存在 localStorage 或 Cookie 未加密。
- 防范:避免前端存储敏感数据;Cookie 设置
Secure; HttpOnly
。
-
WebSocket 未加密
- 风险:
ws://
协议传输数据被窃取。 - 防范:强制使用
wss://
(WebSocket over TLS)。
- 风险:
五、其他安全问题
-
SSRF(服务端请求伪造)
- 风险:前端参数控制后端请求内网资源(如
?url=http://内网IP
)。 - 防范:后端校验请求目标域名/IP,禁止访问内网。
- 风险:前端参数控制后端请求内网资源(如
-
错误信息泄露
- 风险:前端返回详细的错误堆栈(如数据库报错)。
- 防范:生产环境隐藏错误详情,统一返回友好提示。
面试回答示例
“前端安全问题主要包括 XSS、CSRF、点击劫持、第三方库漏洞、CORS 配置错误等。防范需结合输入过滤、输出转义、CSRF Token、HTTPS 加密、严格 CORS 策略,并定期更新依赖库。”
快速记忆口诀
前端安全六防线:
- XSS 转义不能忘,CSRF Token 要跟上。
- HTTPS 全程加密,CORS 域名严控防。
- 三方库勤更新,敏感数据别存方。
- 点击劫禁 iframe,错误信息莫泄漏。