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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эмулятор Android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Симулятор iOS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот и все.

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

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

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

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

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

android_charles.png

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.

Снимок экрана 2022-01-25 в 17.25.47.png

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

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

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

Снимок экрана 2022-01-25 в 18.34.14.png

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

Снимок экрана 2022-01-25 в 18.35.05.png

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

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

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

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

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

Снимок экрана 2022-01-25 в 18.45.20.png

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

Снимок экрана 2022-01-25 в 18.53.16.png

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

Снимок экрана 2022-01-25 в 19.00.26.png

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

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

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

Снимок экрана 2022-01-25 в 19.49.34.png

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

Снимок экрана 2022-01-25 в 19.51.29.png

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

Снимок экрана 2022-01-25 в 19.54.57.png

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

Снимок экрана 2022-01-25 в 19.56.00.png

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

Снимок экрана 2022-01-25 в 19.58.24.png

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

Снимок экрана 2022-01-25 в 20.01.14.png

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

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

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

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

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

Charles Throttle

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

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

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

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

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

Как настроить Charles

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

Как настроить Charles

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

Как настроить Charles

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

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

Как настроить Charles

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

Как настроить Charles

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

Как настроить Charles

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

Как настроить Charles

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Host Charles

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

Charles Map Remote

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

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

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

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

Charles Compose

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

Charles Execute

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

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

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

Для начала нужно включить возможность использования Breakpoints (ProxyBreakpoint SettingsEnable Breakpoints).

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

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

Charles Breakpoints

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

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

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

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

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

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

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

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

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

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

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

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

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

Логин прошел успешно и мы попадаем в личный кабинет продавца
Логин прошел успешно и мы попадаем в личный кабинет продавца
Статья Charles. Обход API авторизации в Android приложении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Charles Block List

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

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

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

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

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

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

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

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

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

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

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

Charles Mapping

В настройках укажите ручку или файл на сервере, а также локальный файл, который будет использован вместо них. Поддерживаются форматы 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 → Выбрать сеть → Дополнительно → Прокси → Вручную

Вот так это отображается на Samsung, на Xiaomi и на iPhone:
Вот так это отображается на Samsung, на Xiaomi и на iPhone:

Нужные параметры можно посмотреть в 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.

Как настроить Charles

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

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

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

Как настроить Charles

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

Как настроить Charles

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

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

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 скорее всего попросит разрешения внести изменения в сетевые настройки вашего компьютера, согласитесь.

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

Charles Access Control Setting

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

Charles Location

Установите сертификаты на компьютер: HelpSSL ProxyingInstall Charles Root Certificate.

Сharles Certificates

Укажите порт: ProxyProxy Settings – вкладка ProxiesPort: 8888.

Charles Port

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

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

Charles Proxy Settings

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

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

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

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

IP address Charles
Proxy iPhone

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

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

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

Profiles iPhone

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

Certificate Trust Settings

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

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

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

Режим Structure

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

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

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

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

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

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

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

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

Structure View

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

Charles Sequence View

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

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

Charles Focus

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

Charles Find

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

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

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

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

Как настроить Charles

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

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

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

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

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

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

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

Читать также:  Курсы сестринское дело в москве с выдачей сертификата гос образца цена

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

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

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

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

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

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

Charles Response Status

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

Официальный сайт 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.

Интерфейс

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

Статья Charles. Обход API авторизации в Android приложении
  • 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. После успешной установки открываем программу и попадаем в главное окно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 Жмем кнопку «Сохранить»
Жмем кнопку «Сохранить»

После того, как сохранили настройки сети, в окне 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 указать «*» и нажать «Ок».

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

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

Режим Sequence

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Not Encrypted

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

Encrypted

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

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

Сертификаты Charles должны быть установлены в системе (HelpSSL ProxyingInstall Charles Root Certificate).

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

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

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

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

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

Интерфейс

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

Режим Structure

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

Как настроить Charles

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

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

Режим Sequence

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

Как настроить Charles

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *