MB blog

Sharing experience as a former Java developer

Charles で HTTP レスポンスの書き換え


スポンサードリンク

転職して、すっかりサーバサイドのプログラミングをしなくなりました。このブログを久々に見ました。 

さて、デモや検証などの目的で、お客さんのウェブサイト上で勝手にJavaScript を動かしたい... という時に、Charles Web Proxy というツールがとても便利です。 もともとは HTTP モニタリング/デバッグツールですが、もっぱら HTTP レスポンスの書き換え用途にのみ使っています。

www.charlesproxy.com

 

基本的に有償のツールで、私は会社の保有するライセンスを登録して使っています。無償でも使えますが、起動して15分間までしか使えないので、デモなどは難しいです。

リライト設定

Tools > Rewite で Enable Rewrite にチェックを入れて、Sets から新たなルールを Add します。 Type = Body を選択 (紛らわしいのですが、これは HTML body の意味ではなく、HTML のペイロードを書き換える時には head であっても必ず Body を選択するようです)、Where では Response にチェック。

JS を挿入したい時によくやるのは、<head> の閉じタグの直前に <script> を挿入する方法。</head> を <script>...</script></head> に置換 (=Replace All) すれば設定完了です。

f:id:lake_michigan:20170703211400p:plain

 

SSL Proxy の設定

書き換えをしたいサイトが SSL の場合、Proxy > SSL Proxy Settings... から、Enable SSL Proxying にチェックを入れておきます。Host には対象サイトの URL, Port は * と入力。

 

証明書のインストールと信頼

このままではブラウザでアクセスする際に、信頼できる証明書がないということでプライバシーエラーが出てしまいます。

Help > SSL Proxying > Install Charles Root Certificate を選択し、ルート証明書をインストールします。その後 Mac のキーチェーンアクセスツールを開き、Charles で検索。証明書が信頼されていないことを示す赤い×マークが出てくるので、そこをクリック。"信頼" セクションから、"常に信頼" を選択しておきます。

その後 Charles を再起動すると、リライトが始まります。

 

以上です。