大学のWebアプリが使いづらい？そうだハックしよう

## 大学のWebアプリが使いづらい？
大学内のサークル部室には、操作可能なスイッチがありません。（一応天井にエアコンのリモコンはありますが）
じゃあどうやって制御するのかというと、Webアプリが用意されているわけですがまぁ使いにくい（SPAとかになってないので、普通のページ遷移で時間がかかる）

というわけで、ネイティブで書き出すために仕様を割り出してみたいと思います。
今回はスマートフォンで開いたWebアプリを解析します。（iPhoneを前提に説明します）

## HTTPデバッガ
Webアプリ、ということは、通信のやり方で真っ先に思いつくのはJavaScriptを使ったものではないでしょうか。
そこで、デバイスが行っている通信をキャプチャするソフトを用意します（PCのChromeの開発者コンソールでも似たようなことができます）
Wiresharkは有名ですが、昨今の通信はだいたい暗号化されているので読めず。
[Charles](https://www.charlesproxy.com/)を使用します。

Charlesで自己署名証明書を発行し、スマートフォンなどに噛ませることで、途中でCharlesが復号化→再暗号化してくれるため、スマートフォンから見れば暗号化されていますが、HTTPSの通信も読める状態でキャプチャすることができます。
ただし、SSL Pinningが行われている場合は、アプリ側で利用できる証明書が制限されているため、失敗するようです。

Charlesは有料で、だいたい5000円ちょっとくらいですが、後述する理由により、それ以上の価値があると思います。
是非買いましょう。（無料でも使えますが、30分に一度終了させなければいけません）

## 準備
CharlesをインストールしたPCのIPアドレスを控えておきます。
このとき、ターゲットのスマホとCharlesの入ったPCは同じネットワーク内にいてアクセス可能である必要があります。

設定＞Wi-Fi＞「i」＞プロキシを構成で、オフになっているものを手動にします。
サーバーは、PCのIPアドレス、ポートは標準では8888です。
認証は不要なので、このまま閉じます。

<img width="375" alt="IMG_0728.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/b6f297cb-be39-0673-2502-e2dd6c8cc712.png">

<img width="375" alt="IMG_0730.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/e6c93a1a-9207-a69c-0a54-b9117afd7f86.png">


次に、ルート証明書のインストールを行います。
Safariで http://chls.pro/ssl にアクセスすると、構成プロファイルのインストールが始まるので、インストールします。
<img width="375" alt="IMG_0731.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/6a768e66-dc65-fb4c-cec1-a8c0d3a91e04.png">
<img width="375" alt="IMG_0732.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/680678f9-12ee-f18e-377b-b5b7c66f210f.png">


iOS10以降、証明書信頼設定を変更しないと証明書が信頼されないままエラーになるので変更します。
設定＞一般＞情報＞証明書信頼設定の中で「ルート証明書を全面的に信頼する」のトグルをオンにします。
<img width="375" alt="IMG_0736.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/c8144eae-30cd-d25a-fb0d-7d639994fcbb.png">


Charles側で、SSLのキャプチャの設定をします。
<img width="253" alt="スクリーンショット 2019-12-17 12.11.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/786bfbcd-8a4a-89f2-490c-0d54ce7b2f7c.png">
Proxy＞SSL Proxy Settingsを開く

<img width="594" alt="スクリーンショット 2019-12-17 12.12.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/cc555664-7620-e0bd-cfbf-9bf08741a379.png">
「Enable SSL Proxying」にチェックを入れて「Add」をクリック

<img width="594" alt="スクリーンショット 2019-12-17 12.13.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/8442f5f4-cc99-99a5-0633-a37988e26d75.png">
全てのホストとポートでキャプチャするので、ワイルドカードを指定して「OK」

この先の通信についてキャプチャが行われます

<img width="1680" alt="スクリーンショット 2019-12-17 12.16.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/7462c12c-6bd2-33c7-f96d-54d186697625.png">

早速、使ってみましょう！

<img width="1671" alt="スクリーンショット 2019-12-17 12.20.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/13e3d13c-660a-8228-e47f-30e5e8b52932.png">

いくつか引っかかりましたね！

<img width="1680" alt="スクリーンショット 2019-12-17 12.21.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/8cf4188f-cb9b-2faa-2ff6-7a49d4d4f42d.png">

WebSocketで、それらしき通信が行われているのが確認できます。
後は、適当なクライアントで通信すれば、お好みの手段でWebアプリをラッピングすることができます🎉

<img width="195" alt="スクリーンショット 2019-12-17 12.25.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/16654d15-937b-208e-a476-f4ab7347fbe9.png">

ちなみに、cURL構文でリクエストをコピーすることができ、ターミナルなどにペーストしてあげるとサクッと応答を確認できます。

<img width="1680" alt="スクリーンショット 2019-12-17 12.26.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92661/e359025f-6621-1435-6174-d9cf0e6f58ea.png">

下半分の画面で、通信の詳細を確認できます。

## まとめ
ただ単に、他のアプリの通信を解析するだけでなく、アプリ開発者にとって、アプリが正しい通信をしているのかを確認できれば、問題の切り分けになります。
ブレークポイント設定して・・・とか面倒な作業をせずともちょろっとアプリを触っていれば自動でどこで引っかかっているかを収集できるので本当に有料でもそれ以上の価値があると思います。