Web黑客工具箱：DOM查看器的使用介绍

　　五、浏览节点

　　在 DOM 查看器的左侧窗口中，DOM 的树状列表从 document 节点开始，标记为 #document。展开此节点，可以看到 HTML 节点。展开 HTML 后可以看到两个节点：HEAD和 BODY。注意，单击节点右边的加号可以进一步展开节点，单击节点右边的减号则可以折叠该节点。

　　当我们选择某个节点，比如BODY节点中的TABLE节点，如下图5所示，这时在访问页面上 (在DOM查看器窗口的下方)， TABLE元素将会闪现红色的边框。在DOM查看器的右侧窗口中，您将会看到这个节点的名称、名称域的URI、节点类型以及节点值等信息。

　　图5 查看节点信息

　　在DOM查看器中，我们不仅可以查看有关节点的信息，还可以进行更多的操作。例如，选择一个结点后，我们可以将其复制并粘贴到其他地方;我们还可以并阅读组成该结点的XML代码，或者亮显示HTML 页面中的各种元素，等等。所有这些操作都可以在DOM查看器的上下文的菜单中完成，要想调出该菜单，只需在某节点上单击右键即可，所以非常方便，下图显示了节点的上下文的菜单。

　　图6 DOM查看器的上下文菜单

　　细心的读者可能已经注意到，在右侧窗口的顶部也有一个下拉菜单，在这个菜单中，您会看到一些选项：DOM Node， Box Model， XBL Bindings， CSS Style Rules， Computed Style， 以及 Javascript Object。这些选项提供了一些当前被选中节点的信息。这些信息中的一部分是可以编辑的，而且编辑后产生的变化会立即反映到原来的访问页面中。选择 Javascript Object 查看TABLE节点所有可以用脚本编辑的属性和方法，如下图：

　　图7 查看TABLE节点所有可以用脚本编辑的属性和方法

　　当我们选择 CSS Style Rules时，右侧的窗口将会变成两个子窗口。顶部的子窗口列出了所有可以作用于这个元素的样式(包括浏览器中已有的默认样式)，下面的子窗口显示的是被这些样式所定义的属性，如下图所示：

　　图8 查看元素的样式及其属性

　　六、修改节点

　　下面以一个实例来解释如何使用DOM查看器来修改节点的属性。请打开页面http://developer.51cto.com/art/200810/93622.htm，然后打开DOM查看器，选中如下图所示的节点：

　　图9 选择一个节点

　　选择上图所示的节点后，在访问页面上 (在DOM查看器窗口的下方)，相应的元素将会闪现红色的边框。在DOM查看器的右侧窗口中，在下拉菜单中选择“CSS Style Rules”，这时右侧的窗口将会变成两个子窗口，请在顶部的子窗口中选择这个元素的第三条样式，下面的子窗口显示了这个样式所定义的属性。我们在此双击“height”属性，弹出修改属性值的“编辑样式规则”对话框，如下图所示：

　　图10 修改属性值

　　我们在此输入“66px”，单击“确定”按钮。这时，DOM查看器下面的页面会立即反映出来，如下图所示：

　　图11 修改属性值后页面的变化

　　对于安全研究人员来说，最重要的是了解如何浏览JavaScript DOM结构。这是因为开发人员经常附加一些定制的事件、方法和变量给这些元素，这些能够揭示应用程序的工作机制。有了DOM查看器，我们就可以考察Web应用程序中函数的调用情况，以及事件情况，等等。下图展示的是某页面中的iframe的DOM方法：

　　图12 查看iframe节点

　　图12中的所有函数都是单独显示的，如果这个iframe对于该应用程序的工作流程非常重要的话，我们就可以用利用我们自己的函数将原函数换掉一些，来实际测试一下Web应用的内部结构。举例来说，一个经过修改的函数可以用于嗅探某些事件，并在这些事件发生时触发某些动作。当然，这也可以通过手工方式完成，比如使用某种Web 应用程序测试代理(例如Burp)来手动修改响应数据，但是DOM查看器能够实现该过程的自动化。因此，我们再也不必亲手拦截、修改、传递目标函数的每一个Web请求了。

　　七、表达式求值

　　DOM查看器具有一个有用的功能，称为表达式求值，它能利用一些JavaScript表达式来深入了解web应用程序的结构。在中间的右窗口中的JavaScript对象上单击右键，在弹出的快捷菜单中选择“运行JavaScript…”菜单项，将出现如下图所示的“Evaluate Expression”对话框：

　　图13 Evaluate Expression 对话框

　　如果我们想要替换来自Web应用程序内部一个iframes的referrer参数时，可以在“Evaluate Expression ”对话框中输入以下代码：

target.referrer = 'http://evil/?[script]alert(\'xss\')[/script]'
【注：已用“[]”替换“<>”】

　　这个表达式将用我们提供的值把iframe的referrer参数值替换掉。应用该表达式之后，将来只要调用iframe时，提供的referrer的值都将会是：

http://evil?[script]alert(‘xss’)[/script]
【注：已用“[]”替换“<>”】

　　这种快捷的修改方法可能在服务器日志或者其他任何referrer字段未经消毒处理的地方发动XSS攻击。

　　八、小结

　　DOM查看器是Web安全人员调试Web应用时的一个方便的工具，利用它我们不仅可以查看页面的各种元素，并可以方便地进行修改，此外，我们还可以通过其提供的表达式求值进行XSS测试。