Web黑客工具箱之FireBug：洞悉复杂Web应用(1) - 网络安全

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脚本调试器视图。