Установка и настройка Charles для Mac – Русские Блоги

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

Скачиваем Charles Proxy с официального сайта, устанавливаем, запускаем (помним, что бесплатно можно пользоваться 30 дней). После запуска Charles предложит сам настроить сетевые подключения для работы:

Соглашаемся. Далее откроется интерфейс инструмента:

Слева (Structure/Sequence) будут отображаться соединения, внутри которых можно будет увидеть запросы. В правой части будут отображаться параметры запроса.

Активировать

Вот учетная запись активации, найденная в Интернете, просто заполните

Конфигурация

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

Help->ssl proxying

image

В очереди

1. Charles Root Certificate

2. Charles Root Certificate in iOS Simulators

3. Изменить, чтобы всегда доверять связке ключей

   

   image-20210802145256153

4. установка сертификата iphone

   Откройте корневой сертификат Charles на мобильном устройстве или в удаленном браузере, он будет выглядеть, как показано

   

   image

   Сначала настройте прокси, прыгайте3.2/3.3Настроить прокси, посетить после конфигурации

   Chls.pro/ssl

   Всплывающее окно спросит, нужно ли устанавливать, просто согласитесь на установку.

   Не радовайтесь слишком рано, установка должна быть завершена на телефонеНастройки-> Общие-> Об этой машине-> Настройки доверия сертификатов-> charles Proxy CA, Отметьте переключатель, сертификат вступит в силу.

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

Модифицирование запросов и ответов

Итак, запросы к нужному серверу для нас теперь абсолютно прозрачны, но Charles интересен не только возможностью мониторинга запросов, но и возможностью их модификации. Например, можно изменить какой-либо параметр в заголовке или в теле запроса и посмотреть что вернёт нам сервер, или же наоборот, отправить правильный запрос, но модифицировать ответ, чтобы проверить ситуации, когда сервер может возвращать некорректные данные или когда нужно показать лишь часть данных. Сейчас нас интересует инструмент Rewrite:

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

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

Сообщит ли нам сервер об ошибке? Лучше, конечно, проверять, реакцию клиента на некорректный ответ сервера, потому что такая ситуация наиболее вероятна. Набор действий в любом случае идентичен. Под полем Location нужно кликнуть Add, а затем можно поставить значение * (в этом случае перезапись будет работать для всех запросов), либо указать конкретный URL и конкретный path.

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

Некоторые общие проблемы

4.1 Реальное устройство зависает при проверке приложения?

Как разработчику Apple, вам часто нужно запускать небольшую демонстрацию, которую вы создали на своем телефоне с помощью Xcode, и вы используете бесплатный личный сертификат. Вам необходимо доверять сертификату на телефоне и проверять приложение. Если вы настроили захват пакетов, ssl не может быть проверен.

Решение:

При использовании ssl захватывать только указанный URL, а не устанавливать полный захват* . панель инструментов charles -> Прокси -> Настройки прокси SSL, захватите только адрес серверной части проекта.

image

Map remote

Еще одна популярная функция Charles Proxy – подмена ответа сервера. Так мы можем ответ одного хоста подменить на ответ другого. Настраивается это через Tools -> Map Remote. 

Обратите внимание, в левом нижнем углу есть кнопки Import и Export. Они позволяют обмениваться настройками – переносить их с одного рабочего места на другое.

Например, мы можем подменить контура. Я буду посылать запрос на dev-контур, но ответ хочу получить с тестового стенда. Для этого создаем новый пункт в списке Map Remote Settings. Map From – куда изначально был запрос; Map to – откуда берем ответ.

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

Repeat advanced

Хотя полноценное нагрузочное тестирование лучше проводить в специальных инструментах, Charles Proxy имеет одну базовую настройку, которая помогает закрыть минимальные потребности. Функция Repeat Advanced (доступная через контекстное меню перехваченного запроса) позволяет нужное количество раз повторить тот же запрос. После настройки откроется отдельная сессия, где будут видны детали каждого из запросов.

Конечно, список функций Charles Proxy этим не ограничивается. Есть еще много полезного – от перенаправления доменного имени на другой IP-адрес, до автоматического сохранения полученных ответов.

Отмечу, что Charles Proxy платный. Можно использовать триальную версию. Но раз в 5-7 минут поверх него будет отображаться всплывающее окно с версией, а раз в 30 минут он будет выключаться, при этом сессии не сохраняются. Решайте сами, помешает ли это вашей работе.

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

