|
图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结构中的变化。举例来说,如果想知道某个的值在程序运行过程中的变化情况,只须简单创建一个相应的的监控条目即可。
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的应用程序页面内放入下列脚本标签:
language="javascript" type="text/javascript"
src="/path/to/firebug/firebug.js">
|
要跟踪应用程序中的某个变量时,可以使用控制台对象。举例来说,如果我们想要跟踪下列循环中变量item的变化,可以使用下列代码:
function (var item in document) console.log(item);
|
七、结束语
Firefox扩展Firebug是一个全功能的Web 应用程序调试器,可以协助Web黑客洞悉复杂的Web 应用程序的内部工作机制。本文详细介绍了在安全测试过程中的使用方法,如劫持函数、浏览和动态修改HTML元素、操作DOM、监视网络以及调试脚本等等。 最后,我们还对Firebug Lite做了简要介绍。
原文:http://number23.iteye.com/blog/344640
分享到:
相关推荐
1. **Firebug功能详解:** - **HTML检查**:Firebug可以让你实时查看和修改页面的HTML结构,直观地看到元素的添加、删除或更改对页面布局的影响。 - **CSS调试**:通过Firebug,开发者能够查看和修改页面上的CSS...
- **firebug-1.6.2.xpi**:这是Firefox浏览器的扩展文件,包含了Firebug 1.6.2的全部代码和资源,用户可以通过安装此文件在Firefox中启用Firebug功能。 - **西西软件站.txt**:这可能是一个文本文件,提供了关于在...
值得注意的是,随着技术的发展,Firefox 自身的开发者工具得到了极大的增强,许多 Firebug 的功能已经被内置,而 Firebug 项目在 2018 年正式停止更新。现在,开发人员通常会使用 Firefox 的现代开发者工具进行前端...
用户只需将这个XPI文件拖放到Firefox浏览器窗口上,或者通过"about:addons"页面进行手动安装,就能在浏览器中启用Firebug功能。 Firebug 1.5X.4的主要特点和功能包括: 1. **HTML调试**:查看和编辑网页的HTML结构...
要关闭对特定网站的Firebug功能,需要在主菜单中选择“Disable Firebug for xxxxx”。 ### Firebug控制台 Firebug控制台包含两个主要区域:功能区和信息区。功能区的标签(如HTML、CSS、Script等)决定了信息区...
4. **Firebug功能区和信息区** - 功能区包括不同的标签,如"HTML"、"CSS"、"Script"、"DOM"等,切换标签可以查看和操作相应的内容。 - 信息区根据所选功能区标签展示详细信息,例如HTML源代码、CSS样式、脚本执行...
4. 学习曲线:Firebug功能丰富,初学者可能需要时间熟悉各项工具,建议多做实践并查阅相关教程。 5. 切换视图:根据需求切换不同的面板(如HTML、CSS、Script等),以便针对性地进行调试。 6. 使用快捷键:掌握...
2. **Firebug功能详解**: - **HTML查看与编辑**:Firebug可以在页面元素上点击,实时查看其HTML结构,并可直接编辑,实时预览效果。 - **CSS调试**:显示页面的CSS样式,包括内联样式、外部样式表和浏览器默认...
下载这个最新版的目的是确保用户能够使用到最稳定、最强大的Firebug功能。 描述中提到的“火狐浏览器js插件firebug最新版下载包”,意味着包含有所有必要的文件,供用户下载并安装到他们的Firefox浏览器中。这个...
Firebug功能 你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。而且可以在线的时候修改dom非常弹大的插件. 用Firebug Firefox 组成最强大的网页调试工具。 文件的扩展外是 xpi 直接拖入到 FireFox...
压缩包中的“firebug-1.9.1-fx.xpi”是Firebug 1.9.1的安装文件,用户可以通过在Firefox中安装这个扩展来启用Firebug功能。“Firefox Setup 11.0.exe”是Firefox 11.0的安装程序,用于在用户的计算机上安装Firefox...
3. Firebug功能: - HTML检查:查看和编辑HTML元素,实时查看更改的效果。 - CSS调试:查看和修改页面样式,查找样式冲突。 - JavaScript调试:设置断点,单步执行,查看变量值,调试脚本错误。 - DOM检查:查看...
用户只需下载此文件,然后在Firefox中通过"about:debugging"页面手动安装,即可启用Firebug功能。 另一方面,FirePath是一款与Firebug紧密配合的XPath(XML路径语言)工具,专用于帮助开发者查找和测试XPath表达式...
用户可以通过在Firefox中安装这个文件来添加FireBug功能。早期版本可能不包含所有新功能,但对于学习基础调试技巧仍然足够。 总的来说,FireBug是Web开发中不可或缺的工具,它的出现极大地推动了前端开发的效率。...
4. **Firebug功能区和信息区** - 功能区提供了不同的标签,如HTML、CSS、Script、Console等,切换标签可以查看不同方面的信息。 - 信息区显示对应标签的相关内容,例如HTML标签结构、样式信息、脚本执行情况和...
这意味着用户可以在这个版本的浏览器上享受完整的Firebug功能,同时利用Firepath的强大定位能力,为Selenium测试提供便利。 安装和使用这两个插件的步骤如下: 1. 下载.xpi文件(在本例中为"firebug-firepath")。 ...
描述中提到,“Fire fox47.0.1为火狐的低版本”,这是指这个版本是Firefox历史上的一个早期版本,对于那些依赖Firebug功能的开发者来说,它是兼容的。"安装后记得关闭firefox的自动更新"是因为如果开启自动更新,...
用户可以通过在Firefox中安装这个.xpi文件来添加Firebug功能。 **总结** 总的来说,"firefox和firebug"的主题涵盖了Web开发中的关键工具和技术。Firefox作为一款强大的浏览器,其开发者工具和Firebug扩展极大地...