fiddlerでWEB通信のリクエスト内容を覗いてデバッグ

カテゴリー
fiddler Laravel Windows 開発環境

fiddlerとは

The free web debugging proxy for any browser, system or platform
( フリーのWEBデバッグプロキシで、様々なブラウザやシステム上で動作する )
https://www.telerik.com/fiddler より。

入手

https://www.telerik.com/fiddler

使い方

起動して、適当なWEBサイトにアクセスすると、リクエストと応答が覗けます。
HTTPSについて、一部後述。

応用01 localhostに対する通信のデバッグ

JavaScriptからローカル上のWEBサーバに通信する内容を覗く場合。
まずlocalhostをfiddlerのもとでは直接叩けない（下記のようなエラーになってしまう）

[Fiddler] DNS Lookup for "localhost" failed. System.Net.Sockets.SocketException そのようなホストは不明です。

これは、なぜかというと fiddler 自体が proxy で localhost を見ているため。

なので、fiddlerを経由するには ipv4.fiddler または ipv6.fiddler を叩く必要があります。
このための設定が Tools -> Host にあります。

Windowsの場合、開いたら青い文字で ImportWindowsHostsFile とあるため、
これをクリックして読み込むと自動で追記してくれます。
（下記例）

応用02 ローカルにバーチャルホストを建てて振り分けている場合。

実は応用01のfiddlerのhostsに記載すればバーチャルホストも叩けます。

バーチャルホストの設定も「hoge.ipv4.fiddler」で記述し、（下記例）

<VirtualHost *:80>
    ServerAdmin webmaster@hoge.ipv4.fiddler
    DocumentRoot "C:/htdocs/hoge/"
    <Directory "C:/htdocs/hoge/">
          Order deny,allow
          deny from all
          allow from 127.0.0.1 ::1 localhost
          Options Indexes FollowSymLinks Includes ExecCGI
          AllowOverride All
          Require all granted
    </Directory>
    ServerName hoge.ipv4.fiddler
    ServerAlias www.hoge.ipv4.fiddler
    ErrorLog "logs/hoge.localhost.com-error.log"
    CustomLog "logs/hoge.localhost.com-access.log" common
    <Files ".ht*">
          Require all denied
    </Files>
</VirtualHost>

先述のfiddlerのHostsにも「hoge.ipv4.fiddler」を記載するとアクセスできます。

応用03 LaravelのGuzzle Http等でローカル→外部に通信する場合

Laravel で何も proxy の設定をしていない場合、
動作中のWEBサーバから外部のサーバを叩きに行くと
localhost に立っている fiddler を経由せず、そのまま見に行きます。

なので、proxyの設定を追加してfiddlerを通るようにします。

$body = htmlspecialchars('aaaaaaaaa');
$request = (new Client())->request(
        'POST', // HTTPメソッド
        'hoge.example.com', // リクエスト先URL
        [
            'headers' => [
                'Content-Type'  => 'application/json; charset=UTF-8',
                'Content-Length' => strlen($body),
            ],
            'proxy' => 'localhost:8888',  // プロキシ指定。これでfiddlerを通るように。
            'verify' => false, // 証明書の検証をオフにする。これはテスト環境だけにすること。
            'body' => $body, // 本文
            //'debug' => true,
        ]
);

TIPS01

fiddlerでHTTPSの通信（port:443）を覗こうとすると何も表示されず、「ここで設定してね」みたいな表示が出るので、そこからfiddler のオレオレ証明書の設定をします。

ただし、そこでfiddler側の設定をしただけの場合、
fiddler を経由して guzzle 等でアクセスした際に

API Request failed.cURL error 60: SSL certificate problem: unable to get local issuer certificate (see https://curl.haxx.se/libcurl/c/libcurl-errors.html)

とエラーで叱られてしまいます。

このため、'verify' => false で fiddler の証明書を検証しないようにすることが必要になります。

ただし、これを本番環境で使うとファーミング(Pharming、なりすまし)攻撃の原因になります。

TIPS02

fiddlerのportなどの設定は tools-> options 内のconnectionsタブ内に記載があります。