Charles で HTTP レスポンスの書き換え
スポンサードリンク
転職して、すっかりサーバサイドのプログラミングをしなくなりました。このブログを久々に見ました。
さて、デモや検証などの目的で、お客さんのウェブサイト上で勝手にJavaScript を動かしたい... という時に、Charles Web Proxy というツールがとても便利です。 もともとは HTTP モニタリング/デバッグツールですが、もっぱら HTTP レスポンスの書き換え用途にのみ使っています。
基本的に有償のツールで、私は会社の保有するライセンスを登録して使っています。無償でも使えますが、起動して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) すれば設定完了です。
SSL Proxy の設定
書き換えをしたいサイトが SSL の場合、Proxy > SSL Proxy Settings... から、Enable SSL Proxying にチェックを入れておきます。Host には対象サイトの URL, Port は * と入力。
証明書のインストールと信頼
このままではブラウザでアクセスする際に、信頼できる証明書がないということでプライバシーエラーが出てしまいます。
Help > SSL Proxying > Install Charles Root Certificate を選択し、ルート証明書をインストールします。その後 Mac のキーチェーンアクセスツールを開き、Charles で検索。証明書が信頼されていないことを示す赤い×マークが出てくるので、そこをクリック。"信頼" セクションから、"常に信頼" を選択しておきます。
その後 Charles を再起動すると、リライトが始まります。
以上です。