前端安全 | XSS 的攻击手段与防范
内容提要
文章介绍XSS跨站脚本攻击：攻击者向网页注入恶意脚本，在用户浏览器中执行以窃取Cookie等信息。类型包括反射型、存储型、DOM型和JSONP型，区别在于注入位置与是否持久。防御核心是输入过滤与输出转义，对HTML、JS、CSS、URL分别编码，并配合严格的Content-Type、CSP等安全响应头、HttpOnly Cookie、验证码，以及使用模板引擎、避免内联事件和拼接HTML。
延伸解读
四类 XSS 的关键差异：注入点与持久性
文章用表格对比了反射型、存储型、DOM 型和 JSONP 型 XSS 的存储区与插入点。反射型把用户输入直接“反射”回浏览器，需诱导点击恶意链接，属非持久型；存储型将恶意脚本存入后端数据库，所有访问者都会中招，属持久型；DOM 型完全发生在客户端，是前端 JavaScript 自身漏洞；JSONP 型则因 callback 参数被放入返回内容而引入风险。理解这些差异有助于定位漏洞来源。
DOM 型 XSS：前端代码自身的责任
文章强调 DOM 型 XSS 与前两种不同，取出和执行恶意代码都由浏览器端完成，属于前端 JavaScript 的安全漏洞。示例中通过 innerHTML 把用户输入拼进链接地址，构造 onclick 即可执行脚本。文章建议尽量使用 textContent、setAttribute 等安全 API，并警惕 location、onclick、eval、setTimeout 等能把字符串当代码运行的接口，避免将不可信数据拼接到这些 API 中。
防御不能只靠输入过滤
文章指出 XSS 有两大要素：攻击者提交恶意代码、浏览器执行恶意代码，根本方法是从输入到输出都过滤、转义。但仅靠输入过滤并不够，攻击者可能层层绕过，因此所有输出到 HTML、JavaScript、CSS、URL 的变量都需按场景编码。文章还提醒富文本需用白名单限制标签和属性，并禁止事件与危险标签，避免正常输入被错误转义或漏转义。
HttpOnly 与 CSP 的定位不同
文章明确区分了多种防御手段的作用：HttpOnly 并非阻止 XSS 攻击本身，而是阻止攻击后通过 JavaScript 读取 Cookie 的劫持行为；CSP 用于定义页面可加载哪些资源，减少 XSS 发生；X-Content-Type-Options: nosniff 等安全头则借助浏览器能力降低风险。此外，严格设置 Content-Type、限制并检测 JSONP 的 callback 字符，也是针对特定场景的补充措施。
Q&A
XSS攻击是什么？它的本质是什么？
XSS（跨站脚本攻击）是一种代码注入攻击，攻击者向网页注入恶意脚本，在用户浏览器中执行，从而窃取Cookie、SessionID等敏感信息。其本质是恶意代码未经过滤与正常代码混合，浏览器无法区分可信与不可信脚本，导致恶意脚本被执行。
XSS有哪些类型？它们之间有什么区别？
XSS主要分为反射型、存储型、DOM型和JSONP型。反射型XSS将用户输入直接反射给浏览器，非持久型；存储型XSS将恶意脚本存储在服务器（如数据库），持久型；DOM型XSS完全发生在客户端，由前端JavaScript不安全操作导致；JSONP型XSS利用callback参数注入恶意代码。区别在于注入位置和是否持久化。
如何防御XSS攻击？核心原则是什么？
防御XSS的核心原则是对输入和输出都进行过滤和转义。具体包括：对HTML、JavaScript、CSS、URL等上下文分别进行编码（如HTMLEncode、JavaScriptEncode、URLEncode）；使用安全的API如textContent、setAttribute；避免内联事件和拼接HTML；使用模板引擎并开启转义；设置Content-Type、CSP等安全响应头；使用HttpOnly Cookie；添加验证码；对富文本使用白名单过滤。
DOM型XSS和反射型、存储型XSS有什么不同？
DOM型XSS是纯粹发生在客户端的攻击，通过修改页面DOM结构触发，属于前端JavaScript自身的安全漏洞；而反射型和存储型XSS都属于服务端的安全漏洞，恶意代码经过服务器处理。DOM型XSS中，取出和执行恶意代码由浏览器端完成。
JSONP XSS是如何产生的？如何防范？
JSONP XSS产生于callback参数：攻击者可能通过特殊字符截断JS代码或注入HTML标签，导致XSS。防范措施包括：严格设置Content-Type为application/json；限制callback长度（如50字符内）；检测callback只允许字母、数字、下划线、$、点等安全字符；对callback和JSON输出进行转义；在输出前加入注释或换行等字符。
HttpOnly Cookie能防止XSS攻击吗？
HttpOnly Cookie不能阻止XSS攻击本身，但能阻止XSS攻击后的Cookie劫持攻击。浏览器禁止页面的JavaScript访问带有HttpOnly属性的Cookie，因此即使攻击者注入脚本，也无法窃取Cookie中的登录凭证，从而降低攻击后果。
在开发中如何避免XSS漏洞？有哪些最佳实践？
最佳实践包括：使用模板引擎并开启HTML转义（如ejs用<%= data %>）；避免内联事件（如onclick），改用addEventListener；避免拼接HTML，使用createElement、setAttribute或Vue/React等框架；对插入DOM属性、链接等位置保持警惕；通过CSP、输入长度限制等增加攻击难度；使用XSS扫描工具主动检测漏洞。