Rewrite

Функция Rewrite может быть полезна, если вам нужно переписать данные, которые отправляются в Charles Proxy. В отличие от простого редактирования Rewrite позволяет задать правила изменения и работать в автоматическом режиме. Можно изменять и добавлять заголовки, искать и заменять текст в теле запроса или ответа. Можно даже менять статус ответа.

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

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

Throttling

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

Настраивается функция через Proxy ->Throttling settings.

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

Два слова об интерфейсе

Интерфейс Charles Proxy прост. Слева – список перехваченных запросов, справа – детали.

В списке запросов есть две основные вкладки – Structure и Sequence.

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

С помощью контекстного меню запроса можно настраивать блокировки, повторять и изменять запросы. На этом мы еще остановимся.

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

Если запросов на экране слишком много, с помощью панели инструментов их можно очистить или вообще остановить перехват. Там же есть возможность включить и выключить троттлинг (подробнее об этих функциях расскажу позже). Базовая настройка каждой из функций осуществляется через меню, а кнопки панели управления выступают своего рода тумблерами On / Off.

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

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

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

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

Как настроить ssl-сертификаты с помощью charles web proxy и последнего эмулятора android в windows? oh! android

emulator -avd <avd name> -http-proxy http://local_ip:8888/

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

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

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

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

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

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

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

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

Как раздать vpn

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

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

Подробнее читайте в статье: Как раздать VPN через Fiddler или Charles.

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

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

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

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

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

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

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

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

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

Далее перейдите в Proxy – Access Control Setting, нажмите кнопку Add и добавьте IP-адрес 0.0.0.0/0.

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

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

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

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

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

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

На устройстве, в настройках сети или Wi-Fi, укажите прокси-сервер: IP-адрес компьютера с запущенным Charles и порт 8888, или другой, который был указан при настройке прокси.

Быстро узнать IP-адрес компьютера с запущенным Charles можно через пункт меню Help – Local IP Address.

Для iPhone откройте Настройки (Settings), перейдите в настройки Wi-Fi, выберите активную Wi-Fi сеть, пролистайте экран вниз и выберите пункт Настройка прокси (Configure Proxy). Метод определения выберите Вручную (Manual) и укажите IP-адрес и порт.

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

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

Как раздать VPN через Fiddler или Charles

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

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

При тестировании приложения на пк

В этом случае дополнительные сертификаты нужно установить на сам ПК. Для скачивания и установки нужна ссылка из Help -> SSL Proxying -> Install Charles Root Certificate.

Сертификат устанавливается в доверенные корневые центры.

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

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

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

Третий шаг – настроить прокси для телефона.

Сконфигурируйте прокси-сервер вручную в беспроводной сети мобильного телефона, введите сетевой адрес компьютера, на котором установлен Charles, и заполните порт 8888.

Установка корневого сертификата на компьютер

Возьмем MAC в качестве примера, установите его прямо в меню «Справка» Чарльза; после завершения установки перейдите в систему доступа к связке ключей, чтобы доверять ему.

Фильтрация

В Charles Proxy очень много вариантов фильтрации запросов. 

Начнем с вкладки Structure. Самое примитивное – скопировать хост и вставить в поле Filter. Так мы увидим только запросы с этого хоста. Примерно того же результата можно добиться, если в контекстном меню хоста выбрать Focus. Остальные запросы будут собраны в Other Hosts.

На вкладке Sequence есть аналогичный фильтр.

Charles Proxy умеет работать с регулярными выражениями. Для этого на вкладке Sequence выбираем Settings и отмечаем пункт Filter uses regex. И вписываем в поле поиска элементарную регулярку.

Например, вот так 

^w{4}.

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

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

В Charles Proxy можно фильтровать не только отображение, но и запись запросов. Для этого надо зайти в Proxy -> Record settings и задать условия на одной из вкладок – Include или Exclude – так мы включаем или выключаем запись запросов данного хоста.

Шаг 2: настройте прокси ssl:

Сначала выберите Параметры прокси SSL в опции Прокси Чарльза.

Нажмите «Добавить», чтобы добавить отслеживаемое доменное имя, поддерживает подстановочный знак *, обычно порт 443: