firebug機能
5501 ワード
図1 ブラウザ拡張Firebug
二、Firebugコンソールハイジャック関数を利用する
Firebugコンソールを用いて式を計算することができます.命令行JavaScriptインタプリタのような役割をします.コンソールにおいては、JavaScript式だけでなく、エラーメッセージも受信できます.下図のように:
図2 Firebugコンソール
コードを動的に挿入することもできます.たとえば、ウェブアプリケーションをテストするなら、このプログラムはウィンドウオブジェクトから導出される方法があります.アプリケーションは、この方法を用いてクライアントから要求をサーバに送信する.私たちが興味を持っているのは、この関数が要求する情報かもしれないので、コンソールで以下の命令を提供してこの方法をハイジャックします.
window._oldPerformRequest = window.performRequest;
window.performRequest = function () { console.log(arguments);
window._oldPerformRequest.アプリply(window, arguments) }
二、Firebugを利用してHTML要素を閲覧し、動的に修正する
多くのWeb開発者と設計者は常にHTMLソースコードの読み取り可能性を無視しています.特に見たところ、すなわち得られたエディタで作成されたページです.これはソースコードを審査するのが難しくなります.この時、私たちは他のツールを使ってページの各部分を整理し直す必要があります.もちろん、DOM In スペシャル torを用いてこれらの構造が良くないHTMLソースコードを探索することができ、Firebugも同様の目的を達成することができ、以下はFirebugのHTMLビューである.
図3 FirebugのHTMLビュー
図3に示すように、現在のビューの各HTML要素を選択して展開することができます.マウスがある要素に止まると、ブラウザが表示されます.右のウィンドウには、仕様、レイアウト、DOM特性に関する情報が表示されます.DOM情報は非常に有用で、さまざまなタイプの属性を調べたい時には、DOM Inspectorとほぼ同じです.さらに、アプリケーションの動作メカニズムを探索するためにも使用できます.例えば、AJAXアプリケーション開発者は、画像、リンク、および他のタイプのhtml要素に追加的な属性を追加することがよくありますが、これらの属性と方法は、アプリケーションロジックの重要な部分かもしれません.
HTMLビューは、アプリケーションドキュメントの構造を動的に変更するためにも使用されます.選択した要素をキーボードの削除キーを押して削除したり、個々の要素の属性を変更したりすることで、要素属性をダブルクリックして値を設定することができます.なお、HTML構造の変更は、ページ更新イベントには役に立たない可能性があります.変化が固定されれば、Graease Monkey脚本が使えます.
三、Firebugを利用してJavaScriptスクリプトを調整する
Ajaxアプリケーションは、通常、JavaScript、XML、および必要に応じた情報検索に関する.それらの規模は通常のアプリケーションを超えており、デスクトップアプリケーションのように実行されています.JavaScriptを大量に使用しているので、標準的な脆弱性推定プログラムは可能な攻撃方法をすべてカバーできなくなります.バイナリプログラムテストのように、コード、分析プログラムの構造、潜在的な問題を追跡するためにデバッタを使用する必要があります.Firebugはこれらの機能をすべて提供してくれます.下図はFirebugスクリプトのデバッタービューを示しています.
図4 Firebugスクリプトのデバッグビュー
図4では、2行目に位置するブレークポイントが見られます.ブレークポイントは、コードがこれらのブレークポイントに到達したときに、JavaScript解釈器に通知するための擬似コマンドです.プログラムが一時停止されると、グローバル、ローカル変数に保存されている現在のデータを確認したり、更新したりすることができます.私たちはそれを通してプログラムが何をしているかを知ることができるだけでなく、アプリケーションの完全な制御を得ることもできます.
図4の右側には、監視と断点リストが表示されます.ブレークポイントリストには、現在のデバッグコードに設定されているすべてのブレークポイントが含まれます.ブレークポイントを素早く無効にしたり、有効にしたりできますが、ブレークポイントの正確な位置を知る必要はありません.
監視リストはDOM構造の変化を監視するメカニズムを提供する.例えば、プログラムの実行中の値の変化を知りたいなら、対応する監視項目を簡単に作成すればいいです.
DOMはWebアプリケーションの内容を格納する場所である.DOM構造は、html要素の除去や挿入、初期化タイマ、Cook 御。の作成および削除など、動的編集ページの必要なすべての機能を提供する.DOMはすべてのWebアプリケーションが最も複雑なコンポーネントであるため、そのチェックも最も難しい.しかし、Firebugは、DOM In スペシャル torと同様に、有用なDOMビューを提供することができる.【図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 E xp lorer、Operaおよび他のMoziaプラットフォームをサポートしていないクロスプラットフォームインストール(XPI)型ファイルのブラウザでアプリケーションをデバッグする必要があるときなど、非常に有用である.
firebug liteを使う前に、デバッグが必要なアプリケーションにスクリプトラベルを埋め込む必要があります.私たちはFireBugを使ったアプリケーションページに次のスクリプトラベルを入れなければなりません.
language="javascript" type="text/javascript"
src="/path/to/firebug/firebug.js">
function (var item in document)
console.log(item);
Firefox拡張Firebugはフル機能のWebアプリケーション・コーディネーターであり、ウェブ・ハッカーに協力して複雑なWebアプリケーションの内部作業機構を知ることができる.この論文では、ハイジャック関数、ブラウズおよび動的なHTML要素の変更、DOMの操作、監視ネットワーク、およびデバッグスクリプトなどのセキュリティテストにおける使用方法を詳細に紹介します.最後に,Firebug Liteについて簡単に紹介した.
http://number23.iteye.com/blog/344640