Статья Charles. Обход API авторизации в Android приложении

Приложение Charles Proxy — большой помощник и тестировщику, и разработчику. Мы хотим рассказать вам про функции «Чарльза», показать, как им пользуемся в своей работе мы. Но для начала поможем разобраться с приложением и правильно его настроить.

Приложение Charles Proxy — большой помощник и тестировщику, и разработчику. Мы хотим рассказать вам про функции «Чарльза», показать, как им пользуемся в своей работе. Но для начала поможем разобраться с приложением и правильно его настроить.

Charles – программа прокси для изучения и отладки HTTPS трафика между клиентом и сервером. С его помощью можно проверить состав запроса и ответа, при необходимости изменить его. Например, чтобы увидеть как ведет себя веб-приложение при некорректном ответе от сервера, или какой ответ присылает сервер при некорректном запросе. Можно перенаправлять запросы на другой хост, эмулировать проблемы в сети и много чего еще.

Документацию можно почитать на официальном сайте, а в данной заметке я покажу основные кейсы его использования.

Всем привет, меня зовут Роман, я тестировщик в компании СберМегаМаркет. 

Итак, по первой ссылке в гугле на запрос «Charles что такое», можно найти примерно следующее: Charles – один из самых распространенных инструментов для сниффинга трафика. В свою очередь, сниффинг трафика – это перехват и анализ сетевого трафика.

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

Особенно обширно Charles применяется в мобильном тестировании, ввиду того, что это один из самых простых и удобных способов посмотреть, уходят ли запросы с мобильного клиента, с какими параметрами они отправляются и как отвечает backend. Дальше в статье расскажу о Charles для начинающего QA.

Диагностируйте сетевой трафик вашего мобильного приложения

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

Если вы не знаете, что такое Charles, это сетевой прокси-сервер. Другими словами, его можно использовать для перехвата сетевого подключения (в нашем случае от устройств), чтобы разрешить просмотр, перенаправление, изменение и отладку. Это также очень полезно для тестирования локального сервера.

Я часто забываю об одной из платформ, поэтому я документирую как iOS, так и Android, чтобы обеспечить простую справочную информацию для обеих.

Перед запуском эмулятора или симулятора

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

Эмулятор Android

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

Но перед этим вы должны убедиться, что ваш запуск эмулятора подключен к Интернету. Иногда это невозможно по неизвестным мне причинам. Следовательно, способ обойти это в блоге ниже. (Используйте его, только если ваш эмулятор не может подключиться к Интернету.)

Настройка прокси-IP

После этого в эмуляторе перейдите к настройкам Wi-Fi и нажмите и удерживайте AndroidWifi, где вы получите доступ к настройкам Modify network.

Установка сертификата

Иногда (на самом деле, в большинстве случаев) нам нужно установить сертификацию для просмотра защищенной сети. Для этого перейдите в браузер Chrome по адресу chls.pro/ssl.

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

После загрузки вам будет предложено установить его. После этого вы можете сохранить его под любым именем.

Обратите внимание, что для этого на вашем устройстве должен быть установлен хотя бы «пин-код». Если нет, вам будет предложено установить его там.

Обновление для Android SDK API 30 (Android 11)

Новое требование для Android SDK API 30 в настройке Charles, как показано ниже.

Исправление проблем

Если вам не удается подключиться к Charles, попробуйте следующее:

• Перед настройкой прокси-сервера Charles убедитесь, что ваше устройство подключено к Интернету.
• Выключите сотовую сеть и просто включите сеть Wi-Fi на устройстве.
• Убедитесь, что параметр Чарльза macOS Proxy равен OFF. Вы можете проверить это, заглянув в Прокси-сервер → Прокси-сервер macOS Чарльза. (Обратите внимание, что этот шаг противоположен iOS.)

Симулятор iOS

В iOS настройка прокси-сервера Simulator отличается от реального устройства и проще. Вам не нужно явно вводить адрес прокси-сервера, и пусть Чарльз сделает это за вас.

Подключение Чарльза к симулятору

После этого вы получите следующее:

Установка сертификата

Иногда (на самом деле, в большинстве случаев) нам нужно установить сертификацию для просмотра защищенной сети. Зайдите в браузер Safari и перейдите по адресу chls.pro/ssl.

Если Charles уже подключен, вы должны получить запрос на загрузку профиля конфигурации, как показано ниже. Разрешить это.

Тогда вы получите следующее сообщение:

После этого нажмите на установку. Вы установите что-то, как показано ниже.

После этого шага остается еще один.

Вот и все.

Исправление проблем

Если вы не можете подключиться к Чарльзу, попробуйте следующее:

• Перед настройкой прокси-сервера Charles убедитесь, что ваше устройство подключено к Интернету.
• Убедитесь, что параметр Charles ‘macOS Proxy равен ON. Вы можете проверить это, заглянув в Charles Proxy → macOS Proxy. (Обратите внимание, что этот шаг противоположен Android)

Спасибо за прочтение.

Добрый день, уважаемые форумчане. Давно от меня не было статей, из-за того что проходил курс SQLiM aka SQL Injection Master от codeby. Хоть наш поток и закончился почти месяц назад, я хотел максимально закрепить пройденный материал и практиковался на разных ресурсах. Курс, кстате, советую всем. Сегодня мы разберем необычную уязвимость в android приложениях для обхода авторизации клиентов. Сегодняшним нашим инструментов будет незаменимый Charles, который лучше всех справляется со своей задачей.

Charles (или Charles Web Debugging Proxy), если верить википедии — это кроссплатформенное приложение прокси-сервера отладки HTTP, написанное на Java. Он позволяет пользователю просматривать HTTP, HTTPS, HTTP / 2 и включенный трафик TCP-порта, доступ к которому, с локального компьютера или через него. Простыми словами, мы можем модифицировать request/response. А с помощью специальных правил, запрос будет модифицироваться автоматически.

3. Почему Charles, а не Burp Suite

После прочтения статьи, некоторые могут задуматься, почему автор решил использовать charles, если есть всеми любимый burp suite. Burp suite — несомненно мощный инструмент, но, для наших целей Charles отлично вставлялась в пазл. Вместо 1000 слов, приложу основные различия Charles vs Burp Suite.

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

4. Подготовка рабочего окружения и настройка

Для запуска уязвимого приложения, нам естественно нужен будет Android девайс. Мы бы могли провернуть такую же операцию на реальном телефоне, но, яблочник раз — яблочник навсегда
Возьмем в качестве эмулятор Nox Player, который без грязных рук разрешает назначать прокси, в отличии от BlueStacks.
Итак, запускаем Charles, следом запускаем наш эмулятор и настраиваем для него прокси. В качестве IP адреса указываем локальный IP адрес компьютера, где у нас запущен Charles. В linux и mac os, ip адрес можно узнать командой ifconfig. Для windows существуют схожая команда — ipconfig.

И вбиваем его в качестве прокси сервера для беспроводной точки доступа на android устройстве.

Для просмотра HTTPS траффика в нормальном виде, нам нужно установить сертификат Charles на нашем android устройстве.

1. Получите сертификат SSL. Посетите этот URL из своего мобильного браузера:

   Ссылка скрыта от гостей

2. В поле «Имя сертификата» введите все, что хотите.
3. Примите предупреждение о безопасности и установите сертификат. Если вы установите его успешно, то вы, вероятно, увидите это так: В телефоне Настройки -> Безопасность -> Доверенные учетные данные

После этого процесса идем проверять всё ли сделали правильно. Открываем в браузере телефона любой сайт и наблюдаем изменения в Charles.

Если вы видите примерно такую картину, значит вы всё сделали правильно. Почему у нас в запросе везде ноли и единицы? Потому-что мы не включили для данного хоста пункт SSL Proxying, который служит расшифровкой SSL траффика. Включаем SSL проксирование для всех хостов, чтобы не включать каждый нужный хост индивидуально. Нажимаем Proxy -> SSL Proxying Settings -> Add и заполняем форму как на скриншоте

Открываем на эмулятор сайт еще раз и глянем в Charles

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

5. Обход API авторизации

Итак, запускаем наше приложение. Ждем пока всё прогрузится. Для перехвата запроса пытаемся авторизоваться по своему номеру. включаем брекпоинты (правый клик по хосту и включить пункт Breakpoints) для хоста и переходим в режим брекпоинтов (красная галочка на верхней панели) и вводим полученный код.

Видим запрос который проверяет код. Запускаем запрос и смотрим на ответ.

В качестве подтверждения правильности кода, сервер отправил нам JSON ответ. Ладно, сохраним этот json объект, и теперь пытаемся авторизовать с рандомного номера и указываем любой код.

Смотрим ответ от сервера

Сервер сообщает нам что код неверный, по сути так и есть, ведь мы указали рандомный номер и код. А что будет если подставить ответ от успешного входа вместо этого ответа? Меняем JSON ответ

И пускаем ответ к приложению кнопкой Execute. Смотрим что произошло в приложении

Ура! Мы в системе под чужим номером. Хоть это было не совсем сложно, но, мы обошли авторизацию.

Вся информация была предоставлена исключительно в образовательных целях. Эксплуатация уязвимости была выполнена на реальном примере, в реальном приложении. Т.е. это может встречаться на практике. Зафиксить эту уязвимость очень легко. Достаточно при каждом запросе от клиента, предоставлять ему токен, по которому сервер авторизует юзера, а не JSON объект или иной текст, подтверждающий удачный вход. До скорой встречи!

Как эмулировать проблемы в сети

Задача: посмотреть, как работает сервис в различных сетевых условиях.

Для этого предназначен инструмент Throttle (Proxy – Throttle Settings).

