company_banner

Как приручить Charles Proxy?

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



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

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

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

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

    Первые шаги


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

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

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

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

    Запустите Charles Proxy, зайдите в меню HelpSSL ProxyingInstall Charles Root CertificateУстановить сертификатИмпортируем сертификат.



    Теперь у вас отображаются запросы, однако они зашифрованы, и кроме иероглифов ничего не видно. Чтобы видеть Request/Response в нормальном виде, нужно включить SSL Proxying и настроить домены, пакеты которых мы хотим перехватывать. А хотим мы получать запросы со всех сайтов. Для этого перейдите в раздел ProxySSL 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 перейдем в HelpLocal 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. Подмена данных:
    2. Proxy:
    3. Tools:
    4. Recording Settings
    5. Focus
    6. Repeat
    7. Repeat Advanced

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


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

    1.1 Breakpoint


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

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


    Запрос, в котором приходит это количество бонусов: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8



    Чтобы «повесить» Breakpoint на запрос, перейдите в раздел ProxyBreakpoint Settings. Далее поставьте галочку Enable BreakpointsAdd, и в открывшемся диалоговом окне «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 изменить количество бонусов нашего пользователя. Для этого откройте ToolsRewrite → галочка «Enable Rewrite« → Add. В поле Name можно ввести любое название подмены, например, «Change bonus», либо оставить по умолчанию «Untitled Set».



    Следующим шагом необходимо добавить в «Location» путь запроса. Для этого, в разделе LocationAdd заполните следующие поля и сохраните:

    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 — функция, позволяющая задавать разные параметры скорости соединения с выбранным доменом.

    Функция для тех, кто любит тестировать в лифте, в метро, в подземном переходе. Перейдем в ProxyThrottle 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. Активировать функцию можно так: ToolsMirror или ToolsAuto 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, которыми пользуются тестировщики мобильных приложений. На этом всё, и не забывайте прикреплять к баг-репорту сессию из сниффера. А если остались вопросы — скорее пишите в мой телеграм-канал @qa_chillout
    Юла
    Сlassified 2.0

    Комментарии 24

      0
      Сейчас большинство приложений используют SSL pinning.
      Как здесь обстоят дела?
        0
        Громкое заявление, но с настоящим SSL pinning'ом ничего не сделать без помощи разработчиков.
          0
          С помощью установки сертификатов на клиенты и добавления кода в приложения со стороны разработки.
          +1

          А чем он лучше бесплатного Fiddler'а?

            +3
            Перед нами стояло несколько задач:
            1) в команде есть коллеги, кто пользуется Windows, есть кто пользуется Mac. Нужен был универсальный инструмент;
            2) шаринг настроек;
            3) удобный интерфейс.
            И мы эти задачи решили с помощью Charles Proxy.
              –1
              Фиддлер не так давно полностью преобразился и вышел на мак. Поэтому то я и просил статью о нем парой комментов ниже.
              0
              Тем что Charles есть под макось?
                +1
                Да, Fiddler на маке — боль =)
              0
              Спасибою. Такую бы по фиддлеру статью почитать.
                +1
                Может быть составлю.
                  0
                  Присоединяюсь к просьбе.
                    0
                    По Fiddler Classic подготовил статью, выложил в канале у себя: t.me/qa_chillout/66
                      0
                      Спасибо, что сообщили!
                      Отличная статья получилась, на мой взгляд (читал Хабра-версию). В точности соответствует заголовку.
                      Ни одной ошибки правописания — не часто такое встретишь.
                      С удовольствием поставил плюс статье и карме.

                      Что касается улучшений, то я бы посоветовал сделать скриншоты с мелким текстом кликабельными (т.е. масштабируемыми). Иначе мелкий текст не разглядеть, а хочется :-)

                      <a href="https://habrastorage.org/файл_большой_картинки.png"><img src="https://habrastorage.org/файл_маленькой_картинки.png" title="Нажмите для увеличения" alt="Скриншот"/></a>

                      Еще заметил, что в разделе «Операции над запросами» картинки сливаются с текстом — отправил замечание в личку автору статьи.
                        0
                        Спасибо =)
                  +1

                  Таких статей на Хабре и так уже много, но всё равно спасибо. Вы говорили, что никто не разбирается в Charles, сможете ли тогда ответить на пару вопросов сами?)


                  1) Как дебажить веб сокет
                  2) Почему не burp

                    +1
                    Есть отдельный запрос на websocket, тут все просто. А почему не burp, на сколько я помню, там нет например throttle Settings.
                    +1
                    Отличная статья, спасибо!
                    Единственное, чего бы хотелось — это кликабельных скриншотов, чтобы не увеличивать масштаб браузера до 150% для их просмотра.
                      0
                      MTU — максимальное передающее устройство для текущего пресета.

                      О каком устройстве речь?
                      ru.wikipedia.org/wiki/Maximum_transmission_unit
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          Привет! Есть некоторые вопросы:)
                          1. Я использую autosave, тк при использовании mirror чарлик сохраняет файлы в неизвестном формате, которые нечем открыть, но mirror кажется более удобным, если сохранял бы в иерархии папок
                          2. Чарлик сам меняет настройки прокси Мака и иногда сидишь в ступоре от того, что инет не работает, если чарлик офф

                          Комментарий:
                          Как тебе проксиман? Его можно назвать убийцей чарлика, так как там есть почти весь функционал(кроме троттлинга), но это пока что. Так же чарлик очень тяжелый, работая на нормальной машине, испытываю сложности при работе с чарликом.
                            0
                            Привет! Да чарлик иногда «шалит» и на маке иногда пропадает инет, а если еще работать под VPN — возникают некие грабли, на которые натыкаешься, но потом уже привыкаешь и про них знаешь. Proxyman — крутой, пробовал его.
                            0
                            Большое спасибо за подробную статью!
                            Немного выбивается, что настройки сети для iOS указаны на русском. Я из-за этого пропустил, что кроме установки (которая сама по себе требует подтверждения) нужно ДОПОЛНИТЕЛЬНО разерешить полное доверие сертификату.
                            'Settings' > 'General' > 'About' > 'Certificate Trust Settings' > Enable Full Trust
                              0
                              Спасибо, рад, что понравилась статья. Да, сорри, не указал это.
                              0

                              Добрый вечер. При первой попытке использования чарльз столкнулась с проблемой безопасности. Браузер не пускает на сайты https если включен прокси (небезопасное подключение). Можно ли это как-то обойти?

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

                              Самое читаемое