Web黑客工具箱之FireBug：洞悉复杂Web应用

　　Firefox扩展Firebug是一个全功能的Web 应用程序调试器，可以协助Web黑客洞悉复杂的Web 应用程序的内部工作机制。它有两种版本：一种可以跨浏览器使用的组件Firebug Lite，另一种是专用于专用于火狐浏览器的扩展Firebug。本文将着重向读者介绍前者的用法。

　　一、简介

　　浏览器扩展Firebug提供了一个集成环境，我们能够在其中对感兴趣的Web 应用程序进行的全面的分析(参见图1)。它提供了许多功能，可以探索DOM结构、动态地修改HTML 代码、跟踪和调试JavaScript代码、监视网络请求和响应等等。

图1 浏览器扩展Firebug

　　二、利用Firebug控制台劫持函数

　　Firebug控制台可以用来计算表达式。作用如同命令行JavaScript解释器。在控制台中，我们不仅可以输入JavaScript表达式(例如，Alert (‘Message’);)，而且还能接收错误消息。如下图所示：

图2 Firebug控制台

　　您也可以动态插入代码，举例来说，如果要测试一个Web 应用程序，该程序有一个从窗口对象导出的方法，称为performRequest。应用程序使用该方法从客户端发送请求到服务器。我们更感兴趣的可能是这个函数请求的信息，所以我们将在控制台中提供下列命令来劫持该方法：

　　window._oldPerformRequest = window.performRequest;

　　window.performRequest = function () { console.log(arguments);

　　window._oldPerformRequest.apply(window, arguments) }

　　上述代码实际上将用我们自己的函数替换原先的performRequest函数，我们的函数执行时将在控制台中列出所有参数。当函数调用结束时，我们将代码流程重定向到oldPerformRequest定义的原先的performRequest上，它将执行要求的操作。现在，我们已经明白如何在无需改写Web 应用程序的方法的情况下来劫持函数。

　　二、利用Firebug浏览和动态修改HTML元素

　　许多Web开发人员和设计者经常忽视HTML 源代码的可读性，尤其是用所见即所得的编辑器产生的页面。这会加剧我们审查其源代码的难度，这时，我们就需要使用其他一些工具来重新组织页面的各个部分。当然，我们可以使用DOM Inspector来探索这些结构欠佳的HTML 源代码，而Firebug也能达到同样的目的，下面是Firebug的HTML视图。

图3 Firebug的HTML视图

　　如图3所见，可以选择并展开当前视图中的每个HTML 元素。当鼠标停在某个元素上的时候，浏览器就会高亮显示对应元素。在右边的窗口，显示了关于式样、布局和DOM 特性的信息。DOM信息极为有用，当您想查询各种不同类型的属性可用时，几乎与DOM Inspector一样。此外，我们也可以用它探索应用程序运行机制。举例来说，AJAX应用开发人员经常会为图像、链接及其他类型的html 元素添加附加的属性，而这些属性和方法可能是应用程序逻辑的关键部分。

　　HTML视图还能用于动态地修改应用程序文档的结构。我们可以通过按下键盘上的删除键来删除所选定的元素，或者修改各个元素的属性，方法是在元素属性上双击并设置它的值。注意，HTML 结构的改变可能对页面更新事件不起作用。如果希望变化固定下来，可以使用GreaseMonkey脚本。

　　三、利用Firebug调试JavaScript脚本

　　Ajax 应用程序通常涉及JavaScript、XML和按需信息检索。它们的规模常常超过正常应用程序，并且运行起来很像是桌面应用程序。因为大量使用JavaScript，所以您将发现标准漏洞估计程序将无法覆盖所有可能的攻击方式。就像二进制程序测试一样，我们需要使用调试器来跟踪代码、分析程序结构和调查潜在的问题，Firebug为我们提供了所有这些功能，下图向我们展示了Firebug脚本调试器视图。

图4 Firebug脚本调试视图

　　在图4中我们可以看到一个断点，其位于第2行。 断点是些伪指令，用来通知JavaScript解释器当代码抵达这些断点时停止/中止该进程。一旦程序暂停，我们就可以查看存放在全局、局部变量中的当前数据，甚至更新它们。我们不仅可以通过它来了解程序正在干什么，并且还能取得对应用程序的完全控制。

　　在图4的右边，您可以看到监视和断点列表。断点列表包含我们在当前调试的代码中设置的全部断点。您可以迅速禁用和启用断点，但是却无需知道断点的精确位置。

　　监控列表提供了一个机制来监视DOM结构中的变化。举例来说，如果想知道某个的值在程序运行过程中的变化情况，只须简单创建一个相应的的监控条目即可。

　　四、利用Firebug操作DOM对象

　　DOM是存放Web 应用程序的内容的地方。DOM结构提供了动态编辑页面的所有必要功能，比如去除和插入html 元素、初始化计时器、创建和删除Cookie等等。DOM 是所有的Web 应用程序最为复杂的组件，所以对它的检查也是最难的。然而，Firebug 能够提供有用的DOM 视图，它的使用跟DOM Inspector一样。图5展示了Firebug的DOM 视图。

图 5 Firebug的DOM视图

　　如上图所示，DOM包含一个长长的元素表。我们可以查看当前可用的一些函数。通过使用Firebug的DOM 视图，我们可以检查当前打开的应用程序的各个部分。我们可以在一个树状结构中查看当前可用的所有属性和对象，并可以展开这些元素和对象来查看他们的子属性。

　　五、利用Firebug监视网络

　　Firebug最强大的的特性之一是网络流量监控功能。当我们想要监视应用程序内部发出的Web请求时，这个视图极为有用。当然，LiveHttpHeaders扩展也可用来监视网络，但是它会把全部请求显示在一个列表中，而Firebug却可以详细查看每个请求的每个字符。

图6 Firebug的网络视图

　　在网络视图的顶部，我们可以选择不同类型的网络活动，在上图中我们要查看所有请求。 然而，您可以只列出特定对象发出的请求。Firebug一个更为有趣的特性是该扩展将会记录全部网络活动，不管它是否打开。这个特性跟扩展LiveHttpHeaders有所不同，后者只有当它打开时才会记录网络事件。然而，与LiveHttpHeaders扩展不同的是，Firebug不能重放网络活动，但是将能更细致的观察网络流量。下图展示了Firebug正在检查请求和响应头以及发送的参数。

图7 利用Firebug查看网络请求

　　六、Firebug Lite简介

　　Firebug Lite是一个跨浏览器的组件，能够轻易地嵌入到需要测试的应用程序中它是专为开发人员而非安全研究人员设计的，并且没有Firefox扩展版本那样多的用途。然而，它在某些情况下是非常有帮助的，比如需要在Internet Explorer、Opera及其他不支持Mozilla平台的跨平台安装(XPI)型文件的浏览器中调试应用程序时。

　　使用firebug lite之前，必须在需要调试的应用程序内嵌入一些脚本标签。我们必须在使用FireBug的应用程序页面内放入下列脚本标签：

　　要跟踪应用程序中的某个变量时，可以使用控制台对象。举例来说，如果我们想要跟踪下列循环中变量item的变化，可以使用下列代码：

　　function (var item in document)

　　console.log(item);

　　七、结束语

　　Firefox扩展Firebug是一个全功能的Web 应用程序调试器，可以协助Web黑客洞悉复杂的Web 应用程序的内部工作机制。本文详细介绍了在安全测试过程中的使用方法，如劫持函数、浏览和动态修改HTML元素、操作DOM、监视网络以及调试脚本等等。最后，我们还对Firebug Lite做了简要介绍。