Здесь можно включить сетевые ограничения для определенных или всех хостов, а так же задать различные сетевые параметры.

• Bandwidth – пропускная способность;
• Utilisation – эффективность использования пропускной способности;
• Latency – задержка в миллисекундах между клиентом и сервером;
• MTU – максимальный объём данных за одну итерацию;
• Reliability – вероятность, что соединение не удастся;
• Stability – вероятность, что соединение будет нестабильным.

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

Просмотр информации

Просмотр информации о запросе идентичен и для Structure, и для Sequence.

Overview — информация о запросе (статус, время, метод и т д). Полная информация, которая доступна о запросе.

Contents — содержимое запроса с хедерами, куками, json-ами и т.д. Основная рабочая вкладка, на которой смотрим содержимое запросов/ответов. Для ответов чаще всего используются Headers и JSON Text.

• По двойному клику по полю открывается отдельное окно с необходимым значением. Удобно использовать для просмотра больших данных или для копирования.

Summary — сравнительная информация о группе запросов. Удобно сравнивать время, размер и другие данные о запросах.

Chart — сравнительная диаграмма о времени выполнения группы запросов. По сути, это очередность запросов со временем их выполнения. Будет полезна, если надо прикинуть, сколько относительно друг друга занимают по времени запросы.

Notes — личные заметки о запросе. В заметке можно написать, что делает запрос, какие-то данные для подмены или просто выразить свое негодование.

Сама заметка теперь будет отображаться во вкладке Overview запроса.

Другие полезные функции

Инструмент No Caching предотвращает кэширование через заголовки.

MacOS Proxy или Windows Proxy разрешает или запрещает проксирование трафика из браузера, установленного на том же компьютере, что и Charles.

Инструмент Port Forwarding (проброс портов) позволяет пересылать запросы с одного порта на другой.

Mirror – автоматически сохраняет в указанную папку все ответы, возвращаемые в Charles. Затем их можно использовать как моки.

Как менять запросы и ответы

Задача: на лету изменить параметр в заголовке или в теле запроса и посмотреть, что вернёт сервер, либо наоборот, модифицировать ответ сервера, чтобы проверить как поведет себя клиент. 

