はじめに
お読みいただきありがとうございます。
この記事は、「Life is Tech ! Members Advent Calendar 2016」の18日目の記事です。
突然ですが皆さん、スマホアプリが裏でサーバーとおこなっている通信、覗いてみたくないですか...?
そんなことして何がお得なの...? って思われるかもしれませんが、こんないいことがあるんです:
- 通常の操作（長押し等）では保存できない画像などがフル画質で保存できる！
- アプリが利用しているAPIの（だいたいの）仕様がわかる！
- 端末内の個人情報を外部に勝手に送信していないかチェックできる！
などなど... たくさんあるんです！
そこで今回は、スマホがおこなっているすべての通信パケットをPCで解析できるツール Charles をご紹介します。
※ この記事では筆者手持ちのiPhone6とMac(OS Sierra)を使って解説します。その他の環境の方は各自で頑張ってください。ごめんなさい。
Charles とは？
パソコン上で様々な端末の通信パケットを簡単に解析できる、いわゆるパケットキャプチャと呼ばれるツールです。
この分野ではWiresharkというソフトが大変有名ですが、多機能ゆえに使い方が複雑で扱いづらいので今回はこちらを使いましょう。
かわいいアイコンですね。なんでティーポット(?)なんだろう。
ちなみに本当の名前は Charles Web Debugging Proxy だそうです。
公式サイト: https://www.charlesproxy.com/
インストール
さっくり公式DLページ( https://www.charlesproxy.com/download/ )からダウンロード&インストールしてください。
どうやらJavaベースのソフトらしく、環境によってはJavaのランタイムもインストールする必要があるかもしれません。
ちなみにシェアウェアなのでライセンスを購入するには$50支払う必要があります。
でも未払いでもフル機能を利用可能で、たまに一定時間消せない警告画面が表示される程度です。
初期設定
Charlesがどのように動作するかを簡単に説明しておくと、「Web Debugging Proxy」の名の通り、
[端末] <=> [Charles] <=> [インターネット上のサーバー]
といった感じで端末に対してプロキシとして振舞うことで通過するパケットを傍受してやろうということです。
そのため、まずはスマホがCharlesをプロキシとして利用できるように設定を行いましょう。
Charlesを起動したら、Proxy > Proxy Settingsをクリックしてプロキシ設定画面を開きます。
Http ProxyのPort欄に好きなポート番号を入力して「OK」してください。ここでは8888としています。
現在ほとんどの通信はSSLによって暗号化されていますが、Charlesで証明書を作成して無理やりスマホにインストールしてしまえばこれも解析できますので、その設定をしておきましょう。
Proxy > SSL Proxying Settings…を開き、以下のようにすべての通信(*)においてSSLプロキシを有効化しておきます。
なんと、PC側の設定はこれで全部おしまいです。やったね!
それでは次に、iPhoneのネットワーク設定を行います。「設定」アプリから「Wi-Fi」設定を開き、パソコンと同じルーターのSSIDに接続してください。
その後右端の(i)ボタンを押して詳細設定画面を開き、以下のようにプロキシサーバーの情報を入力します。
これでiPhoneの通信がCharlesを経由するようになりました。
最初にSafariか何かを開いて適当なサイトに接続しようとしてください。PC側に接続の許可を求める画面が表示されます。Allowしてあげましょう。
で、次にSSL証明書をインストールします。iPhoneのSafariから
http://www.charlesproxy.com/getssl/
にアクセスします。あとは指示に従ってインストールを行ってください。
長い道のりでしたが、これで使い始める準備ができました。お疲れ様でした。
さっそく何か見てみましょう。
使ってみよう
こちらがCharlesのメイン画面です。
上のペインで見たいリクエストを選び、下ペインでその詳細を閲覧できます。
かなりのスピードでリクエストは流れていきますので、ある程度対象のアプリが通信相手にしているドメインがわかったら、Filterにドメイン名を入力しましょう。当該パケット以外を表示しなくなります。
あとはあなた次第です
本当はもっと色々例を示したりして充実した記事にしたかったですが、もう日付変わってるし眠いし眠いし眠いので、あとはみなさま各自で遊んでみてください。
開発者的には[Request]タブで色々なサービスがアプリ用に用意しているAPIのリクエストヘッダが見れるので、パラメータを書き換えて反応を見たりしてると楽しいと思います。
（ここだけの話ですが、アプリ上には表示されないけどサーバーからは送信されている裏データのようなものも色々ありますので、それを見るのも面白いです。）
たーだーし、やりすぎると規約違反になる可能性もありますので、自己責任でお願いいたします。
明日のアドベントカレンダーは @ygkn さんのご担当です。楽しみにしています。
それではみなさま、良いクリスマスを