俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その2〜 インストールと設定

# はじめに

シリーズ第2回。第一回はこちら。
[俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ](http://qiita.com/dayoshix/items/b658389eea076b2e8ec3)

ということで今回はCharlesのインストールと最初にやっておくべき設定を自分なりにまとめてみる。
Window、Linuxの手順は割愛。

# インストール

検証した環境は以下。

* Charles 3.9.3
* OSX 10.10 (Yosemite)
* Java7 (1.7.0_25)

Javaはバージョン7以上を入れたほうが良い。
Mac版のダウンロードファイルは2種類あり、JavaSEバージョン7以上向けのものはSSL Proxyがより良く動くと書かれているため。
（[SNI](http://ja.wikipedia.org/wiki/Server_Name_Indication)をサポートするかしないかの差っぽいが）

また、自分の環境だとバージョン7以上向けのCharlesでないと動作しなかった。

## Java7以上をインストール

ターミナルを開いて`java -version`をバージョンを確認。

バージョンが1.6以下だった場合は下記の手順でインストール。

1. [ダウンロードページ](http://www.oracle.com/technetwork/java/javase/downloads/index.html)を開いてインストールしたい7以上のバージョンのJRE版(Javaアプリケーションを動かすだけなら)をインストール。
1. ターミナルを開いて`Java -version`でバージョンを確認。

## Charlesのインストール

1. [ダウンロードページ](http://www.charlesproxy.com/download/)を開いて`Alternative version using Oracle Java SE 7 (includes full SSL Proxying support)`と書かれたファイルをインストール。

1. プロキシの自動切替を設定
初めてCharlesを起動したら下記のダイアログが表示される。
![141101-0001.png](https://qiita-image-store.s3.amazonaws.com/0/31639/434dd410-0010-6827-2640-ab88c410536d.png)
これはCharlesが起動したらOSXのWifiのプロキシ設定を自動的にCharlesに切り替えるかどうか聞いている。
いちいち手動で切り替えるのは至極面倒なので、特別な理由がない限りは`Grant Privileges`する。

1. 設定が正しく反映されているか確認
ブラウザなどでWebトラフィック発生させる。
下記のようにCharlesにセッションの通信内容が記録されていればOK.
![141103-0002.png](https://qiita-image-store.s3.amazonaws.com/0/31639/1184563a-86c5-1982-efbf-cdefb7c052ea.png)

# 設定

自分が思う最低限の設定を説明。
SSLの設定をしないとリクエストやレスポンスの内容が暗号化されているのでCharlesでみるとバケバケな感じなのでSSLの設定も含む。

## Charlesの設定

### SSLプロキシの設定
デフォルトではSSLプロキシに許可するURLの設定がないためHTTPSリクエストの内容が読めない。
メニューから`Proxy` > `Proxy Settings..`を選択して設定ダイアログを表示してSSL設定を下記のようにする。
![141103-0003.png](https://qiita-image-store.s3.amazonaws.com/0/31639/8a54024e-d4c8-d384-b3aa-870e76f5f502.png)
とりあえず全てのURLでSSL Proxyを使うような設定をしている。(locationsに`*`を指定)

## Macアプリ向け

MacでWebトラフィックが発生するアプリ全般向けの設定。

### SSL証明証をインストール
[このページ](http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/)の`MAC OS X`セクション`Charles CA Certificate bundle`をダウンロードしてインストール。

> メモ：Charlesのメニューからも出来た。
> `Help > Install Charles CA SSL Certificate`
> を選択するとキーチェーンアクセスが起動するので管理者パスワードを入力してインストール。

### Firefox向けの設定

Firefoxは自身がプロキシ設定を管理しているみたいなのでCharles起動・停止時のプロキシ自動切替は別途Firefox用Addonが必要。

[このページ](http://www.charlesproxy.com/download/)からMOZILLA FIREFOX ADD-ONをダウンロード

## iOS Simulator向けの設定

### SSL証明証をインストール
メニューから
`Help > Install Charles CA SSL Certificate in iOS Simulators`
を選択

## iOSデバイス向け

検証した環境はiPhone6のiOS8.1。
前提としてWifiを通して同じLAN内にCharles起動中のPCがあること。

1. SSL証明書配布ページを開く
[このページ](http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/)をiOSデバイスのモバイルサファリで開く。

1. SSL証明書をダウンロード
ページの`IOS DEVICES`セクションに記載されている[証明書ファイル](http://www.charlesproxy.com/charles.crt)のリンクをクリック

1. SSL証明書のインストール
証明書のインストールする。
> メモ: 証明書は設定の`一般` > `プロファイル`で確認、削除が可能。

1. wifiの接続をHTTPプロキシにしてCharlesに向ける
wifiの設定を開き、接続中のwifiの設定のHTTPプロキシを手動にしてCharles起動中のマシンのIPとCharlesプロキシのポート番号（デフォルトは8888）を指定。

1. iOSデバイスからのアクセスが発生した瞬間にCharles側で接続を許可するかどうかの確認ダイアログが表示されるので許可（Allow)する。

### iOS版Chromeの設定
iOSのChromeアプリではデフォルト設定で[Googleのデータ圧縮のためのプロキシに接続しているよう](https://developer.chrome.com/multidevice/data-compression)で、Charlesに向けたプロキシをバイパスしてしまう。
また、この設定を無効にしたととしても[中間者攻撃](http://ja.wikipedia.org/wiki/%E4%B8%AD%E9%96%93%E8%80%85%E6%94%BB%E6%92%83)の疑いを検出してかSSL通信が発生するページはセキュリティエラーが発生して動作しなかった。

ということでとりあえず諦めた。(安全なブラウザですね）
 
## Androidデバイス向け

Android 3.0以下はプロキシの設定が出来ないため諦める。
Android 3.1以降ならいけると思う。
検証はNexus7(2013)(Android 4.4(kitkat))で実施。

1. SSL証明書ファイルのダウンロードとインストール

iOSデバイス向けの設定と同じ手順。

1. wifiの接続をHTTPプロキシにしてCharlesに向ける
wifiの設定を開き、接続中のwifiをロングタップ（長押し）して設定の変更を開く。
HTTPプロキシを手動にしてCharles起動中のマシンのIPとCharlesプロキシのポート番号（デフォルトは8888）を指定。

1. iOSデバイスからのアクセスが発生した瞬間にCharles側で接続を許可するかどうかの確認ダイアログが表示されるので許可（Allow)する。

### Android版Chromeの設定

iOS版と同様、デフォルト設定としてデータ圧縮のためのプロキシに設定しているようでプロキシ設定がバイパスされてしまう。

1. Chromeのデータ圧縮設定を解除

Chromeを開き、`設定` > `データ使用量の節約`を選択して節約設定をOFFに。

**使い終わったら節約設定をONに戻すこと(もったいない)**

## その他（Windows、Linux)

SSL周りは[ここらへん](http://www.charlesproxy.com/documentation/using-charles/ssl-certificates/)を参考に。

# 次回

[俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その3〜 最初に覚えたい基本的なこと](http://qiita.com/dayoshix/items/9bfce504686108545757)