Proxymanを用いて、リクエストのヘッダー情報を編集して実機テストをする

こんにちは。Backendを担当している佐藤です。

今回Javaとは関係ない話になりますが、スマホの実機端末でテストするときにリクエストのヘッダー情報を編集する必要があったためどのように対応したかを書かせていただきます。

asoview!の一部のプロダクトではテスト環境が複数存在し、リクエストをヘッダー情報をもとにnginxで各環境へ振り分けています。

PCのブラウザ、たとえばChromeならModHeaderを使ってリクエスト情報の編集してテストをしていますが、今回実機の端末で動作確認しなければいけないことになったため調べてみました。

結論、HTTPプロキシツールをインストールして対応しました。

試してみる(セットアップ)

調べたところHTTPプロキシツールとしてCharlesProxymanが使えそうと分かったので実際に試してみました。

大枠どちらのツールも以下の設定をおこないますが、今回はProxymanでのやり方を紹介します。 言うまでもなく同じネットワークにPCと端末を繋いでいることが大前提です。

  1. ルート証明書をPCにインストール
  2. 端末のproxy設定をおこなう
  3. 端末に証明書をダウンロードする
  4. 端末に証明書をインストールし、証明書を信頼する

以下Proxymanは設定の手順が非常にわかりやすく上から順番に4ステップを設定していけば10分程度で簡単に設定できます!

設定が完了すると端末からのリクエストがPoxyman上で確認できるようになります。

試してみる(ヘッダー編集)

次に実際にヘッダー情報を追加してみます。 Charlesにはリクエストヘッダー、リクエストボディ、クエリパラメーターなど編集ができるRewrite機能があるのですが、Proxymanにはぱっとみた感じみつかりませんでした。 代わりにScriptingという機能がありリクエストをJavaScriptで編集できたのでそちらを使いました。

メニューバーのScripting > Script Listから編集可能です。 今回は以下のようなCustom-Headerをひとつ追加してみました。

  • asoviewドメインに対するリクエスト
  • すべてのMETHOD
  • リクエストに対してのみヘッダーを追加
  • ヘッダー名: Custom-Header、値: My-Value

上記設定を有効にした状態でリクエストしてみると、Headerに追加されていることが確認できました!

さいごに

CharlesとProxymanどちらも実は有料です!
ただし機能を制限された状態であればどちらも無料で使えます。今回は無料枠でやりたいことは実現できました。

使いたい内容にもよりますが以下の2点からProxymanをおすすめします。
(※ProxymanはMacOSのためのアプリです)

  • セットアップが(ちょっとだけ)簡単
  • Charlesは30分で再起動を強制されますが、Proxymanのほうはそのような制限はない

Proxymanのサイト(Everything you need to knowの項)に機能制限について以下のような記載がありますがCharlesの30分のような利用期限などは設けられていないように思われます。(今後変更になるかもしれません)。

What are the differences between the Trial and Premium versions? You can try all debugging tools with the Trial version, it is limited to 2 pinned domains, 2 rules for each debugging tool, and no new tabs.

以上いつかどこかで参考になれば幸いです。

アソビューでは「生きるに、遊びを。」をミッションに、一緒に働くメンバーを募集しています!ご興味がありましたらお気軽にご応募いただければと思います!

www.asoview.com