XSS 是什么，怎么防？

XSS 是攻击者把脚本注入页面，在受害者的源里执行。脚本因此能读 DOM、发同源请求、拿走脚本能碰到的令牌。防御的核心是按输出的上下文编码，并加上内容安全策略。

原理

三条常见路径：

存储型：恶意内容写进数据库，其他人打开页面就执行。
反射型：恶意内容在 URL 里，服务器把它原样嵌进 HTML。
DOM 型：前端自己把不可信字符串写进 innerHTML、document.write 或 eval，服务器没有参与。

同一个字符串在 HTML 正文、属性、JavaScript 字符串、URL 里需要不同的编码。只做一遍全局替换盖不住所有上下文。

框架默认会转义插值：React 的 {}、Vue 的。绕过默认转义的 API 才危险，例如 dangerouslySetInnerHTML 和 v-html。富文本必须先用白名单消毒，再插入。

内容安全策略（CSP）限制脚本来源，并可以禁止内联脚本。即使某处漏了编码，CSP 也能挡住一部分执行。会话 Cookie 加 HttpOnly，脚本就读不到这枚 Cookie。

追问

前端校验够不够？

不够。校验可以被直接调接口绕过。输出编码放在最终写进页面的那一层，服务端渲染则在服务端做。

CSP 和编码的关系？

编码减少注入，CSP 限制注入之后能做什么。两层都要。报告模式 Content-Security-Policy-Report-Only 可以先观察再强制。

易错点

只过滤 <script> 挡不住属性里的事件处理函数，也挡不住 javascript: URL。
React / Vue 的默认转义一旦换成 HTML 插值就失效。
XSS 能读到 localStorage。把会话放进去，等于交给注入脚本。

相关