- Using Charles Proxy to Debug Android SSL Traffic
- Setting Up Your Project
- Setting Up Charles
- Setting Up Your Android device
- Using An Emulator
- Debugging requests
- Android 11 devices and Charles
- Как приручить Charles Proxy?
- Первые шаги
- Функциональность Charles Proxy
- 1. Подмена данных
- 1.1 Breakpoint
- 1.2 Rewrite
- 1.3 Map Local
- 2.1 Throttle Settings
- 2.2 Reverse Proxies
- 2.3 Port Forwarding
- 2.4 MacOS Proxy/Windows Proxy
- 3.1 No Caching
- 3.2 Block Cookies
- 3.3 Map Remote
- 3.4 Block List
- 3.5 DNS Spoofing
- 3.6 Mirror
- 3.7 Compose
- 4. Recording Settings
- 5. Focus
- 6. Repeat
- 7. Repeat Advanced
Using Charles Proxy to Debug Android SSL Traffic
Jun 20, 2017 · 5 min read
I’ve been a longtime user of Charles for checking requests and responses from the web applications I write.
Charles as described on its site:
Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
Lately, however, I’ve been doing a lot more work on Android apps than I have on server-side applications. I figured it would be similarly helpful to debug some of the requests we were making from our apps without logging out to Logcat and cluttering our app code.
The requests I wanted to check happened to be protected by SSL, so in addition to adding the proxy information to my device’s networking configuration, I also needed to install Charles’ root certificate. It turns out that this is possible, but requires a bit of work. Luckily I have now done this enough times to feel good about writing it up.
First off, this setup will not work on an emulator without an additional step (see below). I admittedly haven’t needed to do any proxy debugging without a test device, though.
Also, as of this post, we are targeting Android SDK version 25 in our applications, but this specific setup should work with all versions. If not, feel free to correct me so that I can update this post.
Now on with the show.
Setting Up Your Project
If your test device is running Android 7.0 or newer, there are a few extra steps to ensure that you are able to trust the Charles CA Certificate. To ensure Android trusts the certificate, you’ll need to specify a Network Security Configuration for your application. There are a few different ways of adding your certificate to the application’s trusted configuration, but I found that the easiest was not to include Charles’ certificate within my application code, but to simply trust the user-installed CA certificates (like previous versions of Android used to do).
Specifying the android:networkSecurityConfig property within your AndroidManifest.xml file:
Specifying the res/xml/network_security_config.xml file:
Setting Up Charles
Open up Charles on your Mac and then open Proxy > Proxy Settings from the toolbar. You’ll need to make note of the HTTP Proxy Port that is specified.
Then open up Proxy > SSL Proxying Settings from the toolbar and add the appropriate Locations (host/port) for the requests you wish to debug. I usually just add a wildcard route like *.myapidomain.com but specific domains like whatever-app.herokuapp.com work fine as well.
Setting Up Your Android device
First, make note of your Mac’s IP address within your local network. You’ll need it in the next step.
Also make sure Charles is open and that the Mac is on the same wifi network as the Android device you’ll be setting up.
Go to your device’s settings and wifi configuration.
Press and hold on the network you’re going to use and select Modify network from the alert modal.
Then check Advanced Options and scroll until you see Proxy .
Tap the Proxy dropdown and select Manual .
For the Proxy hostname input your Mac’s IP address that you noted above.
Then for the Proxy port use the HTTP Proxy Port that you noted from Charles’ Proxy Settings from above.
After saving, you may notice a pop-up on your mac like this:
You should now click Allow to let your Android device connect to Charles via the proxy it has set up.
If you don’t see this prompt, you can ensure that your device can use the proxy from within Charles by going to Proxy > Access Control Settings and adding your Android device’s IP address on the wifi network.
Now on your Android device, open up the browser and go to the following URL chls.pro/ssl . You can also see these instructions from within the Charles app — go to Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser .
The browser should download the cert and once finished, tap to open the file. Then Android should prompt you to install the file.
After you’ve named the certificate and tapped “OK”, you will either be prompted to input your device’s pin/password or prompted to set up your device’s pin/password. Once that process is complete, you should be ready to debug some requests.
Note Until you remove the manual proxy from this device’s wifi configuration, whenever you use this network again you will need to have Charles open and running on the same IP address. You can always set the network configuration back to “Proxy: None” once you’re done debugging.
Using An Emulator
According to Charles’ site you can start the emulator with a flag in order to use the proxy.
In the Android emulator run configuration add an Additional Emulator Command Line Option: -http-proxy http://LOCAL_IP:8888
Where LOCAL_IP is the IP address of your computer, not 127.0.0.1 as that is the IP address of the emulated phone.
EDIT: Thanks to Brandon Davis for pointing out that the full command would be
In addition, Android Studio 3.0 will now allow managing proxy settings for your emulator images. Read all about the new features here and if you can’t wait for a stable release, 3.0 is currently available in the dev channel .
Debugging requests
Now that you’re set up, you should see Charles recording traffic from your device. As long as you’re configured properly, you should see those SSL request details from the domains you specified in Charles’ SSL Proxying Settings.
Feel free to discuss your results and let me know if I missed anything obvious.
Источник
Android 11 devices and Charles
This tutorial will show you how to configure Charles and your Android 11 device so you can view your app’s network traffic in plain text. FYI, the root certificate installation steps are slightly different to older Android versions
NOTE: Since Android Nougat (7.1), Google have blocked tools like Charles from intercepting/decrypting network traffic from Play Store apps
NOTE: To proceed with this tutorial, you will need to be able to build your own Android app. Make sure the “Network Security Config File” has been added to your app’s repo (see more details here and here).
Be able to build your own Android app
Make sure you have setup the Charles Root certificate on your Mac
Check Wi-fi networks
Make sure your Mac and Android device are on the same Wi-Fi network
Find your Mac’s local IP address
Open Charles -> Help -> Local IP address.
Make note of the IP address as you will need to enter it into your device later
Navigate to device’s Wi-Fi proxy screen
Settings -> Wi-fi -> long press the connected Wi-Fi network to bring up the menu -> Modify -> Advanced options -> select “Manual” from the proxy drop down
NOTE: there are slight navigation differences between OS versions in how to get to your Wifi proxy settings but they should be fairly similar to these screenshots
Configure device’s proxy settings
This step will proxy all your device’s internet traffic through your laptop
- Proxy hostname: this is your Mac’s local IP address
- Proxy Port: 8888
Accept incoming network traffic from your device
On your device, open Chrome and go to a website
Return to your Mac. You should now see this prompt from Charles. Click “Allow”
Encrypted traffic from the device should now appear in Charles
Download Root certificate for device
Return to the device, open Chrome and go to chls.pro/ssl.
Install root certificate
O pen the “Setting” app -> Security -> Encryption & Credentials -> Install a Certificat e -> CA certificate -> Install anyways -> tap on the certificate
Android may prompt you to enter pin, password or fingerprint before installing the root certificate
Verify root certificate has been “trusted”
Return to Encryption & Credentials. Tap Trusted credentials -> USER
You should now see a certificate from “XK72 Ltd” appear
Enable SSL proxying to view traffic in plain text
Return to Charles, right click the network request you are interested in and click the “Enable SSL Proxying” option
FYI, I am using an Android app a friend created to demonstrate decrypting Android app traffic
NOTE: As mentioned at the start of the article, you need the ability to build your own Android app to view decrypted traffic. This step will not work with an app downloaded from the Play Store
Kill and Reopen app
Kill and reopen the app. You should now see the network request details in plain text
Источник
Как приручить Charles Proxy?
Привет! Многие из тех, кто приходит к нам на собеседование на должность тестировщика, с гордостью заверяют, что они могут пользоваться Charles Proxy. Но когда погружаешься в техническую часть, то становится очевидно, что кандидат только слышал об этом инструменте. Давайте уже наконец скорее приручим эту вазу!
Википедия нам сообщает, что:
Charles представляет собой кроссплатформенное приложение прокси-сервера для отладки HTTP, написанное на Java. Он позволяет пользователю просматривать HTTP, HTTPS и активированный трафик TCP-порта, доступ к которому осуществляется с локального компьютера, на него или через него. Сюда входят запросы и ответы, включая HTTP-заголовки и метаданные (например, файлы cookie, кэширование и кодирование информации), с функциями, предназначенными для помощи разработчикам и тестировщикам в анализе соединений и обмене сообщениями.
Небольшое пояснение
Сниффинг — процесс мониторинга и перехвата всех пакетов, проходящих через сеть, с помощью инструментов сниффинга (Charles Proxy).
Первые шаги
1. Установка и запуск
Для начала необходимо загрузить и установить приложение.
Если у вас не приобретена лицензия, то будет доступна 30-ти дневная пробная версия с ограничениями (функциональность не блокируется, но будут появляться окна с таймаутом 5-10 секунд до возобновления использования, а также через 30 минут будет завершаться работа приложения).
2. Начинаем сниффить трафик
Запустите Charles Proxy на MAC, зайдите в меню Help → SSL Proxying → Install Charles Root Certificate → Установить сертификат → Импортируем сертификат.
Запустите Charles Proxy на Windows, зайдите в меню Help → SSL Proxying → Install Charles Root Certificate
В Windows, в открывшемся окне Сертификат → Установить сертификат. Выбрать «Текущий пользователь» или «Локальный пользователь». Далее вы получите уведомление от мастера импорта сертификатов, что сертификат успешно импортирован.
3. Проксирование трафика веб-браузера
Рассмотрим вариант с проксированием на примере браузера Mozilla Firefox. И установку сертификата на примере двух OS: MAC и Windows.
3.1 Windows
Для этого узнаем IP-адрес ПК: в Charles Proxy перейдем в Help → Local IP Address. Видим, что ваш IP: 10.0.2.15 (p.s. в Local IP Address может быть несколько указано IP, например отображаться IP от VirtualBox, если после указания одного IP не будут отображаться запросы, попробуйте выбрать другой из списка).
Далее откроем Mozilla Firefox, перейдем в Параметры сети → Настроить. Выставим все как на скриншоте ниже и нажмем Ок.
Теперь необходимо перейти по ссылке chls.pro/ssl, а далее начнется автоматическая загрузка сертификата. В этот момент будет входящее соединение в Charles Proxy, необходимо нажать Allow, а также выполнить импорт сертификата:
3.2 MAC OS
Для этого узнаем IP-адрес ПК: в Charles Proxy перейдем в Help → Local IP Address. Видим, что ваш IP: 192.168.1.50 .
Далее откроем Mozilla Firefox, перейдем в Параметры сети → Настроить.
Выставим все как на скриншоте и нажмем Ок.
Теперь необходимо перейти по ссылке chls.pro/ssl, а далее начнется автоматическая загрузка сертификата.
В этот момент будет входящее соединение, необходимо нажать Allow:
Следующим шагом обратите внимание на диалоговое окно, где необходимо выбрать Открыть в keychain:
Важным шагом, который вы должны сделать далее, это в Keychain Access сделать сертификат доверенным:
Не забудьте деактивировать Windows Proxy (если у вас ОС Windows) или Mac Proxy (в противном случае будет вам мешать).
Теперь у вас отображаются запросы, однако они зашифрованы, и кроме иероглифов ничего не видно. Чтобы видеть Request/Response в нормальном виде, нужно включить SSL Proxying и настроить домены, пакеты которых мы хотим перехватывать. А хотим мы получать запросы со всех сайтов. Для этого перейдите в раздел Proxy → SSL Proxying Settings.
В открывшемся диалоговом окне поставьте галочку Enable SSL Proxying, выберите раздел Include и нажмите Add.
Далее заполните поле Host значением * (как показано на скриншоте) и нажмите ОК.
В диалоговом окне «SSL Proxying Settings» нажмите ОК.
Если необходим будет определенный host, следует указать например нужный *youla* (это значит, что будет расшифровываться трафик только тот, где в запросах есть youla.
4. Настройка прокси на Android
Чтобы отображались запросы приложения Android, у вас должна стоять соответствующая сборка Android-приложения, c установленным в манифесте разрешением. Давайте представим, что такое приложение имеется, и мы хотим начать получать его трафик. Важно: устройство Android и десктоп должны быть в одной сети.
Для этого узнаем IP-адрес ПК: в Charles Proxy перейдем в Help → Local IP Address. Видим, что ваш IP: 192.168.1.50 .
Далее возьмите в руки телефон, откройте Свойства сети → Название сети WiFi → Прокси-сервер → Вручную → Имя хоста: *ваш IP* / Порт: *8888* → Сохраните измененные свойства сети.
Теперь необходимо перейти по ссылке chls.pro/ssl или charlesproxy.com/getssl, а далее начнется автоматическая загрузка сертификата. Откройте его, задайте имя сертификата, и теперь у вас есть доступ к трафику Android-приложения.
5. Настройка прокси на iOS
Возьмите в руки iPhone, откройте Свойства сети → Название сети WiFi → Прокси-сервер → Вручную → Имя хоста: *Наш IP* / Порт: *8888* → Сохраните измененные свойства сети (важно: устройство iOS и десктоп должны быть в одной сети).
Теперь необходимо перейти по ссылке chls.pro/ssl или charlesproxy.com/getssl, «Разрешить» загрузку профиля конфигурации. Далее перейдите в Настройки → Профиль загружен → Установить. Затем перейдите в Настройки → Основные → Об этом устройстве → Доверие сертификатам → найдите установленный сертификат и сделайте его «Доверенным».
Функциональность Charles Proxy
1. Подмена данных
Представим, что нам надо протестировать на клиенте верстку. Нужно проверить, как будет отображаться большое количество бонусов у пользователя. Один из вариантов, который многие предложат: изменить в БД количество бонусов и проверить на клиенте. Да, вы будете правы! Однако на сервере может быть кэш, и необходимо подождать какое-то время, пока количество бонусов не обновится, либо просто подключиться к самой базе и выполнить запрос — это занимает определенное время. Есть вариант проще: изменить ответ от сервера! В Charles Proxy есть три способа подмены данных:
1.1 Breakpoint
Breakpoint — это некая точка остановки запроса. Когда обнаруживается запрос из заданного списка, для дальнейшего ручного взаимодействия с параметрами запроса открывается отдельное окно. В нём перейдите к ручному изменению запросов и ответов. Удобно использовать эту функцию, когда тестируете API или разные ответы сервера.
У нас имеется приложение и профиль пользователя, у которого сейчас 45 бонусов на счету:
Запрос, в котором приходит это количество бонусов: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8
Чтобы «повесить» Breakpoint на запрос, перейдите в раздел Proxy → Breakpoint Settings. Далее поставьте галочку Enable Breakpoints → Add, и в открывшемся диалоговом окне «Edit Breakpoint» вставьте URL запроса, как показано на скриншоте:
Для примера поставьте две галочки «Request» и «Response». Далее нажмите OK, и ещё раз OK в окне «Breakpoint Settings». Теперь выполните запрос еще раз, то есть на клиенте заново откроется экран с профилем пользователя.
В Charles Proxy мы видим, что выполнение запроса ставится на паузу:
Здесь можно изменить параметры запроса. Но сейчас это делать не нужно, нажмите «Execute». Следом у нас ставится на паузу уже пришедший ответ от сервера. И тут как раз мы должны отредактировать «Response». Найдите нужный параметр — bonus_cnt»: 45 .
Далее измените значение параметра bonus_cnt , например, на 1 000 000 бонусов, и нажмите «Execute».
На клиенте отобразится новое количество бонусов. Мы богаты!
1.2 Rewrite
Rewrite — это инструмент, позволяющий создавать правила, которые изменяют запросы и ответы, когда те проходят через Charles Proxy. Например, можно добавлять и изменять заголовок, искать и заменять текст в теле ответа или запроса, и т.д.
Попробуем с помощью Rewrite изменить количество бонусов нашего пользователя. Для этого откройте Tools → Rewrite → галочка «Enable Rewrite« → Add. В поле Name можно ввести любое название подмены, например, «Change bonus», либо оставить по умолчанию «Untitled Set».
Следующим шагом необходимо добавить в «Location» путь запроса. Для этого, в разделе Location → Add заполните следующие поля и сохраните:
Host: https://api.youla.io
Path: /api/v1/user/5e6222bbbedcc5975d2375f8
После того, как вы добавили путь запроса, необходимо изменить сам параметр и его значение. Для этого нужно создать Rewrite Rule:
Type: Body (потому что параметр находится в теле);
Where: Response (потому что параметр находится в ответе от сервера);
Раздел Match: в «Value» укажите значение и параметр, который возвращает сервер;
Раздел Replace: в «Value» укажите значение и параметр, который вы хотите увидеть на клиенте.
Далее сохраните «Rewrite Rule» и нажмите ОК на вкладке «Rewrite Settings». На клиенте перезапросите еще раз профиль пользователя. У вас автоматически подменилось количество бонусов пользователя. Мы снова богаты!
1.3 Map Local
Map Local — инструмент, который позволяет использовать локальные файлы, словно они являются частью сервера.
Перейдите в Tools → Map Local.
Далее в окошке «Map Local Settings» нажмите Add → Хост: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8 → Local path: путь на компьютере до файла. Можете использовать готовые медиа-файлы, HTML, CSS, JSON, XML. Больше подходит, конечно, разработчикам, чтобы не загружать данные на сервер для его последующего тестирования, но и тестировщик может найти грамотное применение. Мы заранее подготовили ответ, который нам будет нужен, и сохранили в файл change_bonus.json:
Сохраните введенные значения на вкладке «Edit Mapping» и на вкладке «Map Local Settings».
На клиенте перезапросите еще раз профиль пользователя. У вас автоматически подменилось количество бонусов пользователя. Мы снова богаты!
Давайте рассмотрим другие возможности инструмента Charles Proxy. И начнем с самого начала, с вкладки «Proxy».
2.1 Throttle Settings
Throttle Settings — функция, позволяющая задавать разные параметры скорости соединения с выбранным доменом.
Функция для тех, кто любит тестировать в лифте, в метро, в подземном переходе. Перейдем в Proxy → Throttle Settings → галочка Enable Throttling. Если не разбираетесь во всех перечисленных пунктах, то можете использовать Throttle preset и там выбрать подходящую для теста скорость, а система автоматически заполнит остальные поля.
Если выбрать «Only for selected hosts», то можно задать определенный хост, к которому будут применяться ваши настройки. Здесь можно использовать готовые пресеты с настройками для различных типов (4G, 3G и т. д.). А также можно задать различные параметры, коротко перечислю некоторые из них:
Bandwidth — максимальный объем данных, который может быть передан с течением времени.
Utilisation — доля общей пропускной способности, которая может быть предоставлена пользователю в любой момент времени.
Latency — задержка в миллисекундах по запросу firts между клиентом и удаленным сервером.
MTU — максимальное передающее устройство для текущего пресета.
Reliability — мера вероятности, что соединение не удастся. Используется для имитации ненадежных сетевых условий.
Stability — мера вероятности, что соединение будет нестабильным и, следовательно, снизится качество. Полезно для моделирования сетей, в которых периодических падает качество связи, например, мобильных.
2.2 Reverse Proxies
Reverse proxy — обратный прокси-сервер. Обычно используется для того, чтобы принимать запросы из Интернета и перенаправлять их на один из веб-серверов.
2.3 Port Forwarding
Port Forwarding — проброс портов, который иногда называют перенаправлением портов, или туннелированием — процесс пересылки трафика, адресованного конкретному сетевому порту, с одного сетевого узла на другой. Этот метод позволяет внешнему пользователю достичь порта внутри локальной сети.
2.4 MacOS Proxy/Windows Proxy
MacOS Proxy или Windows Proxy (в зависимости от вашей ОС) — проксирование трафика с вашего веб-браузера.
Разобравшись с разделом Proxy, перейдем к разделу Tools.
3.1 No Caching
Инструмент No Caching предотвращает кэширование, манипулируя заголовками HTTP, которые управляют кэшированием ответов. Заголовки If-Modified-Since и If-None-Match удаляются из запросов, добавляются Pragma: no-cache и Cache-control: no-cache . Заголовки Expires , Last-Modified и ETag удаляются из ответов и добавляются Expires: 0 и Cache-Control: no-cache .
3.2 Block Cookies
Block Cookies — заголовок файла Cookie удаляется из запросов, предотвращая отправку значений файла из клиентского приложения (например веб-браузер) на удаленный сервер. А также из ответов удаляется заголовок Set-Cookie, предотвращая получение клиентским приложением запросов на установку файлов cookie с удаленного сервера. В настройках можно включить удаление Cookie как для всех хостов, так и для выбранных. В примере ниже включено удаление Cookie для всех запросов.
3.3 Map Remote
Map Remote — позволяет переадресовать запросы с одного URL «Map From» на другой «Map To». Подменяет хост, путь целиком или только параметры в зависимости от вашей задачи. В примере ниже подменён запрос с prod-сервера на dev-сервер.
3.4 Block List
Block List — позволяет блокировать определённые доменные имена. Когда веб-браузер попытается запросить любую страницу из заблокированного доменного имени, она заблокируется. Можно выбрать либо «Drop connection», либо возврат 403 ошибки.
3.5 DNS Spoofing
Виртуальный хостинг — это когда у вас есть несколько сайтов на одном IP-адресе, и веб-сервер определяет, какой сайт вы запрашиваете, основываясь на имени, введённом в браузере. Точнее, сервер смотрит на заголовок хоста, отправленный в запросе. Например, когда нужно подменить хосты, чтобы при вводе какого-либо адреса в браузере (скажем, api.youla.ru) запросы уходили по другому адресу (допустим, на тестовую площадку).
DNS Spoofing — перенаправляет доменное имя на определенный IP-адрес.
3.6 Mirror
Mirror — эта функция позволяет автоматически сохранять все ответы, возвращаемые в Charles Proxy. Они раскладываются локально в такой же иерархии, как на сервере. Если внезапно случился даунтайм на бэкенде, отвалилась тестовая среда и т. д., у вас уже есть готовые моки для Map Local. Активировать функцию можно так: Tools → Mirror или Tools → Auto Save.
3.7 Compose
Compose — функция редактирования запросов, которые вы поймали.
Например вы добавляете в избранное какой-то товар, но почему-то он не добавляется. Вы можете отредактировать уже отправленный запрос и отправить его еще раз. Для этого необходимо выбрать нужный запрос из списка, нажать на нём правой кнопкой и выбрать Compose. Иконка у запроса поменяется, и теперь можно смело его редактировать.
После того, как вы изменили нужные значения в запросе, нажмите внизу «Execute», чтобы отправить запрос на сервер.
4. Recording Settings
Recording Settings — настройки отображения списков разрешенных и запрещенных доменов.
Во вкладке «Options» можно настроить лимит, то есть количество запросов, которое Charles Proxy может записать.
Во вкладке «Include» можно выбрать конкретный домен для отображения пакетов.
Во вкладке «Exclude» можем выбрать те домены, которые необходимо спрятать при сниффинге.
5. Focus
Focus — эта функция перемещает домен на первые позиции в списке.
6. Repeat
Repeat — отправляет на сервер запрос, идентичный выбранному.
7. Repeat Advanced
Repeat Advanced — идентично Repeat, только можно выбрать количество отправляемых запросов и задержку между ними. Эта функция пригодится при проверке реакции сервера на флуд.
Здесь Concurrency — количество пользователей, а Iterations — количество повторений каждого запроса. Также можно поставить галочку «Show results in new Session», в таком случае откроется новое окно, где будут выполняться запросы.
Источник