Привет! Многие из тех, кто приходит к нам на собеседование на должность тестировщика, с гордостью заверяют, что они могут пользоваться Charles Proxy. Но когда погружаешься в техническую часть, то становится очевидно, что кандидат только слышал об этом инструменте. Давайте уже наконец скорее приручим эту вазу!



Википедия нам сообщает, что:

Charles представляет собой кроссплатформенное приложение прокси-сервера для отладки HTTP, написанное на Java. Он позволяет пользователю просматривать HTTP, HTTPS и активированный трафик TCP-порта, доступ к которому осуществляется с локального компьютера, на него или через него. Сюда входят запросы и ответы, включая HTTP-заголовки и метаданные (например, файлы cookie, кэширование и кодирование информации), с функциями, предназначенными для помощи разработчикам и тестировщикам в анализе соединений и обмене сообщениями.

Небольшое пояснение

Сниффинг — процесс мониторинга и перехвата всех пакетов, проходящих через сеть, с помощью инструментов сниффинга (Charles Proxy).

Первые шаги

1. Установка и запуск

Для начала необходимо загрузить и установить приложение.

Если у вас не приобретена лицензия, то будет доступна 30-ти дневная пробная версия с ограничениями (функциональность не блокируется, но будут появляться окна с таймаутом 5-10 секунд до возобновления использования, а также через 30 минут будет завершаться работа приложения).

2. Начинаем сниффить трафик

Запустите Charles Proxy, зайдите в меню Help > SSL Proxying > Install Charles Root Certificate (см.1) > Установить сертификат > Импортируем сертификат.



Теперь у вас отображаются запросы, однако они зашифрованы, и кроме иероглифов ничего не видно. Чтобы видеть Request/Response в нормальном виде, нужно включить SSL Proxying и настроить домены, пакеты которых мы хотим перехватывать. А хотим мы получать запросы со всех сайтов. Для этого перейдите в раздел Proxy > SSL Proxying Settings.



В открывшемся диалоговом окне поставьте галочку Enable SSL Proxying, выберите раздел Enclude и нажмите Add.



Далее заполните поле Host значением * (как показано на скриншоте) и нажмите ОК.



В диалоговом окне «SSL Proxying Settings» нажмите ОК.



Теперь можно смотреть запросы, отправляемые на сервер, и ответы сервера.

3. Проксирование трафика веб-браузера

При перезапуске Charles достаточно активировать Windows Proxy (если у вас ОС Windows) или Mac Proxy.



4. Настройка прокси на Android

Чтобы отображались запросы приложения Android, у вас должна стоять соответствующая сборка Android-приложения, c установленным в манифесте разрешением. Давайте представим, что такое приложение имеется, и мы хотим начать получать его трафик.

Для этого узнаем 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* > Сохраните измененные свойства сети.

Теперь необходимо перейти по ссылке chls.pro/ssl или charlesproxy.com/getssl, «Разрешить» загрузку профиля конфигурации. Далее перейдите в Настройки > Профиль загружен > Установить. Затем перейдите в Настройки > Основные > Об этом устройстве > Доверие сертификатам > найдите установленный сертификат и сделайте его «Доверенным».

Функциональность Charles Proxy

1. Подмена данных:
   
   • 1.1 Breakpoint
   • 1.2 Rewrite
   • 1.3 Map Local
2. Proxy:
   
   • 2.1 Throttle Settings
   • 2.2 Reverse Proxies
   • 2.3 Port Forwarding
   • 2.4 MacOS Proxy/Windows Proxy
3. Tools:
   
   • 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

1. Подмена данных

Представим, что нам надо протестировать на клиенте верстку. Нужно проверить, как будет отображаться большое количество бонусов у пользователя. Один из вариантов, который многие предложат: изменить в БД количество бонусов и проверить на клиенте. Да, вы будете правы! Однако на сервере может быть кэш, и необходимо подождать какое-то время, пока количество бонусов не обновится, либо просто подключиться к самой базе и выполнить запрос — это занимает определенное время. Есть вариант проще: изменить ответ от сервера! В Charles Proxy есть три способа подмены данных:

1.1 Breakpoint

Breakpoint — это некая точка остановки запроса. Когда обнаруживается запрос из заданного списка, для дальнейшего ручного взаимодействия с параметрами запроса открывается отдельное окно. В нём перейдите к ручному изменению запросов и ответов. Удобно использовать эту функцию, когда тестируете API или разные ответы сервера.

У нас имеется приложение и профиль пользователя, у которого сейчас 0 бонусов на счету:


Запрос, в котором приходит это количество бонусов: 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», в таком случае откроется новое окно, где будут выполняться запросы.

Резюме

В этой статье мы постарались описать те функции Charles Proxy, которыми пользуются тестировщики мобильных приложений. На этом всё, и не забывайте прикреплять к баг-репорту сессию из сниффера.