关于DOM型XSS的深入解析（收藏）

0x00 话题前景

很多初次接触xss的小白，尽管知道xss的三种分类，但是在DOM型xss还是存在理解上的不足，这篇文章希望能帮助到更好的理解DOM型xss。

0x01 什么是DOM？

简单来说DOM文档就是一份XML文档，当有了DOM标准之后，DOM便将前端html代码化为一个树状结构，方便程序和脚本能够轻松的动态访问和更新这个树状结构的内容、结构以及样式，且不需要经过服务端，所以DOM型xss在js前端自己就可以完成数据的输入输出，不与服务器产生交互，这样来说DOM型xss也可以理解为反射性xss。

下面看一个DOM将html转换为树状结构体，深入的理解DOM结构标准：

所以说DOM型xss可以在前端通过js渲染来完成数据的交互，达到插入数据造成xss脚本攻击，且不经过服务器，所以即使抓包无无法抓取到这里的流量，而反射性与存储型xss需要与服务器交互，这便是三者的区别。

0x02 理解DOM型xss案例

看一个经典的DOM型xss，不需要经过服务器前端js渲染即完成反射型DOMxss弹窗
有道翻译：https://fanyi.youdao.com/
poc：is here <script>alert('Gaobai文库')</script>

0x03 DOM型xss源码流程分析

首先输入普通的参数，查看前端源码，输入的参数没有任何的作用

首先通过<input id="text" name="text" type="text" value="">将我们输入的值赋予给text
随后var str = document.getElementById("text").value;取text的值赋予<a>标签中的href
赋值：document.getElementById("dom").innerHTML = "<a href='"+str+"'>what do you see?</a>";
最后达到值插入到 "<a href='"+str+"'>的href中，这里便可以构造闭合使插入的值生效，随后前端js解析代码，造成xss，这便形成不经过服务器前端完成数据交互解析的DOMxss。

下面来看看整个数据交互的流程

这里我们构造poc产生闭合：'onclick="alert('xss')">
前端js渲染过程在赋值处理中造成闭合形成一个新的标签再次解析，从而导致xss弹窗

0x04 XSS的防范

XSS防范的总体思路：对输入(和URL参数)进行过滤，对输出进行编码。