一、最核心、必会的 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
- 谨慎小众包
