前端面试准备 07：安全——XSS/CSRF/CSP、鉴权与前端边界（工程视角）

安全题的关键不是背定义，而是你能否把“攻击方式→影响→防护→工程落地”讲清。

01 XSS：本质是“把不可信输入当代码执行”#

你要能讲清：

• 反射型/存储型/DOM 型
• 防护：输出编码、白名单渲染、避免 dangerouslySetInnerHTML
• 配合：CSP、HttpOnly Cookie、输入校验（但不要迷信）

02 CSRF：本质是“浏览器自动带上凭证”#

你要能讲清：

• 同站凭证（Cookie）会自动携带
• 防护：SameSite、CSRF Token、双重 Cookie

03 CSP：把“允许执行什么”变成策略#

• script-src 与 nonce/hash
• 禁用 inline script 的收益
• report-only 如何渐进上线

04 鉴权：前端的边界（加分点）#

你要能表达立场：

• 前端做权限控制是“体验优化”，不是安全边界
• 真正的授权必须在服务端完成

05 自测清单#

• 我能用一句话说明 XSS 与 CSRF 的差异吗？
• 我能给出一个“工程可落地”的防护组合吗？

---

06 练习题（安全题：有推导）#

题 1（问答）：为什么“前端鉴权”不是安全边界？#

参考答案（原理）#

• 前端代码与请求完全在用户控制下（可改 JS、可重放请求）
• 真正的权限校验必须在服务端（授权决策点）
• 前端做权限控制更多是“体验优化与减少误操作”，不能替代后端

题 2（实战题）：如何防护 XSS？请给出“组合拳”#

参考答案（组合）#

• 默认不渲染不可信 HTML；必须渲染时做白名单 sanitization
• Cookie 设 HttpOnly + Secure + 合理 SameSite
• CSP：script-src 使用 nonce/hash，逐步上报（report-only → enforce）
• 重要操作加二次确认/风控（降低被盗用影响）

---

下一篇进入系统设计：高阶岗位会问“如何设计一个复杂前端系统”。