Hebikuzure's Tech Memo

2014年5月27日

Fiddler を利用したモジュール置き換えデモの解説

Filed under: Internet Explorer — hebikuzure @ 3:06 PM

Fiddler でモジュール入れ替えテストを手軽に
http://www.slideshare.net/hebikuzure/fiddler-autoresponder


先日 (5/23) の「第5回 HTML5ビギナーズ(jQueryをやります!)」で「Fiddler でモジュール入れ替えテストを手軽に」というライトニング トークを行いました。その際に実施したデモの手順を解説したいと思います。

ライトニング トークのスライドはこちらからご覧いただけます

デモの内容の概要は、Fiddler の AutoResponder 機能を利用して、Web サイトの特定のコンテンツを別の物に差し替えてクライアント (ブラウザー) に渡すというもので、今回の場合は jQuery を異なるバージョンに置き換えました。それでは実際のデモ環境の作成と、デモの手順を説明しましょう。

環境の作成

デモ環境は、Windows クライアントに Fiddler をインストールするだけです。Fiddler は以下のページから最新版をダウンロードしてインストールします。

Fiddler の動作には .NET Framework が必要なので、インストール済みの .NET Framework がある場合はそれにあわせて Fiddler4 または Fiddler2 をダウンロードします。なお Windows 7 には .NET Framework 2.0 を含む 3.5.1 が、Windows 8 には .NET Framework 4.0 を含む 4.5 が、Windows 8.1 には .NET Framework 4.0 を含む 4.5.1 含まれています。

アルファバージョンの mono 版もあり、Linux や MacOS にもインストール可能ですが、まだ動作が安定しておらず機能も十分でないようなので、実験的に試す場合以外はお勧めできません。Linux や MacOS の場合は、modern.IE からダウンロードできる IE テスト用仮想マシンを利用して、その上に Fiddler をインストールするのが良いでしょう。

なお Windows 8 / 8.1 を利用する場合、イマーシブ モード (元 Metro、スタート画面の、とも言います) の Internet Explorer (IMIE) や、拡張保護モードが有効なデスクトップ版の Internet Explorer は、そのままでは Fiddler を利用できません。これは、それらの Internet Explorer は AppContainer と呼ばれる一種のサンド ボックス内で動作しており、AppContainer 内のアプリは既定では Loopback (Lochalhost、127.0.0.1) にアクセスできないという制限が付けられているためです。
Windows 8 / 8.1 で試す場合は、Internet Explorer 以外のデスクトップ版ブラウザーを利用するか、または Internet Explorer の拡張保護モードが有効の場合は無効に設定変更してから実行しましょう。拡張保護モードは [インターネット オプション] の [詳細設定] タブから変更できます。

epm

拡張保護モードが有効だった場合は、テストが終わったら有効に戻しておくことをお勧めします。拡張保護モードによってより強力なセキュリティ上の保護が得られます。
また Fiddler に付属している AppContainer Loopback Exemption Utility を利用して、AppContainer 内のアプリに対して Loopback へのアクセスを許可するよう構成することもできます。

デモの実行

デモではテスト サイト (http://ammay23.azurewebsites.net/) を利用しました。このサイトは Microsoft Azure の無料の Web サイト プランで5分位で作成したものですが、他の jQuery を使っているサイトでも同様のテストが可能です。

デモは以下の手順で実行できます。

  1. 置き換えるコンテンツを用意します
    今回はサーバーから提供される jquery.min.js (バージョンは 1.11.1) を jquery-2.1.1.min.js に置き換えたいので、jQuery のサイトからダウンロードしてローカルに保存しておきます
  2. Fiddler を起動します
    起動するとすぐに HTTP トラフィックのキャプチャが開始され、左側のペインにセッション リストが表示されます
  3. Fiddler のウィンドウの右下、[Capturing] (キャプチャ中) の表示の隣をクリックし、[Web Browsers] を選択しておきます。
    fiddler01
    これでブラウザー以外のアプリケーションからのトラフィックはキャプチャされなくなります。
  4. Ctrl + x を押していったんセッション リストをクリアします
  5. ブラウザーでテスト サイトを開きます
    Fiddler にはテスト サイトへのアクセスが記録されます
  6. Fiddler のウィンドウの右下の [Capturing] をクリックして、いったんキャプチャを停止します
  7. ここで開いた Web ページの [Show jQuery version] をクリックすると、以下のように 1.11.1 が表示されます
    キャプチャ
  8. ページのソースを確認すると、
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    となっています
  9. Ctrl + f を押して検索ダイアログを呼び出します
    今回は jquery.min.js を置き換えたいので、[Find] 欄に jquery.min.js と入力し、[Find Sessions] をクリックします
    fiddler02
  10. jquery.min.js を取得しているセッションがハイライトされます
    fiddler03
  11. 見つかったセッションをクリックして選択し、右側のペインで [AutoResponder] タブをクリックします
    [AutoResponder] タブに切り替えたら、[Enable automatic responses] と [Unmatched requests passthrough] にチェックを入れます
    fiddler04
  12. [Add Rule] をクリックします
    下の方の [Rule Editor] 欄が利用可能になります。上のボックスに置き換えたいリソースのセッションにマッチする条件を指定します。今回は jquery.min.js を別の内容に置き換えたいので、以下のように “jquery.min.js” だけ残しておけば良いでしょう。
    fiddler05
    ※ ここでは正規表現を含む複雑なマッチ条件を記述可能です
    右側の Test… をクリックすると、入力したパターンが選択中のセッションにマッチするか確認できます
  13. 下のボックスで置き換えるコンテンツの取得先を指定します。
    今回はローカルに保存した jquery-2.1.1.min.js を指定しますので、ドロップダウンから [Find a file…] を選択し、保存したファイルを選択します
    fiddler06
  14. [Save] をクリックすると、AutoResponder が記録され、有効になります
  15. Fiddler の右上にある [Clear Cache] キャプチャ2をクリックして Internet Explorer のキャッシュを削除します
    ※ Internet Explorer 以外のブラウザーを使う場合は、それぞれのブラウザーの方法でキャッシュをクリアします
  16. Fiddler のウィンドウの右下 (最初に [Capturing] と表示されていた場所) をクリックして、キャプチャを再開します
  17. ブラウザーに戻って、F5 を押すなどしてテスト サイトのページを更新します
  18. ここで開いた Web ページの [Show jQuery version] をクリックすると、以下のように 2.1.1 が表示されます
    キャプチャ3
  19. ページのソースを確認すると、
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    となっており、最初と変わらないことが確認できます

以上、勉強会当日のデモ手順でした。

Fiddler についてはライトニング トークのスライドにも書いていますが、「実践 Fiddler」(https://www.oreilly.co.jp/books/9784873116167/) が最良の解説書です。興味のある方はぜひこちらを読んで、さらに検証や開発に役立ててください。

広告

1件のコメント »

  1. […] Fiddler を利用したモジュール置き換えデモの解説 […]

    ピンバック by yumechat荒らし対策 – ネットで卑怯なキチガイ共に迫害されて死んだキチガイの遺跡 — 2016年6月20日 @ 12:31 AM


RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。