关注：CodingTechWork
引言
在Web应用高度动态化的今天，Cross-Site Scripting（XSS）攻击如同一个游荡在前端的幽灵，长期占据OWASP Top 10安全威胁榜单。它与SQL注入齐名，但攻击面更偏向用户浏览器。本文将深入剖析XSS的原理，通过可复现的案例演示三种主要类型的XSS攻击，并给出从开发到部署的完整防御方案。
XSS介绍
XSS概念
XSS（跨站脚本攻击），是一种通过将恶意脚本注入到 trusted 的、本该安全的网页中，并在用户浏览器中执行这些脚本的攻击方式。 核心危害：XSS攻击的终极目标是用户，而非服务器本身。攻击者可以利用XSS实现：
盗取用户Cookie：获取用户会话ID，直接登录其账户。发起伪造请求：以用户身份执行任意操作，如转账、发帖、修改密码。键盘记录：监听用户的键盘输入，盗取敏感信息。钓鱼欺骗：伪造登录弹窗，诱使用户输入账号密码。破坏页面结构：篡改网页内容，进行恶意引流或破坏。
一个常见的误解是：XSS需要攻击者“入侵”Web服务器。事实上，大多数XSS漏洞是因为应用程序将用户可控的、未经验证或转义的数据，直接发送给了浏览器。
XSS攻击的原理与产生条件
核心原理：数据被错误地当成了代码执行。 当应用程序将用户输入（包含恶意JavaScript代码）直接拼接进HTML页面，或者传递给某些支持执行JavaScript的Sink（接收器）时，浏览器无法区分这些内容是可信的数据还是恶意的代码，从而执行了攻击者的脚本。 产生条件（三者缺一不可）：
存在输入点：网站存在一个可供用户提交数据的入口（如评论框、搜索框、URL参数、表单域）。缺乏安全处理：后端或前端程序没有对这些输入进行充分的过滤、验证或转义。有输出点：应用程序将未处理的数据直接嵌入到HTML页面中。
XSS攻击的三种主要类型
1. 反射型XSS（非持久型）
特点：恶意脚本“反射”自当前HTTP请求中，通常通过URL参数传递。它不存储在服务器上，需要诱骗用户点击一个精心构造的链接。攻击流程：
攻击者构造一个恶意URL：http://victim-site/search?keyword=通过邮件、聊天工具等诱骗用户点击。服务器接收到keyword参数，未加处理就直接将其嵌入到返回的HTML页面中。用户浏览器收到响应，解析出恶意用户点击后，页面会弹窗。在实际攻击中，这里的脚本可能是盗取Cookie的代码。
2. 存储型XSS（持久型）
特点：这是最危险的XSS类型。恶意脚本被永久存储在服务器上（如数据库、文件系统）。每当其他用户访问包含该数据的页面时，脚本就会被自动加载和执行。攻击流程：
攻击者在有存储功能的地方（如论坛帖子、评论区、昵称字段）提交一段恶意脚本。服务器未经处理将其保存。当任何普通用户浏览到该帖子或看到该评论时，恶意脚本从其浏览器中执行。 实战模拟（一个评论系统）：
后端代码（错误示范）：// 假设评论已存入数据库
const comments = [...];
app.get('/news/:id', (req, res) => {
// ... 获取新闻
let html = `
${news.title}
`;comments.forEach(comment => {
// 危险！直接输出评论内容
html += `
});
res.send(html);
});
攻击者提交评论：此后，所有访问该新闻页面的用户，其Cookie都会被悄无声息地发送到攻击者的服务器。
3. DOM型XSS
特点：漏洞的根源完全在前端JavaScript代码。服务器返回的响应是正常的，但客户端的JS代码不安全地处理了数据（如URL片段#后的参数），并通过innerHTML、document.write()等DOM操作API将其写入页面，导致了脚本执行。攻击流程：
用户访问一个正常URL：http://victim-site/welcome#username=Alice页面中的JS代码从location.hash中提取username，并使用innerHTML将其显示在页面上。攻击者构造恶意URL：http://victim-site/welcome#username=用户点击该链接后，前端JS将username的值作为HTML解析，触发了onerror事件中的恶意脚本。 实战模拟：
前端代码（错误示范）：
攻击URL：http://victim-site/page.html#
如何系统性地防御XSS
防御XSS需要一个多层次、纵深防御的策略。
1. 对输出进行编码/转义
原则：在任何不可信的数据被插入到HTML文档的不同位置时，都必须进行相应的编码。
HTML内容编码：当数据放在HTML标签之间或属性值时。
使用库函数进行转义：
& -> &< -> <> -> >" -> "' -> ' 示例（Node.js使用escape-html）：const escapedData = escapeHtml(userInput);
res.send(`