深度探讨隐藏在你代码中的漏洞：变异型跨站脚本（mXSS），从零基础到精通，收藏这篇就够了!

各位靓仔靓女，今天咱们聊点刺激的！都知道网络安全这行水深火热，但你绝对想不到，就连XSS这种“老炮儿”级别的漏洞，都能玩出新花样！别眨眼，带你揭秘代码里的“变形金刚”——变异型跨站脚本（mXSS）！

啥是XSS？简单说，就是坏人往你网页里塞点恶意代码，你用户一访问，嘿，中招了！轻则被偷窥隐私，重则账号被盗，想想都可怕！

反射型、存储型、通用型，XSS家族人丁兴旺。但最近，mXSS异军突起，专挑DOMPurify、Mozilla bleach、Google Caja这些“数据清洗大师”下手，连Google搜索都栽了跟头！

故事的开始：你以为的安全，只是你以为

作为一名有追求的Web开发者，你肯定给自家应用装了数据清洗工具，想把XSS拒之门外。但理想很丰满，现实很骨感！HTML这玩意儿，复杂程度超乎你想象，各种元素、属性，排列组合一下，就能让你的清洗工具瞬间懵逼！

HTML：一个“容错率”超高的老好人

为啥HTML这么容易被搞事情？因为它太“宽容”了！就算你代码写得稀烂，它也尽量给你显示出来，生怕你看不见。

举个栗子，你写了个<p>test，少了闭合标签</p>，浏览器照样给你解释，还偷偷帮你补全了！

为啥要这么宽容？

可访问性： 互联网要服务所有人，不能因为一点小错误就把用户拒之门外。

灵活性： 程序员水平参差不齐，总有人会犯点小错误。

向后兼容性： 老网站也要活下去啊！

问题来了，浏览器咋知道该咋“修复”你的代码？<a><b> 到底是 <a></a><b></b> 还是 <a><b></b></a>？

别慌，HTML有一套详细的规范，但架不住规范里也有模糊不清的地方，导致不同浏览器解析结果都不一样！

“变异”：躲过清洗的障眼法

重点来了！mXSS的“M”，指的就是“变异”。HTML解析过程中，任何对代码的修改，都算是一种变异。

比如：

修复错误标签（<p>test → <p>test</p>）

规范化属性引号（<a alt=test> → <a alt=”test”>）

重新排列元素（<table><a> → <a></a><table></table>）

……

mXSS就是利用这些“变异”，绕过数据清洗！

HTML解析：一场“七十二变”的大戏

不同的内容，不同的解析方式

HTML可不是铁板一块，它会根据内容类型，切换不同的解析模式。目前有七种：

void元素： 像area、br、img这些“自闭症”标签，不需要闭合。

模版元素： template，里面的内容一般不直接显示。

原始文本元素： script、style，里面的内容会被当成纯文本，不会被解析成HTML。

可转义的原始文本元素： textarea、title，和上面类似，但可以转义。

外部内容元素： svg、math，用来嵌入SVG和MathML。

明文状态： plaintext，后面的所有内容都会被当成纯文本。

普通元素： 除了上面这些，剩下的都是普通元素。

看个例子，你就明白了：

1、普通元素：

<div><a alt="</div><img src=x onerror=alert(1)>"></div>

2、原始文本元素：

<style><a alt="</style><img src=x onerror=alert(1)>"></style>

解析结果：

看到了没？div里的内容被当成HTML解析，a标签成功创建。而style里的内容被当成纯文本，a标签直接GG！

外部内容元素：SVG和MathML的“异次元空间”

HTML5引入了svg和math，它们有自己的命名空间，解析规则和普通HTML不一样。

还是上面的例子，套个svg的壳：

<svg><style><a alt="</style><img src=x onerror=alert(1)>"></svg>

这次，a标签又活了！因为在SVG命名空间里，style不再是“原始文本”元素，而是被当成普通元素解析。

注意： 坏人可以利用命名空间混淆，让数据清洗工具和浏览器对代码的理解产生偏差，从而绕过检测！

从“变异”到“搞事情”：mXSS的攻击姿势

解析器差异：你眼中的安全，只是假象

数据清洗工具和浏览器，用的解析器可能不一样。HTML解析太复杂，出现差异很正常。但坏人就喜欢利用这些差异搞事情！

比如，noscript元素：如果JS启用，里面的内容不显示；如果JS禁用，里面的内容才显示。

数据清洗阶段，JS肯定没启用。但到了浏览器渲染阶段，JS就启用了。这就可能导致绕过：

<noscript><style></noscript><img src=x onerror=”alert(1)”>

禁用JS：

启用JS：

解析往返：DOM树的“乾坤大挪移”

解析往返是指，HTML经过多次解析，DOM树可能会发生变化。

比如，form元素不能嵌套form元素。但可以这样：

<form id="outer"><div></form><form id="inner"><input>

第一个</form>被忽略，div和input会和内部的form关联。但如果把这个DOM树重新解析，内部的<form id="inner">会被忽略，input就会和外部的form关联！

坏人可以利用这个特性，在数据清洗工具和浏览器之间制造命名空间混淆，实现绕过：

<form><math><mtext></form><form><mglyph><style></math><img src onerror=alert(1)>

数据清洗：画蛇添足的反作用

有些数据清洗工具会把svg元素重命名为custom-svg，这会导致元素命名空间改变，反而可能导致XSS！

上下文相关：换个环境，结果大不同

HTML解析很复杂，在不同环境下结果可能不一样。比如，解析整个文档和解析片段，结果就不一样。

有些应用会清洗输入，但在嵌入页面时，会把它放到SVG里，这就改变了上下文，导致解析差异，最终绕过清洗器！

mXSS案例：Joplin的“电子危机”

Joplin是一款用Electron开发的笔记应用。由于Electron配置不安全，JS代码可以使用Node.js的内部功能，导致坏人可以在你的电脑上执行任意命令！

漏洞在于Joplin用的htmlparser2解析器，它不遵循HTML规范，更注重速度而不是准确性。

用下面的代码，就能让htmlparser2忽略命名空间：

虽然清洗器的解析器不会渲染img元素，但浏览器会渲染。坏人只需添加onerror事件，就能在你打开恶意笔记时，执行任意代码！

如何应对mXSS？

为了避免踩坑，开发者们可以参考以下建议：

客户端检查和清洗： 使用像DOMPurify这样的客户端清洗程序，避免解析器差异。

不要重新解析： 清洗后的DOM树直接插入文档，不要序列化和重新渲染。

编码或删除原始文本： 杜绝任何原始文本在清洗器阶段出现，防止被重新解析为HTML。

不支持外部内容元素： 删除svg和math元素，降低复杂性。

父命名空间检查： 删除位于错误命名空间中的元素，解决命名空间混淆问题。