Charles proxy – это инструмент мониторинга HTTP и HTTPS трафика. Он выступает в роли прокси-сервера (промежуточного звена) между тестируемым приложением и сервером на бэкенде, позволяя не только видеть, но также перехватывать и редактировать запросы.

Для просмотра запросов/ответов при тестировании WEB приложений достаточно взаимодействия с Postman через API, либо просмотра в DevTools. Но для отслеживания трафика при тестировании мобильного приложения могут возникнуть сложности.
Взаимодействие происходит по локальной сети, к которой подключены ПК и мобильное устройство.

Установка

Для начала необходимо скачать Charles на ПК по ссылке. Далее установить и открыть программу.

При открытии нас встречает окно, которое сообщает о том, что это пробная версия. Во время использования окно также будет появляться на некоторое время. 

Настройка SSL Proxying

Необходимо установить сертификат для дальнейшего использования.

Переходим по следующему пути: 

Для Windows

Открывается окно с сертификатами, необходимо нажать на “Установить сертификат…”.

Указать radio button “Текущий пользователь” и нажать “Далее”.

Выбрать “Поместить все сертификаты в следующее хранилище”, “Обзор…” и выбрать “Доверенные корневые центры сертификации”.

Нажать “Далее” и “Готово”.

Появилось окно с сообщением “Импорт успешно выполнен”.

Для проверки работоспособности мы можем открыть браузер и вписать в адресную строку Google.com и перейти по нему.

В программе отобразится запрос к данному url.

Выделенные кнопки должны быть включены.

Для MacOS

При переходе в “Install Charles Root Certificate” открывается Keychain Access, в котором необходимо два раза кликнуть на синий плюс сертификата Charles Proxy, во вкладке “Trust” везде указать “Always trust”.

Далее необходимо перейти по “Proxy” -> “SSL Proxying Settings” и заполнить чек-бокс “Enable SSL Proxying”.

Также во вкладке “Proxy” присутствует “macOS Proxy”, нужно нажать на данную строку, тем самым включить мониторинг трафика.

Подключение мобильного устройства

Для подключения устройства необходимо перейти по следующему пути Help ~> SSL Proxying ~> Install Root Certificate on a Mobile Device or Remote Browser.

Должно открыться окно с ip и портом, по которому можно достучаться до Charles. В нем указаны Server (IP-адрес) Port (8888).

Также указана ссылка, по которой необходимо перейти из мобильного браузера для установки сертификата – chls.pro/ssl .

Открывшееся окно не нужно закрывать. Оставляем открытым, пока не подключимся с телефона.

На iOS

Переходим во вкладку Wi-Fi и выбираем сеть, к которой подключены оба устройства.

Нас интересует “Настройка прокси”, устанавливаем “Вручную” и заполняем Сервер и Порт данными, которые предоставляются в информирующем окне.

Нажимаем “Сохранить”.

При первом подключении мобильного устройства в программе Charles отобразится окно, информирующее о новом подключении. Необходимо нажать “Принять”.

Вводим в браузере телефона следующий URL: http://chls.pro/ssl или charlesproxy.com/getssl

После открытия страницы браузер должен начать скачивать сертификат для Charles.

В настройках, появляется вкладка “Profile Downloaded”, необходимо нажать на нее. Далее два раза нажать на “Install”.

Далее переходим в “Настройки” -> “Основные” -> “Об этом устройстве” -> “Доверие сертификатам” и передвигаем ползунок у Charles Proxy на активный.

На Android

Необходимо, чтобы компьютер и телефон были подключены к одному Wi-Fi.

В настройках Wi-Fi на телефоне заходим в настройки сети (на телефонах марки Samsung – шестеренка рядом с названием сети Wi-Fi, на телефонах марки Huawei необходимо нажать и удерживать палец на наименовании Wi-FI сети и выбрать «Изменить сеть»).

Далее в пункте «Прокси» выбираем параметр «Вручную».

В поле «Имя узла прокси» вводим ip (192.168…….).

В поле «Порт прокси» указываем порт: например, 8888

После того, как сохранили настройки сети, в окне Charles должно появиться уведомление с просьбой разрешить или отклонить доступ к девайсу. Жмем «Разрешить»/«Allow».

Вводим в браузере телефона следующий URL: http://chls.pro/ssl или charlesproxy.com/getssl

После открытия страницы браузер должен начать скачивать сертификат для Charles.

