前端面试题

XSS和CSRF防御:到底该怎么做

怎么防XSS和CSRF?两者区别?

为什么面试官会问这道题

前端安全是必问题。只会答"用HTTPS"等于白答。

如何回答

  1. 1

    XSS=攻击者把脚本塞进你的页面。三种:存储型(入库)、反射型(URL参数)、DOM型(客户端sink)。

  2. 2

    XSS防御:输出转义(主流框架模板默认做)、CSP header禁内联脚本、DOMPurify处理用户HTML、httpOnly cookie防token被偷。

  3. 3

    CSRF=攻击者诱骗用户浏览器跨站发已鉴权请求。不是偷cookie,是借cookie。

  4. 4

    CSRF防御:会话cookie设SameSite=Lax/Strict、CSRF token放header(跨站设不了)、状态变更请求校验Origin/Referer。

  5. 5

    关键区分:XSS在你页面里执行代码(完全沦陷);CSRF只能借用户浏览器发请求(受限于接口暴露面)。

参考回答示例

XSS=代码注入进你的页面;CSRF=浏览器被骗去发已登录的请求。XSS我会:React/Vue模板默认转义解决90%,严格Content-Security-Policy兜底,dangerouslySetInnerHTML必须配DOMPurify。认证cookie设httpOnly,XSS成功也偷不到token。CSRF我会:会话cookie设SameSite=Lax(2026基线),状态变更接口加CSRF token在X-CSRF-Token header——攻击者跨站读不到cookie所以也原样echo不回来。优先级:XSS更严重因为它拿下你的页面;CSRF只能打到接口暴露的操作。

实用技巧

  • CSP用`strict-dynamic`+nonce是金标准。

  • GET不要改状态——大部分读场景直接免疫CSRF。

  • 即答侠把每个防御配上它挡的那种攻击——面试官要的是因果,不是清单。

常见问题

CORS不就防CSRF了吗?

不是——CORS管跨域读,不管跨域写。跨站表单POST一直允许;CORS只控制攻击者能否读响应。

SameSite=Strict一定更好?

会打断正常跨站跳转(邮件里点链接进你的App会被登出)。Lax是大多数应用的合理默认。

面试时担心忘词?即答侠实时助你

即答侠 AI 实时监听面试对话,自动识别问题并即时生成回答建议——无感辅助,让你从容应对每一道题。

免费试用即答侠