[!info] related notes

• 所属 MOC: security-moc, javascript-in-browser-moc
• 上位主题: javascript-in-browser
• 相关概念: csrf, cross-origin, same-origin
• 防御机制: CSP 内容安全策略, HttpOnly Cookie
• 浏览器安全基础: browser

XSS 跨站脚本攻击

XSS = Cross-Site Scripting，攻击者把恶意脚本注入页面并执行。

本质

页面本意展示用户输入内容，但输入中夹带了脚本，浏览器无法区分，直接执行。

三种常见类型

反射型

恶意脚本通过 URL 参数传入，服务端原样返回给页面。

存储型

恶意脚本存入数据库，其他用户访问时从服务端加载并执行。危害最大。

DOM 型

前端 JS 读取 URL 或用户输入后直接拼接到 DOM 中，不经过服务端。

典型危险写法

el.innerHTML = userInput;
document.write(location.search);

防范

• 用 textContent 替代 innerHTML
• 对用户输入做转义/过滤
• 设置 CSP（Content-Security-Policy）响应头
• 对 URL 参数做编码
• 不要信任任何客户端输入

最容易误解的点

• XSS 不是跨域请求，而是注入脚本到目标页面
• innerHTML 看着方便，但天然不安全
• CSP 不能完全替代输入过滤，两者互补

面试要点

来自 xss-vs-csrf-interview-question 的面试视角整理。

一句话回答

XSS 是把恶意脚本注入目标页面并在用户浏览器里执行，CSRF 是借用用户已登录身份，在用户不知情时伪造对目标站点的请求。

最稳的回答主线

XSS

• 重点是脚本注入
• 利用的是页面对输入处理不安全
• 常见危害是窃取信息、篡改页面、冒充操作

CSRF

• 重点是伪造请求
• 利用的是浏览器会自动携带凭证这件事
• 常见危害是借用户身份发起敏感操作

防御思路怎么答

• XSS 重点在输出转义、输入过滤、CSP
• CSRF 重点在 SameSite Cookie、CSRF Token、鉴权设计

前后端边界怎么讲

XSS

• 前端要控制渲染与转义
• 后端要避免把不可信内容直接拼进模板或返回到危险上下文
• 双方都要把“用户输入不可信”当默认前提

CSRF

• 前端常见感知较弱，因为很多攻击发生在浏览器自动带 Cookie 的机制里
• 后端必须决定是否使用 SameSite、CSRF Token、Origin / Referer 校验

所以面试里更稳的说法是：

XSS 更像内容注入问题，CSRF 更像会话滥用问题。

最短记忆方式

XSS 是注入脚本，CSRF 是伪造请求。

放回主题图里看

• 同源策略基础：same-origin
• CSRF 对比：csrf
• 浏览器安全整体：security-moc