WEB駭客工具箱之FireBug介紹

標籤：c   style   class   blog   code   java   

Firefox擴充Firebug是一個全功能的Web 應用程式調試器，可以協助Web駭客洞悉複雜的Web 應用程式的內部工作機制。它有兩種版本：一種可以跨瀏覽器使用的組件Firebug Lite，另一種是專用於專用於Firefox瀏覽器的擴充Firebug。本文將著重向讀者介紹前者的用法。

一、簡介

瀏覽器延伸Firebug提供了一個Integration Environment，我們能夠在其中對感興趣的Web 應用程式進行的全面的分析（參見圖1）。它提供了許多功能，可以探索DOM結構、動態地修改HTML 代碼、跟蹤和調試JavaScript代碼、監視網路請求和響應等等。

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

Firebug控制台可以用來計算運算式。作用如同命令列JavaScript解譯器。在控制台中，我們不僅可以輸入JavaScript運算式(例如，Alert (‘Message’);)，而且還能接收錯誤訊息。如所示：

您也可以動態插入代碼，舉例來說，如果要測試一個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 原始碼的可讀性，尤其是用所見即所得 (WYSIWYG)的編輯器產生的頁面。這會加劇我們審查其原始碼的難度，這時，我們就需要使用其他一些工具來重新組織頁面的各個部分。 當然，我們可以使用DOM Inspector來探索這些結構欠佳的HTML 原始碼，而Firebug也能達到同樣的目的，下面是Firebug的HTML視圖。

3所見，可以選擇並展開當前視圖中的每個HTML 元素。當滑鼠停在某個元素上的時候，瀏覽器就會高亮顯示對應元素。在右邊的視窗，顯示了關於式樣、布局和DOM 特性的資訊。DOM資訊極為有用，當您想查詢各種不同類型的屬性可用時，幾乎與DOM Inspector一樣。此外，我們也可以用它探索應用程式運行機制。舉例來說，AJAX應用開發人員經常會為映像、連結及其他類型的html 元素添加附加的屬性，而這些屬性和方法可能是應用程式邏輯的關鍵區段。

HTML視圖還能用於動態地修改應用程式文檔的結構。我們可以通過按下鍵盤上的刪除鍵來刪除所選定的元素，或者修改各個元素的屬性，方法是在元素屬 性上雙擊並設定它的值。注意，HTML 結構的改變可能對頁面更新事件不起作用。如果希望變化固定下來，可以使用GreaseMonkey指令碼。

三、利用Firebug調試JavaScript指令碼

Ajax 應用程式通常涉及JavaScript、XML和按需資訊檢索。它們的規模常常超過正常應用程式，並且運行起來很像是傳統型應用程式。因為大量使用 JavaScript，所以您將發現標準漏洞估計程式將無法覆蓋所有可能的攻擊方式。就像二進位程式測試一樣，我們需要使用調試器來跟蹤代碼、剖析器結 構和調查潛在的問題，Firebug為我們提供了所有這些功能，向我們展示了Firebug指令碼調試器視圖。

在圖4中我們可以看到一個斷點，其位於第2行。 斷點是些偽指令，用來通知JavaScript解譯器當代碼抵達這些斷點時停止/中止該進程。一旦程式暫停，我們就可以查看存放在全域、局部變數中的當前 資料，甚至更新它們。我們不僅可以通過它來瞭解程式正在幹什麼，並且還能取得對應用程式的完全控制。

在圖4的右邊，您可以看到監視和斷點列表。斷點列表包含我們在當前調試的代碼中設定的全部斷點。您可以迅速禁用和啟用斷點，但是卻無需知道斷點的精確位置。

監控列表提供了一個機制來監視DOM結構中的變化。舉例來說，如果想知道某個的值在程式運行過程中的變化情況，只須簡單建立一個相應的的監控條目即可。

四、利用Firebug操作DOM對象

DOM是存放Web 應用程式的內容的地方。DOM結構提供了動態編輯頁面的所有必要功能，比如去除和插入html 元素、初始化計時器、建立和刪除Cookie等等。DOM 是所有的Web 應用程式最為複雜的組件，所以對它的檢查也是最難的。然而，Firebug 能夠提供有用的DOM 視圖，它的使用跟DOM Inspector一樣。圖5展示了Firebug的DOM 視圖。

如所示，DOM包含一個長長的元素表。我們可以查看當前可用的一些函數。通過使用Firebug的DOM 視圖，我們可以檢查當前開啟的應用程式的各個部分。我們可以在一個樹狀結構中查看當前可用的所有屬性和對象，並可以展開這些元素和對象來查看他們的子屬性。

五、利用Firebug監視網路

Firebug最強大的的特性之一是網路流量監控功能。當我們想要監視應用程式內部發出的Web請求時，這個視圖極為有用。當 然，LiveHttpHeaders擴充也可用來監視網路，但是它會把全部請求顯示在一個列表中，而Firebug卻可以詳細查看每個請求的每個字元。

在網路視圖的頂部，我們可以選擇不同類型的網路活動，在中我們要查看所有請求。 然而，您可以只列出特定對象發出的請求。Firebug一個更為有趣的特性是該擴充將會記錄全部網路活動，不管它是否開啟。這個特性跟擴充 LiveHttpHeaders有所不同，後者只有當它開啟時才會記錄網路事件。然而，與LiveHttpHeaders擴充不同的是，Firebug不 能重放網路活動，但是將能更細緻的觀察網路流量。展示了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做了簡要介紹。