Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
76
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@dayoshix

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

はじめに

シリーズ第2回。第一回はこちら。
俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ

ということで今回は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をサポートするかしないかの差っぽいが)

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

Java7以上をインストール

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

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

  1. ダウンロードページを開いてインストールしたい7以上のバージョンのJRE版(Javaアプリケーションを動かすだけなら)をインストール。
  2. ターミナルを開いてJava -versionでバージョンを確認。

Charlesのインストール

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

  2. プロキシの自動切替を設定
    初めてCharlesを起動したら下記のダイアログが表示される。
    141101-0001.png
    これはCharlesが起動したらOSXのWifiのプロキシ設定を自動的にCharlesに切り替えるかどうか聞いている。
    いちいち手動で切り替えるのは至極面倒なので、特別な理由がない限りはGrant Privilegesする。

  3. 設定が正しく反映されているか確認
    ブラウザなどでWebトラフィック発生させる。
    下記のようにCharlesにセッションの通信内容が記録されていればOK.
    141103-0002.png

設定

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

Charlesの設定

SSLプロキシの設定

デフォルトではSSLプロキシに許可するURLの設定がないためHTTPSリクエストの内容が読めない。
メニューからProxy > Proxy Settings..を選択して設定ダイアログを表示してSSL設定を下記のようにする。
141103-0003.png
とりあえず全てのURLでSSL Proxyを使うような設定をしている。(locationsに*を指定)

Macアプリ向け

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

SSL証明証をインストール

このページMAC OS XセクションCharles CA Certificate bundleをダウンロードしてインストール。

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

Firefox向けの設定

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

このページから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証明書配布ページを開く
    このページをiOSデバイスのモバイルサファリで開く。

  2. SSL証明書をダウンロード
    ページのIOS DEVICESセクションに記載されている証明書ファイルのリンクをクリック

  3. SSL証明書のインストール
    証明書のインストールする。

    メモ: 証明書は設定の一般 > プロファイルで確認、削除が可能。

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

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

iOS版Chromeの設定

iOSのChromeアプリではデフォルト設定でGoogleのデータ圧縮のためのプロキシに接続しているようで、Charlesに向けたプロキシをバイパスしてしまう。
また、この設定を無効にしたととしても中間者攻撃の疑いを検出してか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)を指定。

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

Android版Chromeの設定

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

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

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

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

その他(Windows、Linux)

SSL周りはここらへんを参考に。

次回

俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その3〜 最初に覚えたい基本的なこと

76
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
76
Help us understand the problem. What is going on with this article?