一、引言

Web安全漏洞的发现和利用是一项繁重而费时的任务。古人云，工欲善其事，必先利其器。为了加快这些缺陷的定位过程，我们需要用到各种各样的工具和技术。本系列文章中，我们将向大家介绍一组工具，供各位作web安全研究的工具箱之用。

实际上，对于一些简单的Web缺陷，只要一个浏览器和一些细心就够了：我们可以在表单中输入一些测试值，然后观察返回的结果，我们就能快速的找到一些简单的缺陷。然而，如果我们使用Web 应用程序扫描器的话，可以为我们省下很多的时间，所以这些工具对于渗透测试而言，是非常有价值的。此外，这些工具所能做的通常不仅仅是定位漏洞，它们能做的事情还很多。本文将向读者介绍用于调试Web应用程序的利器：DOM查看器，它实际上是Firefox的一个扩展。

二、DOM查看器

近几年来，Web 应用程序已经从HTML和服务器端脚本的组合发展成为成熟的的程序，它甚至让一些桌面应用程序自叹不如。作为推动Web 应用程序快速成长的核心技术之一的AJAX，为开发人员创建基于 Web 的文字处理软件、日历、协作系统、桌面和Web窗口部件提供了极大的帮助。然而，随着这些日渐复杂的应用程序程序的流行，各种新的安全缺陷所带来的威胁也随之而来，如XSS安全漏洞等。因此，对强大的Web 应用程序调试器的需要也就摆在了我们的面前。

桌面应用开发人员和安全研究人员早就开始使用各种像IDA Pro、OllyDbg和GDB之类的调试器来研究恶意软件、考察保护方案以及定位二进制软件中的漏洞等；然而，这些调试器却无法用于调查Web 应用程序。虽然Web 应用程序调试器的总体功能是一致的，它们都是用来定位缺陷所在位置的，但是使用的方法却有所不同。Web应用程序调试器所要做的不是去检查汇编代码，而是去管理一组复杂的相互关联的脚本、Web页面和源。

在进行安全审计时，第一步就是要了解HTML结构(DOM)是如何改变的，这就要用到DOM查看器这个Firefox扩展，也是本文要讲解的工具：DOM查看器。这里，我们将向大家介绍如何用它来探索文档对象模型(DOM)，如何按照我们的需要动态修改应用程序。

三、安装DOM查看器

如果您在 Firefox 的“工具”菜单中看不到“DOM 查看器”选项，那么您需要重新安装 Firefox 来获得 DOM 查看器。读者请放心，重新安装 Firefox 并不会影响您现有的书签，设置，扩展以及用户脚本。安装过程如下所示：

运行 Firefox 的安装程序，当询问安装类型时，请选择自定义安装，如下图所示：

图1  选择自定义安装

单击“下一步”，在接下来出现的“选择可选组件”窗口中，请勾选“DOM查看器”复选框，如下图所示：

图2  选择“DOM查看器”组件

接下来安装默认设置安装就可以了。在安装结束之后，运行 Firefox，现在我们将会在工具菜单下看到 DOM 查看器。如下图所示：

图3  DOM查看器的界面

四、DOM查看器的界面

当我们使用Web浏览器打开一个网页时，浏览器首先会发送请求到服务器下载有关的网页文件，下载后，浏览器不是直接把把这些文件翻译成我们平时看到的超文本格式，而是调用内置的解释器，在内存中把文档生成为一个DOM对象树，再通过这个对象翻译成超文本格式。当然，由于不同的浏览器由于技术与对标准的支持不同，生成的 DOM树也不尽相同。如果网页中有操作DOM对象的相关脚本代码，浏览器就会按照脚本更新DOM树。

首先在用浏览器打开Gmail的首页，然后在工具菜单栏中选择DOM查看器，或者使用快捷键按Ctrl+Shift+I就可以打开DOM查看器，如图3所示。

我们看到，DOM查看器的主窗口由四部分组成，最上面的部分显示的是菜单栏和地址栏，我们在地址栏输入网页的url来打开其DOM结构。在中间部分的左窗口您会看到 DOM 节点的列表。如果不能看到列表，打开左上角的下拉菜单，选择 DOM Nodes。通过这个下拉菜单，我们可以选择想要浏览哪些类型的结构：CSS、DOM 、JavaScript 对象，如下图所示：

图4  选择要查看的结构类型

而右边窗口显示的是相应节点的信息。如果您是一位版面设计人员，那么您很可能对各个CSS属性感兴趣，如果您是一位Web开发人员或者安全研究人员，那么您很可能会对实际的JavaScript表示感兴趣，您可以随意选择。通过在不同的窗口之间进行切换，我们能以清晰的方式浏览应用程序的各HTML 结构，我们就再也不会迷失在凌乱不堪的HTML、CSS 或者JavaScript代码中了。在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] 【注：已用“[]”替换“<>”】 

八、小结

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

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