После скачивания сертификата открываем настройки – на Samsung в поиске пишем «Установить из памяти» – Сертификат Wi-Fi – выбрать папку Download – Выбрать сертификат Charles и установить его. Для Huawei и других устройств можно просто нажать на сертификат и установить его, выбрав пункт «Установка для Wi-Fi».

В Android установленные сертификаты проходят верификацию в Settings -> Trusted Credentials во вкладке User.  

ВАЖНО: Начиная с Android 6.0 и выше в файле манифеста AndroidManifest.xml надо добавить специальную конфигурацию, позволяющую просматривать защищенный трафик. Это нужно заранее попросить у разработчика приложения.

Проверка перехвата трафика из мобильного приложения

После подключения устройства, можно открыть приложение и выполнить какие-либо действия (пр. перейти в профиль). Видим, что трафик перехватывается.

Далее при нажатии правой кнопкой на ресурс, открывается меню, в котором необходимо выбрать “Enable SSL Proxying”.

*Focus – показывает в списке запросы/ответы только выбранного ресурса. Остальные находятся в “Other Hosts”.

После чего, при повторном действии в приложении, открывается доступ к данным.

Для удобства можно использовать вкладку “Sequence” для просмотра статуса, метода, наполнения, а также другой информации о запросах/ответах.

Дополнительный функционал Charles

Rewrite 

Является инструментом для подмены значений в запросах и ответах. Позволяет проверить как будет себя вести визуальная часть приложения при получении данных другого типа, большого количества символов, если по какой-либо причине с бэкенда не приходят данные, их можно подставить в ответе, не дожидаясь фикса, тем самым позволяя сэкономить время на тестирование.

Для работы необходимо перейти по следующему пути: “Tools” -> “Rewrite…”.

Далее откроется новое окно “Rewrite Settings”. Необходимо заполнить чек-бокс “Enable Rewrite” для доступа к таблице и активации инструмента.

При нажатии на кнопку “Add” в таблицу добавляется новый пункт, необходимо его выбрать. Для удобства, можно переименовать в поле “Name”.

При нажатии на кнопку “Add” у верхней таблицы, открывается окно, в котором необходимо вписать URL, запросы и ответы которого будут подменяться.

После указания URL нажимаем "OK".

Далее нажимаем на кнопку “Add” у нижней таблицы. В открывшемся окне устанавливаются правила подмены.

В поле “Type” выбирается объект, в котором будут происходить изменения/поиски значения. В примере выбрано тело ответа.

В поле “Name” указывается ключ, в поле “Value” значение. Также необходимо выбрать нужный чек-бокс, Request (Запрос) и/или Response (ответ). Для примера будем заменять значение null на дату “10.10.2023”.

Так как “Дата загрузки” приходит со значением “null”, мы не можем посмотреть, как она будет отображаться.

После указанных настроек нажимаем кнопку “OK”, выбираем созданный пункт “Body rewrite” и повторно отправляем запрос.

Ответ изменился, теперь мы видим указанную нами дату. Конкретно в этом примере, данный способ помог выявить баг, до отправки на прод, где должна была производиться проверка.

Аналогичные действия можно производить при тестировании мобильного приложения.

Исходное значение - 

Измененный ответ – 

Все настройки для одного URL можно хранить в одном пункте, не обязательно заново производить настройку под каждую подмену.

Breakpoint

Является инструментом для разрыва соединения на конкретной точке для mock’а данных в запросах и ответах. Позволяет вручную менять статус код, какие-либо данные.

Для работы необходимо перейти по следующему пути: “Proxy” -> “Breakpoint Settings…”.

В открывшемся окне необходимо заполнить чек-бокс “Enable Breakpoints”.

Далее нажать на “Add” и ввести в поле “Host” URL и нажать “Tab” для автозаполнения полей “Protocol” и “Path”.

Также выбрать на каком моменте будет происходить разрыв “Request” – запрос, “Response” – ответ. Нажать два раза “OK”.

Далее обновляем клиент в месте использования данной точки, в Charles появляется новое окно, сообщающее о разрыве.

Три основные кнопки:

Cancel – отмена действий.

Abort – разрыв соединения.

Execute – внести изменения и продолжить.

Нажимаем “Execute” и видим изменения в клиенте.

Изменим статус код в header ответа со значения “200” на “500”.

Таким образом можно тестировать корректное отображение уведомлений об ошибке при разных статусах.

Для быстрого включения/выключения данной функции существует кнопка в панели.