一、最核心、必会的 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 或劫持用户行为。
防护手段
输入校验 + 输出转义
不用
innerHTMLCookie 设置
HttpOnlyCSP 限制脚本来源
面试官追问
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 必须有
)