В этом случае можно использовать инструмент Rewrite (Tools – Rewrite – галочка Enable Rewrite.

Добавьте новое правило, введите хост (или оставьте пустым, тогда правило будет действовать для всех хостов), затем заполните Rewrite Rule, где укажите что на что необходимо заменить.

В примере ниже, значение поля bonus в теле ответа будет заменено со 100 на 5000.

• Type: Body – потому что меняем параметр в теле;
• Where: Response – потому что меняем ответ;
• Match: в Value – значение, возвращаемое сервером;
• Replace: в Value – значение, на которое необходимо заменить Value из Match.

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

Аналогичным способом через Rewrite можно изменять, добавлять, удалять заголовки, менять коды ответа сервера, хосты и url.

Как подменить хост в API

Задача: подменить продовый хост с API на тестовый. Это можно сделать двумя способами.

Первый, через инструмент Rewrite, подобно тому, как описано в предыдущем разделе.

Второй способ подменить API, заключается в использовании инструмента Map Remote (Tools – Map Remote).

В зависимости от задачи можно подменить хост целиком, его часть или только параметры.

Как вручную отредактировать запрос

Задача: перехватить запрос (ответ) и перед отправкой (приемом) его отредактировать. Отличие от предыдущей задачи заключается в том, что в ней данные менялись на лету по заранее заданному шаблону, здесь же редактирование осуществляется вручную.

Запросы можно редактировать используя инструмент Compose. Прежде нужно, чтобы запрос выполнился хотя бы один раз. Найдите его среди остальных запросов. В контекстном меню выберите Compose.

В открывшемся окне можно изменить тело запроса, метод, протокол, url, параметры, заголовки и куки. Затем нужно нажать кнопку Execute и запрос будет отправлен с новыми данными.

Инструмент Repeat в контекстном меню запроса отправит его на сервер еще раз.

Repeat Advanced – похож на Repeat, однако позволяет указать количество отправляемых запросов и задержку между ними. Данный функционал может быть полезен при проверке сервера на флуд.

С помощью инструмента Breakpoints (точки остановка) можно перехватывать и изменять не только запросы, но так же и ответы от сервера, прежде чем они попадут на клиент.

Для начала нужно включить возможность использования Breakpoints (Proxy – Breakpoint Settings – Enable Breakpoints).

Далее нужно указать URL запроса, который в случае выполнения должен быть перехвачен. Это можно сделать в том же окне Breakpoint Settings, либо повесить Breakpoint через контекстное меню, выбрав ранее выполненный запрос.

Перед выполнением запроса он будет остановлен и вы сможете отредактировать его тело, метод, протокол, url, параметры, заголовки и куки.

Когда запрос будет отправлен, ответ так же будет перехвачен, его аналогичным способом можно отредактировать.

Как и для чего мы в СберМегаМаркете используем Charles

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

Во-вторых, одна из самых полезных и незаменимых фич в Charles – это подмена ответа с backend. Это можно сделать с помощью нескольких инструментов, одним из которых являются Breakpoints. Их мы используем чаще всего.

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

Во время авторизации используем ручку merchant/search, в ответе которой приходит атрибут startFlow типа string, который свидетельствует о том, должна ли отображаться заглушка и какие вкладки для заказов необходимо отображать.

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

Во-первых, на тестовом окружении нет необходимых аккаунтов, на которых можно проверить отображение заглушки.

Во-вторых, создать такой аккаунт на данный момент довольно сложно ввиду того, что разработка функционала регистрации таких аккаунтов еще не закончена.

В-третьих, атрибут, который приходит в ответе ручки, не хранится в БД, а формируется на бэке по отдельной логике.

Итак, как я уже писал выше, основной инструмент, который понадобится для подмены ответа – это Breakpoints (Точки останова). Если вкратце, Breakpoints срабатывают в тот момент, когда Charles «ловит» запрос к методу, для которого указана точка останова. Запрос не отправится до того момента, пока пользователь руками не отправит его. Сделано это для того, чтобы можно было отредактировать параметры запроса или итоговый ответ.

Итак, указываем в прокси телефона ip и порт Charles и открываем приложение. Логинимся в аккаунт, который работает по поддерживаемой нами схеме.

Открываем Charles и видим запросы, которые проходили за время логина в приложение.

Для того, чтобы отобразилась заглушка, необходимо в ручке merchant/search в поле startFlow прислать значение «true».

Для того, чтобы подменить это поле, необходимо поставить Breakpoint на нужный метод. Для этого в списке запросов находим нужный ~> открываем настройки ~> выбираем пункт Breakpoints.

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

В открывшемся окне нам доступно редактирование тела запроса, если перейти на вкладку «Edit request». В нашем случае менять тело запроса не нужно, поэтому просто отправляем запрос. После этого снова откроется окно в Charles, где уже можно редактировать ответ, который пришел от api. Для редактирования ответа необходимо перейти на вкладку «Edit response» и выбрать удобный формат отображения содержимого ответа.

Из условия мы помним, что для отображения заглушки значение в поле startFlow должны быть stub. Меняем «CD» на «stub» и жмем «execute».

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

В этой статье я преимущественно рассказал, как законнектить Charles и мобильный девайс, описал проблемы, которые наиболее часто возникают при настройке связки телефон + Charles и постарался на примере продемонстрировать базовый уровень того, как мы в СберМегаМаркете используем Charles при тестировании мобильного приложения. 

Возможности Charles гораздо обширнее, чем может показаться на первый взгляд. При желании можно создать несколько файлов с заранее сохраненными ответами от api, настроить Map Local (подмен ответа с бэкенда на ответ, сохраненный в локальном файле) и тестить огромные части фронта без фактического взаимодействия с реальным бэкэндом. Без прохождения процессов по созданию необходимых тестовых данных и соответственно без ощутимых временных затрат. Однако, об этом я хочу поговорить в следующей статье.

Как эмулировать недоступность сервера

Задача: проверить как поведет себя клиент при недоступности хоста.

Инструмент Allow List (Tools – Allow List) наоборот блокирует все хосты кроме разрешенных.

Установка и настройка Charles

Скачать последнюю версию можно с официального сайта приложения.

Без лицензии вам будет доступна пробная версия на 30 дней. После истечения этого срока появятся ограничения — функции не заблокируются полностью, но использование ограничено по времени.

Затем нужно установить сертификат. Для этого выполните следующие действия:

• Пройдите путь Help → SSL Proxying → Install Charles Root Certificate.

• Найдите в KeyChain сертификат Charles Proxy.

• Сделайте его доверенным, изменив настройки с дефолтных Use System Defaults на Always Trust.

Как замокать ручку или подменить файл

Задача: подменить ответ от сервера на заранее подготовленный, сохраненный локально, например, чтобы замокать ответ ручки или заменить скрипт.

Для этих целей можно использовать инструмент Map Local (Tools – Map Local).

В настройках укажите ручку или файл на сервере, а также локальный файл, который будет использован вместо них. Поддерживаются форматы HTML, CSS, JSON, XML и медиафайлы.

Как раздать VPN

Задача: дать доступ другому устройству в корпоративную сеть.

Если компьютер с установленным Charles имеет доступ к сети VPN, то и устройства, трафик которых проксируется, будут иметь доступ к той же сети.

FAQ

Что делать, если не скачивается сертификат?

1. Проверьте, включен ли SSL Proxying на оба запроса http://ssl.charles и http://chls.pro.

2. Проверьте настройки браузера на загрузку файлов.

3. Проверьте, не включен ли у вас VPN, так как с ним весь трафик идет в обход Charles.

Что делать, если не видно запросов – везде Unknown?

1. Проверьте, установлен ли сертификат.

2. Включите SSL Proxying на конкретный запрос через правый клик – Enable SSL Proxying.

3. Проверьте Allow List и Block List в меню Tools. Оба этих листа могут запрещать соединение для вашего запроса. Лучше воздержаться от их использования, если вы не очень понимаете их суть.

4. На Android в сборке клиента должны быть прописаны манифесты для Charles Proxy.

5. Если запрос зашифрован, то его данные увидеть нельзя.

Что делать, если сделал все по инструкции, а запросы не вижу?

1. Проверьте прописанный IP своего MacBook и порт

2. VPN на девайсе должен быть выключен и весь трафик должен идти через Charles.

Что делать, если мне нужен VPN для работы?

Ничего страшного, VPN настраивается на MacBook, а девайс подключается через прокси к нему, получая преимущества Charles и VPN.

Что делать, если интернет не работает без Charles?

Откройте «Системные настройки». Далее следующий путь: Сеть → Ваша сеть → Дополнительно → Таб Прокси → Снять галочки с 2 чекбоксов у «Веб-прокси» и «Защищенный веб-прокси» → Ок → Применить

Что делать, если Charles Proxy вылетает каждые 30 минут и постоянно показывает баннер?

Если у вас установлена триал-версия, то она ограничивает время сессии на 30 минут. Можно перезапустить и пользоваться дальше, не забывая про ограничения пробной версии.

Подключение девайса

Charles можно установить в связке с ПК и с мобильным устройством. Для этого подключаем девайс и ноутбук к одной сети Wi-Fi. Для MacBook это настраивается следующим образом:

1. На девайсе в настройках Wi-Fi переходим в дополнительные настройки и подключаем proxy.

2. В Proxy вводим IP ноутбука и порт 8888 (он же дефолтный).

3. На экране MacBook после подключения девайса появится диалоговое окно, нажмите Allow.

На разных девайсах настройки выглядят по-разному, обратите внимание. Например, на Android нужно пройти путем Настройки → Подключения → Wi-Fi → Выбрать сеть → Дополнительно → Прокси → Вручную

Нужные параметры можно посмотреть в Charles по пути: Help → SSL Proxying → Install Root Certificate on a Mobile Device or Remote Browser. Также IP можно посмотреть в Help → Local IP Address.

Установка и настройка Charles

Без лицензии вам будет доступна пробная версия на 30 дней. После истечения этого срока появятся ограничения — функции не заблокируются полностью, но использование ограничено по времени.

Затем нужно установить сертификат. Для этого выполните следующие действия:

• Пройдите путь Help → SSL Proxying → Install Charles Root Certificate.
• Найдите в KeyChain сертификат Charles Proxy.
• Сделайте его доверенным, изменив настройки с дефолтных Use System Defaults на Always Trust.

Подключение девайса

Charles можно установить в связке с ПК и с мобильным устройством. Для этого подключаем девайс и ноутбук к одной сети Wi-Fi.

1. На девайсе в настройках Wi-Fi переходим в дополнительные настройки и подключаем proxy.
2. В Proxy вводим IP ноутбука и порт 8888 (он же дефолтный).
3. На экране MacBook после подключения девайса появится диалоговое окно, нажмите Allow.

Установка сертификата на девайс

Прежде чем начать работу, нужно установить на свой девайс сертификат, скачав его в браузере по ссылке chls.pro/ssl. Используйте Safari для iOS и системный браузер для Android.

Если скачивание сертификата не началось автоматически, нужно в установленном на ноутбуке Charles найти запросы http://ssl.charles и http://chls.pro, правым кликом по каждому из них выбрать Enable SSL Proxying и снова пройти по ссылке.

Android: Если установка сертификата после загрузки не произошла, ищем «Сертификаты» в настройках девайса, выбираем пункт меню Установка ЦА/ЦС сертификатов безопасности. Ищем скачанный на девайс сертификат и устанавливаем его. Если потребуется задать PIN при установке, то задать любой.

Финальные настройки

Это нужно, чтобы не видеть запросы с браузеров самого ноутбука.

FAQ

Что делать, если не скачивается сертификат?

1. Проверьте, включен ли SSL Proxying на оба запроса http://ssl.charles и http://chls.pro.
2. Проверьте настройки браузера на загрузку файлов.
3. Проверьте, не включен ли у вас VPN, так как с ним весь трафик идет в обход Charles.

Что делать, если не видно запросов – везде Unknown?

1. Проверьте, установлен ли сертификат.
2. Включите SSL Proxying на конкретный запрос через правый клик – Enable SSL Proxying.
3. Проверьте Allow List и Block List в меню Tools. Оба этих листа могут запрещать соединение для вашего запроса. Лучше воздержаться от их использования, если вы не очень понимаете их суть.
4. На Android в сборке клиента должны быть прописаны манифесты для Charles Proxy.
5. Если запрос зашифрован, то его данные увидеть нельзя.

Что делать, если сделал все по инструкции, а запросы не вижу?

1. Проверьте прописанный IP своего MacBook и порт
2. VPN на девайсе должен быть выключен и весь трафик должен идти через Charles.

Что делать, если мне нужен VPN для работы?

Ничего страшного, VPN настраивается на MacBook, а девайс подключается через прокси к нему, получая преимущества Charles и VPN.

Что делать, если интернет не работает без Charles?

Что делать, если Charles Proxy вылетает каждые 30 минут и постоянно показывает баннер?

Если у вас установлена триал-версия, то она ограничивает время сессии на 30 минут. Можно перезапустить и пользоваться дальше, не забывая про ограничения пробной версии.

Переустановка сертификата

Удаляем старый сертификат с устройства в настройках профиля (iOS) или ЦА сертификатах (Android). Проходим установку сертификата заново, как это описано выше.

Установка и предварительная настройка

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

При первом запуске Charles скорее всего попросит разрешения внести изменения в сетевые настройки вашего компьютера, согласитесь.

Настройка прокси

Затем перейдите в Proxy – SSL Proxying Settings, установите галочку в Enable SSL Proxying, нажмите кнопку Add и добавьте локацию, в Host укажите «.», а в Port «*». Такая настройка позволит получать запросы и ответы со всех хостов. Или вы можете добавить только интересующие.

Установите сертификаты на компьютер: Help – SSL Proxying – Install Charles Root Certificate.

Укажите порт: Proxy – Proxy Settings – вкладка Proxies – Port: 8888.

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

Если не хотите видеть запросы с ПК, перейдите на вкладку MacOS (Windows) и снимите чекбоксы. Но если целью является изучение трафика из браузера, наоборот, удостоверьтесь, что чекбоксы установлены.

Когда закончите с настройками прокси, перезапустите Charles.

Настройка прокси на устройстве

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

Компьютер с Charles и устройство должны находиться в одной сети.

Далее нужно установить сертификат прокси-сервера.

Установите скачанный сертификат Charles. Процесс установки зависит от используемого устройства и может различаться.

Например, чтобы установить сертификат на iPhone откройте Настройки (Settings), перейдите в Основные (General), пролистайте вниз и выберите пункт Профили и управление устройством (Profiles & Device Management). В открывшемся меню найдите загруженный профиль сертификата, откройте его, а затем установите.

Дополнительно может потребоваться установить доверие сертификату. Откройте Настройки (Settings) – Основные – Об этом устройстве (About), пролистайте вниз до конца, выберите пункт Доверие сертификатов (Certificate Trust Settings). В открывшемся окне отметьте переключателем сертификат, которому хотите дать доверие.

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

Подробнее про установку сертификатов можно прочитать в документации Charles.

Теперь можно проксировать и изучать трафик.

Режим Structure

Можно отображать запросы в виде структурированных папок.

Дерево запросов — список запросов, который был отправлен приложением. Поле запроса — информация о запросе. Поле ответа — ответ сервера. Фильтр — поле для фильтрации запросов.

Включите Focus на запросы, с которыми чаще работаете (кликаем правой кнопкой мыши по домену запроса или конкретному запросу, и в выпадающем меню выбираем Focus). Это поможет отслеживать только необходимые домены/запросы, группируя оставшиеся в Other Hosts.

Сессии можно сохранять и загружать через File → Import/Export Session. Формат для сохранения .chls

Как смотреть трафик

Запустите Charles. На устройстве или в браузере откройте интересующий сайт или приложение. При выполнении действий на клиенте, запросы с него и ответы от сервера будут логироваться в Charles.

В режиме Structure в левой части окна отображается список запросов, сгруппированный по хостам. Выделив элемент хоста, в правой части окна будет выведена подробная информация о запросе (сверху) и ответе (снизу), в том числе метод, заголовки, куки, запрос, ответ, параметры и прочая информация.

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

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

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

Не забывайте пользоваться Поиском (Edit – Find или Cmd+F). Он поможет быстро найти интересующий параметр или подстроку среди перехваченных запросов.

На что стоит обращать внимание:

• запрос уходит на верный URL;
• допустимое время между действием, отправкой запроса и получением ответа;
• метод, код ответа, тело, параметры cоответствуют ожидаемым, значения не пустые;
• формат данных;
• запрос не дублируется;
• данные отобразились на клиенте.

Бабблы подключенных настроек

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

На скриншоте выше можно увидеть, что в данный момент включена запись запросов Recording, включены правила подмены Rewrite, включена локальная подмена Map Local на запрос, а также выставлены Breakpoints на некоторые запросы.

Итак, мы разобрались, как настроить Charles, посмотрели на его интерфейс, и теперь — наконец-то! — можем начинать работу. Но об этом поговорим уже в следующей статье от студии мобильной разработки CleverPumpkin.

Бабблы подключенных настроек

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

На скриншоте выше можно увидеть, что в данный момент включена запись запросов Recording, включены правила подмены Rewrite, включена локальная подмена Map Local на запрос, а также выставлены Breakpoints на некоторые запросы.

Итак, мы разобрались, как настроить Charles, посмотрели на его интерфейс, и теперь — наконец-то! — можем начинать работу. Но об этом в следующей статье от студии мобильной разработки CleverPumpkin.

Переустановка сертификата

Сертификат Charles действует год. По истечении его необходимо переустановить. Для этого сбрасываем старый сертификат на вашем Маке: Help → SSL Proxying → Reset Charles Root Certificate.

Удаляем старый сертификат с устройства в настройках профиля (iOS) или ЦА сертификатах (Android). Проходим установку сертификата заново, как это описано выше.

Как подменить код ответа сервера

Задача: проверить как поведет себя клиент при неожиданном коде ответа от сервера.

Как и в предыдущих двух примерах, тут подойдет инструмент Rewrite (Tools – Rewrite).

Полезные ссылки

Официальный сайт Charles
Как раздать VPN через Fiddler или Charles

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

Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.

Финальные настройки

Перед началом работы отключите Proxy на ноутбуке: Proxy → Proxy Settings → MacOS → уберите галочки с чекбоксов Enable MacOS Proxy и Enable MacOS Proxy on launch.

Это нужно, чтобы не видеть запросы с браузеров самого ноутбука.

Затем включаем Proxy → Start Proxying и Start Recording. На нужных запросах выбираем правым кликом Enable SSL Proxying.

Интерфейс

Перед тем, как приступать к работе, рассмотрим основные элементы управления и режимы просмотра запросов и ответов. У нас есть кнопки быстрого доступа включения/отключения некоторых настроек.

• Clear the current Session — очищает историю запросов.

• Start/Stop Recording — включает или выключает записи запросов.

• Start/Stop SSL Proxying — включает или выключает просмотр запросов.

• Start/Stop Throttling — включает или выключает троттлинг соединения.

• Enable/Disable Breakpoints — включает или выключает брейкпоинты по запросам.

В приложении два режима отображения запросов: Structure и Sequence.

Подключение Android-девайса к Charles

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

1. Скачиваем программу с официального сайта Charles.

Charles является платной программой, но есть и бесплатная версия, в которой Charles необходимо перезапускать каждые 30 минут и на некоторые действия накладывается 10-ти секундный Delay. В остальном отличий между платной и бесплатной версиями нет.

2. После успешной установки открываем программу и попадаем в главное окно.

3. Сверху жмем Help ~> SSL Proxying ~> Install Charles Root Certificate.

Таким образом мы установим корневой сертификат в систему, чтобы Charles мог работать с https-запросами.

4. После установки в списке сертификатов видим сертификат Charles.

5. Открываем свойства сертификата.

6. В открывшемся окне, в пункте «Доверие», проверяем, что везде указан параметр «Всегда доверять».

7. После этого можно закрыть все окна, связанные с сертификатами. Далее идем в Help ~> SSL Proxying ~> Install Root Certificate on a Mobile Device or Remote Browser.

Должно открыться окно с ip и портом, по которому можно достучаться до Charles.

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

8. Берем в руки девайс и переходим в настройки Wi-Fi сети.

Чтобы все получилось, необходимо, чтобы компьютер и телефон были подключены к одному Wi-Fi, а vpn был выключен как на телефоне, так и на компьютере. Иначе есть вероятность того, что Charles не сможет обнаружить телефон.

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

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

В поле «Имя узла прокси» вводим ip: например, 192.168.1.64:

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

Должно получиться следующее:

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

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

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

Если браузер не показал, что начал скачивать файл, попробуйте открыть пункт «Загрузки»: некоторые браузеры осуществляют загрузку в фоновом режиме. Если же сертификат не загружается, значит, один из пунктов выше выполнен неправильно или не до конца.

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

12. Теперь можно смотреть сетевой трафик на мобильном девайсе. Если для тестирования дебажной сборки вашего приложения необходимо подключение к VPN, его нужно включить на компьютере. Ввиду того, что весь трафик с телефона проходит через Charles и запросы уходят так же через него, для отправки запроса будут использоваться настройки сети компьютера, а не телефона.

Если есть проблема с тем, что некоторые запросы не отображаются, необходимо сделать следующее: Proxy ~> SSL Proxying Settings ~> Во вкладке SSL Proxying и графе Include нажать Add ~> В поле Host и Port указать «*» и нажать «Ок».

Эта настройка принудительно включает проксирование трафика с любого хоста и порта.

Режим Sequence

Здесь запросы отображаются в режиме очередности

Если ранее были добавлены запросы в Focus, то в режиме Sequence можно поставить чекбокс Focused и наблюдать очередность только избранных запросов.

Просмотр информации о запросе идентичен и для Structure, и для Sequence.

Overview — информация о запросе (статус, время, метод и т д). Полная информация, которая доступна о запросе.

Contents — содержимое запроса с хедерами, куками, json-ами и т д. Основная рабочая вкладка, на которой смотрим содержимое запросов/ответов. Для ответов чаще всего используются Headers и JSON Text.

По двойному клику по полю открывается отдельное окно с необходимым значением. Удобно использовать для просмотра больших данных или для копирования.

Summary — сравнительная информация о группе запросов. Удобно сравнивать время, размер и другие данные о запросах.

Chart — сравнительная диаграмма о времени выполнения группы запросов.По сути, это очередность запросов со временем их выполнения. Будет полезна, если надо прикинуть, сколько относительно друг друга занимают по времени запросы.

Notes — личные заметки о запросе.В заметке можно написать, что делает запрос, какие-то данные для подмены или просто выразить свое негодование.

Сама заметка теперь будет отображаться во вкладке Overview запроса.

Устранение проблем

Большая часть функций Charles не будет работать если не установлены или не корректно установлены сертификаты. Это самая распространенная проблема. Вторая проблема может быть в том, что для связи клиента и сервера используется SSL соединение, но оно выключено в Charles, соответсвенно он не может его расшифровать, тем более изменить запрос или ответ.

Убедитесь, что ответ в Charles отображается в незашифрованном виде, как на скриншоте ниже. Это значит базовые настройки выполнены верно, сертификаты установлены, SSL Proxying включен.

Если же в ответе нечитаемый текст, как на скриншоте ниже, часть инструментов Charles работать не будет.

В этом случае проверьте, что выполнили все рекомендации по настройке описанные в начале данной статьи.

В частности удостоверьтесь, что проксирование включено для SSL соединений. Галочка в Enable SSL Proxying в Proxy – SSL Proxying Settings должна быть установлена, указана локация.

Сертификаты Charles должны быть установлены в системе (Help – SSL Proxying – Install Charles Root Certificate).

Сертификаты Charles должны быть установлены на клиенте, если в качестве него выступает другое устройство.

Если клиентом является iPhone, убедитесь, что кроме того, что сертификат установлен, ему так же выдано доверие (это один из пунктов, который часто пропускают).

Дополнительную информацию про установку сертификатов можно получить в документации Charles.

Если клиентом является браузер, установленный на том же компьютере, где и Charles убедитесь, что разрешено проксирование с локального устройства (Proxy – MacOS Proxy или Windows Proxy).

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

Интерфейс

Перед тем, как приступать к работе, рассмотрим основные элементы управления и режимы просмотра запросов и ответов. У нас есть кнопки быстрого доступа включения/отключения некоторых настроек.

Режим Structure

Можно отображать запросы в виде структурированных папок.

Дерево запросов — список запросов, который был отправлен приложением. Поле запроса — информация о запросе. Поле ответа — ответ сервера. Фильтр — поле для фильтрации запросов.

• Включите Focus на запросы, с которыми чаще работаете (кликаем правой кнопкой мыши по домену запроса или конкретному запросу, и в выпадающем меню выбираем Focus). Это поможет отслеживать только необходимые домены/запросы, группируя оставшиеся в Other Hosts.
• Сессии можно сохранять и загружать через File → Import/Export Session. Формат для сохранения .chls

Режим Sequence

Здесь запросы отображаются в режиме очередности

• Если ранее были добавлены запросы в Focus, то в режиме Sequence можно поставить чекбокс Focused и наблюдать очередность только избранных запросов.

Подключение iOS-девайса к Charles

Для подключения iOS-девайса к Charles необходимо проделать те же шаги, что и для Android-девайса, однако, в пункте 13 необходимо сделать доверенным установленный сертификат. Для этого необходимо перейти в Настройки – Основные – Об этом устройстве – Пролистать в самый низ экрана – Доверие сертификатам – Включить доверие для сертификата Charles.

Установка сертификата на девайс

Прежде чем начать работу, нужно установить на свой девайс сертификат, скачав его в браузере по ссылке chls.pro/ssl. Используйте Safari для iOS и системный браузер для Android.

Если скачивание сертификата не началось автоматически, нужно в установленном на ноутбуке Charles найти запросы http://ssl.charles и http://chls.pro, правым кликом по каждому выбрать Enable SSL Proxying и пройти по ссылке.

Android: Если установка сертификата после загрузки не произошла, ищем «Сертификаты» в настройках девайса, выбираем пункт меню Установка ЦА/ЦС сертификатов безопасности.

Ищем скачанный на девайс сертификат и устанавливаем его. Если потребуется задать PIN при установке, то задать любой.

На iOS: ищем Настройки → Профили → Установить сертификат.

Важно! Включите доверие для сертификата: Основные → Об этом устройстве → Доверие сертификатам → Включить доверие для вашего сертификата.