一、最核心、必会的 Web 安全问题（⭐⭐⭐⭐⭐）
1️⃣ XSS（跨站脚本攻击）------前端第一大坑
是什么
攻击者往页面里注入 JS 代码，偷：
-
Cookie
-
Token
-
用户操作
常见场景
-
innerHTML -
富文本编辑器
-
评论 / 输入框回显
错误示例
div.innerHTML = userInput防护
-
前端：不要信任任何用户输入
-
转义 HTML（escape）
-
React / Vue 默认防一部分
-
Cookie 设置
HttpOnly
2️⃣ CSRF（跨站请求伪造）
是什么
用户登录态被利用，偷偷发请求
常见场景
-
表单提交
-
自动请求接口
防护
-
CSRF Token
-
Cookie 设置
SameSite=Strict/Lax -
验证
Referer / Origin
3️⃣ SQL 注入（前端间接导致）
是什么
用户输入被拼进 SQL
前端坑点
?id=1 or 1=1防护
-
前端：参数校验
-
后端：预编译 SQL（核心）
4️⃣ 敏感信息泄露（非常常见）
错误做法
-
前端写死：
-
密钥
-
Token
-
私有 API
-
防护
-
所有密钥只在后端
-
前端只拿临时凭证
二、真实项目里经常被忽略的安全问题（⭐⭐⭐⭐）
5️⃣ Token 存储不当
错误
localStorage.setItem('token', token)风险
- XSS = token 直接被偷
推荐
-
Cookie + HttpOnly + SameSite
-
或短期 token + 刷新机制
6️⃣ CORS 配置错误
错误
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true👉 严重漏洞
正确
-
精确域名
-
不随便带 credentials
7️⃣ 点击劫持（Clickjacking）
场景
你的网站被 iframe 嵌套，诱导点击
防护
X-Frame-Options: DENY或
Content-Security-Policy: frame-ancestors 'none'8️⃣ 文件上传漏洞
风险
-
上传
.js / .php -
上传后可访问
防护
-
校验 MIME + 后缀
-
重命名
-
不允许直接执行
三、前端工程级安全（⭐⭐⭐）
9️⃣ 第三方依赖投毒
风险
- npm 包被植入恶意代码
防护
-
锁版本（lockfile）
-
定期
npm audit -
避免小众包
🔟 HTTPS / Mixed Content
风险
- HTTPS 页面加载 HTTP 资源
防护
-
全站 HTTPS
-
CSP 限制
1️⃣1️⃣ 重放攻击
场景
- 接口被重复调用（下单、支付）
防护
-
nonce
-
时间戳
-
后端校验
四、现代 Web 必须知道的安全策略（⭐⭐⭐）
1️⃣2️⃣ CSP（内容安全策略）
限制：
-
脚本来源
-
内联脚本
-
外部资源
Content-Security-Policy:
default-src 'self';
script-src 'self'
1️⃣3️⃣ 浏览器安全头
必备：
X-Content-Type-Options: nosniff
X-XSS-Protection: 1
Strict-Transport-Security五、结合你背景的「面试级总结」
面试官最爱问
你怎么防 XSS / CSRF？
标准回答结构
1️⃣ 说攻击原理
2️⃣ 说前端如何防
3️⃣ 说后端如何配合
六、给你一份「记忆口诀」
输入不信任，输出要转义
Cookie 要 HttpOnly
接口要鉴权
CORS 不要 *
HTTPS 必须上
下面这份是 「前端面试 Web 安全高频题」 ，我按 ⭐出现频率 + 面试官追问深度 排好顺序，
每一道都给你 "能直接说出口的标准答案 + 追问点"。
看完这份，80% 前端安全面试题你都能稳住。
七、必问 TOP 级（⭐⭐⭐⭐⭐）
1️⃣ 什么是 XSS？怎么防？
标准回答（背这个）
XSS 是攻击者把恶意脚本注入到页面中执行，窃取 Cookie、Token 或劫持用户行为。
防护手段
-
输入校验 + 输出转义
-
不用
innerHTML -
Cookie 设置
HttpOnly -
CSP 限制脚本来源
面试官追问
Q：React / Vue 为什么能防 XSS？
👉 默认会对插值做 HTML 转义，但 dangerouslySetInnerHTML 依然有风险。
2️⃣ CSRF 是什么？为什么 Token 能防？
标准回答
CSRF 是利用用户已登录状态，诱导浏览器自动发请求。
防护
-
CSRF Token（服务端校验）
-
Cookie 设置
SameSite -
校验
Origin / Referer
追问
Q：JWT 还需要 CSRF 吗？
👉 如果 JWT 放在 Cookie 里，仍然需要。
3️⃣ Cookie、LocalStorage、SessionStorage 区别？安全性？
| 存储 | 能被 JS 访问 | 风险 |
|---|---|---|
| Cookie(HttpOnly) | ❌ | 最安全 |
| localStorage | ✅ | 易被 XSS 窃取 |
| sessionStorage | ✅ | 同样有 XSS 风险 |
面试结论
👉 安全优先：Cookie + HttpOnly
八、进阶必问（⭐⭐⭐⭐）
4️⃣ CORS 是什么？为什么会报错？
标准回答
浏览器的同源策略限制跨域，CORS 是服务器告诉浏览器哪些跨域是安全的。
常见错误配置
Access-Control-Allow-Origin: *
Allow-Credentials: true👉 高危
5️⃣ 点击劫持是什么？怎么防？
场景
网站被 iframe 嵌套，诱导点击
防护
X-Frame-Options: DENY或
CSP: frame-ancestors 'none'6️⃣ HTTPS 做了什么安全保障？
3 点即可
-
加密（防窃听）
-
完整性校验（防篡改）
-
身份验证（防中间人）
九、真实项目 + 面试官爱追问（⭐⭐⭐）
7️⃣ 什么是中间人攻击？怎么防？
回答
-
攻击者劫持通信
-
HTTPS + HSTS 防御
8️⃣ 前端如何防止接口被刷？
回答角度
-
前端：节流 / 防抖 / 验证码
-
后端：限流 / Token 校验
9️⃣ XSS 和 CSRF 的区别？
一句话对比
-
XSS：攻击的是用户
-
CSRF：利用的是用户
十、高级加分题（⭐⭐）
🔟 CSP 是什么？解决什么问题？
CSP 是浏览器安全策略，用来限制脚本、资源的加载来源，从源头防 XSS。
1️⃣1️⃣ 文件上传有哪些安全风险？
-
恶意脚本
-
覆盖文件
-
木马
防护
-
校验后缀 + MIME
-
重命名
-
不允许执行
1️⃣2️⃣ npm 包有什么安全风险？
-
供应链攻击
-
依赖投毒
防护
-
lockfile
-
npm audit
-
谨慎小众包
五、面试「万能收尾话术」
当你不确定时，可以说：
前端主要负责输入校验和安全使用 API，核心安全仍需后端配合完成，例如鉴权、限流和数据校验。
👉 面试官听到这句，基本不再深挖。
六、5 分钟速背口诀（面试神器）
XSS 转义 + HttpOnly
CSRF Token + SameSite
CORS 不要 *
HTTPS 必须有