Для чего нужен чарльз прокси
Charles: незаменимый тул в арсенале QA-инженера
Для тестирования мобильных приложений, работающих с удаленными серверами, QA-инженеру приходится держать под рукой множество разных тестовых аккаунтов, логов, запросов и ответов. Реальность такова, что не всегда удается договориться о предоставлении нужных тестовых данных в срок. Чаще всего серверные разработчики будут незнакомыми вам людьми по ту сторону Скайпа. В таких ситуациях приходится своими руками подменять ответ сервера перед его передачей в приложение.
Чтобы редактировать выдачу сервера и воспроизводить сложные тестовые сценарии в QA Redmadrobot, мы используем Charles.
Как это работает?
Charles — инструмент для мониторинга HTTP/HTTPS трафика. Программа работает как прокси-сервер между мобильным приложением (в нашем случае) и сервером этого приложения. Charles записывает и сохраняет все запросы, которые проходят через подключенный к нему телефон и позволяет их редактировать.
1. Качаем и устанавливаем.
2. При первом запуске Charles заботливо предложит автоматически настроить параметры сети — соглашаемся.
3. Переходим в Proxy > Proxy Settings и выставляем порт 8888, если он уже не прописан.
4. На телефоне заходим в настройки Wi-Fi и прописываем в прокси сервер IP-адрес вашего Mac и порт 8888.
Телефон должен быть подключен к той же Wi-Fi сети, что и ваш Mac.
Готово. При следующем соединении клиент Charles попросить разрешение подключить ваш телефон. После этого в Charles начинают отображаться все HTTP-запросы и ответы, которые проходят через ваш телефон.
Для мониторинга HTTPS-трафика нужно пройти дополнительные шаги:
5. Переходим в браузер телефона и заходим на www.charlesproxy.com/getssl для установки сертификата SSL, который будет использоваться при подключении. Устанавливаем.
6. В списке хостов выбираем желаемый хост с HTTPS и ставим галочку Enable SSL Proxying.
Готово. Теперь в клиенте Charles отображается HTTPS-трафик по выбранному хосту.
Важно
Если ваше приложение использует SSL pinning, то Charles не сможет перехватывать запросы и ответы.
Мониторинг трафика
Для наглядной демонстрации работы с API используем приложение Хабрахабр для Android. На iPhone стоит защита от программ типа Charles, но на Android её нет.
Charles выстраивает все запросы в порядке их отправки на сервер. Запросы и ответы можно просматривать как в отформатированном, так и в «сыром» виде. В QA Redmadrobot во время тестирования телефон всегда подключен к Charles. Таким образом остается возможность посмотреть историю запросов и отследить хитрые баги.
Подмена данных
Как видите, у меня не так много кармы. Charles поможет сделать вид, что её чуть больше, чем есть на самом деле.
Выдача по аккаунту выглядит так (только JSON-строка, без header’ов):
В логе есть поле score:
По всей видимости, как раз то, что мне нужно.
Rewrite settings
Для подмены серверных данных открываем Tools > Rewrite.
В списке слева отображаются сеты из запросов, которые можно составлять на свой вкус. После создания сета идет выставление location. Здесь мы прописываем URL запроса с query параметрами (по желанию).
Следующий шаг — создать правило подмены. К сожалению, Charles не умеет подменять информацию по ключу. Нужно вручную прописывать ключ и значение, а затем писать то, что мы ходим увидеть.
Окно создания правила будет выглядеть следующим образом:
Сам экран подмены будет выглядеть приблизительно так:
Следующий ответ по запросу информации о себе будет иметь отредактированные данные, score = 5000:
При следующем переходе на экран профиля в приложении Хабра мы увидим плод своих трудов.
Хочу еще раз напомнить, что информация на сервере остается прежней. Данные изменяются во время путешествия к МП и эти изменения никак не затрагивают реальные данные профиля.
Таким же образом можно подменять не только ответы, но и запросы. Для этого на экране Rewrite rule нужно поставить галочку в поле Request, а не Response.
Breakpoints
При подмене запросов с помощью Rewrite settings в Charles невозможно редактировать кириллицу. При изменении любой информации на кириллицу ваши логи будут состоять из множества вопросительных знаков.
К счастью, этот недостаток можно обойти с помощью другой функции Charles — breakpoints. Идея похожая, но только ответы останавливаются прямо перед передачей в МП, и их можно редактировать своими руками в реальном времени.
Открываем Breakpoints settings и прописываем URL запроса.
При следующем ответе по этому запросу Charles перехватит всю выдачу и позволит нам с ней работать. Следует держать в голове, что МП может выкинуть ошибку по тайм-ауту, и текущий запрос уйдет в никуда.
Заменим мой логин на что-нибудь, написанное на кириллице.
Вот и все. Приложение отображает нужную нам информацию и проблем с кириллицей не возникает.
Самое главное
Погружение в Charles Proxy
Привет, Хабр! Меня зовут Настя, я работаю в команде тестирования мобильных приложений компании FunСorp.
При приёмке задач мы уделяем большое внимание проверке клиент-серверного взаимодействия. Опыт проведения собеседований показывает, что новички в тестировании мобильных приложений ограничиваются интерфейсными проверками, упуская из виду то, что за каждым изменением интерфейса стоит отправка запроса к серверу и получение ответа от него. Здесь и возникает пространство для ошибок.
Если повезло, то кандидат знает о необходимости проверки сетевого взаимодействия, но, за редким исключением, его знания ограничены Rewrite или Breakpoints.
Сегодня я расскажу, с какими задачами сталкиваются тестировщики мобильных приложений в FunСorp и как в этом помогает Charles Proxy.
Случай из жизни
Прежде чем двигаться дальше, сравните два кейса, которые подчеркнут важность проверок на сетевом уровне.
Ситуация 1: тестировщик пропускает баг вёрстки счётчика подписчиков для пользователя, у которого больше миллиона фолловеров. Неприятно, но на ценности продукта для пользователя сильно не скажется.
Ситуация 2: в приложение добавлена настройка получения push-уведомлений. Проверяя их отключение, тестировщик увидел подтверждение и посчитал сценарий пройденным. После релиза посыпались жалобы пользователей на слишком большое количество уведомлений, им приходилось отключать их на уровне ОС или удалять приложение. Для бизнеса такая ситуация критична: метрики искажаются, а пользователи утекают.
Почему так произошло? На бэкенде раскатили неудачный коммит, и на запрос отключения уведомлений возвращалась ошибка сервера. Мобильный клиент не обрабатывал получение кода 500, но тестировщик и пользователь видели попап отписки, хотя она не происходила. Если бы тестировщик обратил внимание на нестандартный код ответа API, то проблему быстро бы обнаружили и решили. Правда, в этот случай ещё вмешался сломанный мониторинг и отсутствие тестов на бэкенд, но всегда помните, что вы можете оказаться единственным тестировщиком на задаче или продукте и перепроверить будет некому.
К чему это всё? К тому, что использование сниффера может избавить вас от таких ошибок.
Что мы используем в FunCorp?
Charles Proxy в FunСorp стал стандартом де-факто. Этот инструмент предоставляет множество возможностей и в то же время прост в использовании, что снижает порог входа. Так тестировщики, разработчики и менеджеры находятся в одном информационном поле.
При тестировании задач мы придерживаемся нескольких правил. Во-первых, проксируем трафик приложения, включаем расшифровку тех SSL-соединений, которые необходимы. Во-вторых, обращаем внимание на то, какие ручки используются, какое количество запросов отправляется, какие коды ответов возвращаются.
Задача 1. Слушаем, смотрим, анализируем
Подготовка
Если знаете, как установить Charles в связке с мобильным устройством, можете смело пропускать эту часть.
Результат шага: мы запустили Charles, отображается трафик приложения, а также соединения рекламных и системных сервисов.
Примечание 1: по дефолту трафик ПК будет также проходить через Charles. Чтобы в сниффере отображался только трафик подключенных устройств, снимаем галку в настройках проксирования.
Примечание 2: мы не включаем расшифровку сетевых соединений на все хосты сразу, т.к. это помешает проверке сценариев интеграции со сторонними сервисами (Twitter, Facebook, и т.д), покупки и прочего — самоподписанный сертификат Charles не вызовет доверия.
Фильтрация информации
Найти интересующую тестировщика информацию можно несколькими способами.
Structure view + Focus Mode
Представление Structure view удобно, если хотим узнать, к каким ручкам выполняется обращение. Список проксируемых ручек отображается слева. Выберем конкретный запрос и в правой части увидим информацию о нём. Во вкладке Overview будет техническая информация по статусу соединения, коду ответа, времени отправки запроса и времени получения ответа и так далее, во вкладке Contents можно выбрать формат и заглянуть в тело запроса или ответа, а также посмотреть заголовки.
Для уменьшения количества хостов в левой части на помощь придёт Focused Mode. Находим нужную ручку, вызываем контекстное меню, выбираем Focus.
Теперь ручки, для которых выбран Focus, будут закреплены в верхней части списка. Остальные сгруппированы в Other Hosts.
Примечание: в Charles можно уровнем выше настроить хосты, информация об обращении к которым будет записана в сессию, но часто удобно знать обо всём трафике, который проходит через приложение.
Да, стало проще искать информацию о конкретных пакетах. Ещё хотелось бы видеть на одном экране техническую информацию о пакете и тело. Кроме того, в этом представлении не видно, насколько позже или раньше уходит один запрос относительно другого. В этом нам поможет Sequence view.
Sequence view
Переключаем вкладку на Sequence и видим последовательность коннектов, в верхней части экрана будут появляться новые и новые подключения, обмен информацией не останавливается. Выбрав конкретное подключение, получим информацию о запросе и ответе для конкретного соединения на одном экране.
Необходимую техническую информацию о подключении выводим через колонки таблицы. Мне наиболее интересными кажутся: время начала запроса, используемый метод, код ответа, полный путь обращения, длительность соединения (или время получения ответа), размер пакета, IP-адрес отправителя, по которому выполняем сортировку, если к Charles подключено больше одного устройства.
Можно создать кастомную колонку по любому полю заголовков запроса/ответа. Например, рекламные SDK часто передают полезную информацию в заголовках ответа.
Для настройки нажимаем на заголовок таблицы ПКМ и выбираем New Custom Header Column. Указываем название заголовка.
Ставим галочку Focused и видим только те ручки, что ранее выбрали через Structure view.
Ещё одна классная фича — возможность обходиться без галочки Focused и делать фильтрацию с помощью регулярок. Для этого нужно нажать на Settings справа от строки фильтрации и поставить галочку тут:
Теперь, составив, например, такой фильтр, увидим тот же результат, как при использовании галочки Focused.
Анализируем результаты
Ещё раз зафиксируем, на что в общем случае стоит обратить внимание:
В каких случаях стоит насторожиться и бежать к бэкендерам:
Задача 2. Меняем API
Случается, что мобильным тестировщикам приходится проверять фичу на тестовом API, которое пока не задеплоено на продакшен. Можно попросить разработчиков добавить developer mode, в котором будет возможность изменить ручку API, но можно это сделать и без внесения изменений в код.
Итак, у нас есть URL тестовой среды, на которой можно протестировать фичу — https://api-1111.ifunny.mobi, и URL продового API — https://api.ifunny.mobi.
Charles позволяет решить эту задачу следующими способами.
Map Remote
С помощью Map Remote можно без СМС и регистрации выполнить переадресацию запросов с некоторого URL (Map From) на другой (Map To). Подменяем только хост, путь целиком или только параметры (в зависимости от задачи).
Настраиваем Map Remote для решения текущей задачи. Чтобы перейти в настройки Map Remote, выбираем Tools: Map Remote или для macOS (⌘⌥M). Шорткаты ускорят работу в Charles.
Примечание: Charles автоматически распарсит части URL при копировании и вставке. Вставляем URL в строку Host, нажимаем Tab. Protocol, Port, Path, Query заполнятся сами.
Rewrite
Rewrite — самый мощный механизм Charles. В коллекциях на текущем проекте порядка 30 наборов рерайтов (Rewrite sets) с десятками вложенных правил (Rewrite rules).
Чтобы добавить первое правило, нажимаем на (4). Появляется скромное окошко, обладающее большими возможностями.
Rewrite — это подмены: в заголовках (header rules), в пути (URL), в параметрах (query parameter rules) и в теле запроса или ответа (body rules).
Помимо подмен можно добавить или удалить новые заголовки, параметры запроса, когда это нужно. Для этого выбираем подходящее для задачи значение из выпадающего списка Тип (Type).
Для правила требуется указать область действия: запросы клиента (Request), ответы сервера (Response) или и те, и другие. Устанавливаем соответствующие чек-боксы.
Рассмотрим алгоритм применения Rewrite. Если указать маркер применения правила через блок Match, выполнится поиск этого значения в пакете, а затем замена на значение из блока Replace. Здесь и в некоторых других местах полезно использовать регулярные выражения, при необходимости — соответствующий чек-бокс. При пустом блоке Match замена применится везде, где можно. Заменится весь хост при типе Host или всё тело пакета при типе Body.
Ещё можно выбрать опцию «Подменить один раз» (Replace First), тогда Rewrite будет применён только по первому совпадению. Заполнение полей может оказаться недоступным для некоторых типов правил.
Для смены API подойдёт Type: Host. Нужное правило выглядит так:
Можно не прописывать Match, потому что указан Location, к другим хостам правило не применится, но Value пришлось бы указать целиком.
Задача 3. Проверяем нестандартные коды ответа
Кейсы, описанные в начале статьи, заставляют тестировщиков проверять получение и обработку ошибок. Здорово, когда пользователь понимает, что происходит, по ёмким нотификациям.
Прежде чем приступить к проверке, уточняем детали со стороны продукта и разработки:
Block Lists, Allow Lists
Block List позволяет добавить URL, запросы к которым будут заблокированы путем разрыва соединения или возврата 403 кода ответа. Включаем так:
Allow list работает по обратной логике: указываем те URL, обращения к которым разрешены. Остальные соединения сбрасываются или возвращается 403 ошибка.
Задача 4. Безопасный способ подменить тело
Представьте, вы нашли баг: приложение падает при получении рекламного креатива. Сниффер включён, сессия сохранена.
Через время разработчику требуется воспроизвести ситуацию у себя, а рекламодатель не спешит возвращать ту же рекламу, что привела к ошибке. Что делать? Открываем сохраненную сессию и находим креатив.
Map Local
Для подмены ответа сервера целиком можно использовать Map Local (⌘⌥L). Это удобный инструмент, который позволяет заменить удалённый файл на тот, что хранится локально на машине. Указываем ручки, ответы к которым надо подменить, и выбираем файлы у себя в системе, предварительно сохранив их в нужном расширении/формате (json, xml и т.п., поддерживаются медиа и другие менее популярные форматы). В контексте представленного кейса нам надо откопать приводящий к проблеме креатив из сохранённой сессии, положить себе в папку и включить на него Map Local.
Здесь можно также воспользоваться Rewrite. Выбираем Type: Body, поле Match остаётся незаполненным, если заменяем тело целиком. Вставляем простыню с телом ответа в поле Value блока Replace, применяем.
Заменить определённую часть запроса/ответа через Rewrite также не представляет сложности.
Это полезно, когда мы хотим получить на клиенте какие-то значения, которые трудно сгенерировать на тестовой или продакшен-среде. Для этого в поле Match указываем, какую пару «ключ-значение» ответа API мы ищем, а в Replace — на какую пару подменяем.
Задача 5. Таймауты и троттлинг.
Плох тот тестировщик, который тестирует свое приложение только в условиях мощного офисного WiFi, находясь в одной сети с серверами. Как можно выяснить, что потери и задержки не нарушают usability для пользователя, или обнаружить, что при получении таймаута приложение не может восстановиться?
Настройки троттлинга (⇧⌘T) в Charles выглядят так :
Подбираем те, которые превратят любимое приложение в тыкву, а для тестирования таймаутов используем Breakpoints (⇧⌘K).
Примечание: Пользуйтесь возможностью включить троттлинг только на определённых хостах.
Брейкпоинты в Charles — это очень крутая штука. Информация о них будет в первых результатах поисковой выдачи по запросу «как подменить ХХХ в Charles». Их действительно можно использовать вместе или вместо Rewrite, но для подмен они не очень подходят.
Breakpoints работают так же, как бряки в коде. Получили совпадение по запросу или ответу — остановили выполнение, можем внести изменения в любую часть пакета. При этом подмена применится только на один пакет — нет повторяемости. Можно выйти за таймаут, пока выполняешь изменения. Другие способы подмены лишены этих ограничений.
Из неочевидного
Оптимизируем Rewrite
Что ещё здесь интересного? Активных правил в наборе может быть несколько, они применяются последовательно, сверху вниз. Значит, одно и то же место может изменяться несколько раз подряд.
Если есть какая-то структура, которая должна принимать несколько вариантов значений в зависимости от необходимости, то можно сделать следующее:
Например, приложение использует некоторое количество ID для получения рекламы. Мы хотим их все подменять то на один тестовый ID, то на другой. Здесь сначала все ID будут заменены на your_var, а your_var будет следом заменено в зависимости от простановки чек-боксов.
Если включить оба чек-бокса из примера одновременно, то вторая подмена уже не применится.
Примечание 1: никто нас не ограничивает в сложности используемых подмен, регулярных выражений, но некоторые нюансы типа того, что выше, могут затруднять отладку или привести к ненужному срабатыванию правил.
Примечание 2: «Я всё делаю правильно, но Rewrite не работает».
Проверяем, что Rewrite был применён к выбранному пакету, информация об этом в явном виде есть во вкладке Overview и Notes:
Включаем логи в Charles в окне Rewrite:
Убедимся, что другие наборы Rewrite не переписывают поверх наше правило. Отмеченные чек-боксами наборы также применяются друг за другом, сверху вниз, как и правила внутри набора.
Убедимся, что все чек-боксы на своих местах.
Убедимся, что не произошло ошибки при копировании-вставке. Известный баг Charles на macOS: при копировании в буфер обмена при раскладке клавиатуры, отличной от английской, данные в буфере задваиваются и вставляется два значения вместо одного.
Auto save
Один из недостатков Charles — утечки памяти, возникающие при продолжительной записи сессии. Чтобы избежать утечек, необходимо регулярно очищать активную сессию. Из-за этого возникают ситуации, когда вы случайно очистили нужную сессию. Чтобы защититься, автоматизируем сохранение сессий.
Mirror
Еще одна не самая очевидно полезная функция — Mirror (⌘⌥I). Эта фича позволяет автоматически сохранять все ответы, возвращаемые в Charles. Они раскладываются локально в такой же иерархии, как на сервере. Если внезапно случился даунтайм на бэкенде, отвалилась тестовая среда и так далее, у вас есть готовые моки для Map Local.
На этом всё. Я постаралась раскрыть возможности Charles Proxy для тестировщиков мобильных (и не только) приложений в разрезе тех задач, которые мы решаем в FunСorp. Если какие-то функции, которые вы используете, остались за бортом, пожалуйста, напишите об этом в комментариях.
И помните: хороший тестировщик клиент-серверных приложений всегда прикладывает к багу сессию из любимого сниффера.
Как использовать Charles
Charles – программа прокси для изучения и отладки HTTPS трафика между клиентом и сервером. С его помощью можно проверить состав запроса и ответа, при необходимости изменить его. Например, чтобы увидеть как ведет себя веб-приложение при некорректном ответе от сервера, или какой ответ присылает сервер при некорректном запросе. Можно перенаправлять запросы на другой хост, эмулировать проблемы в сети и много чего еще.
Установка и предварительная настройка
Установка и запуск
При первом запуске Charles скорее всего попросит разрешения внести изменения в сетевые настройки вашего компьютера, согласитесь.
Настройка прокси
Далее перейдите в 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.
Проксирование трафика веб-браузера
Если не хотите видеть запросы с ПК, перейдите на вкладку MacOS (Windows) и снимите чекбоксы. Но если целью является изучение трафика из браузера, наоборот, удостоверьтесь, что чекбоксы установлены.
Когда закончите с настройками прокси, перезапустите Charles.
Настройка прокси на устройстве
Если целью является изучение трафика с устройства, например со смартфона, нужно выполнить на нем дополнительные настройки.
Компьютер с Charles и устройство должны находиться в одной сети.
На устройстве, в настройках сети или Wi-Fi, укажите прокси-сервер: IP-адрес компьютера с запущенным Charles и порт 8888, или другой, который был указан при настройке прокси.
Быстро узнать IP-адрес компьютера с запущенным Charles можно через пункт меню Help – Local IP Address.
Для iPhone откройте Настройки (Settings), перейдите в настройки Wi-Fi, выберите активную Wi-Fi сеть, пролистайте экран вниз и выберите пункт Настройка прокси (Configure Proxy). Метод определения выберите Вручную (Manual) и укажите IP-адрес и порт.
Далее нужно установить сертификат прокси-сервера.
В браузере на устройстве перейдите по адресу http://charlesproxy.com/getssl или http://chls.pro/ssl Разрешите загрузку профиля и скачайте сертификат.
Установите скачанный сертификат Charles. Процесс установки зависит от используемого устройства и может различаться.
Например, чтобы установить сертификат на iPhone откройте Настройки (Settings), перейдите в Основные (General), пролистайте вниз и выберите пункт Профили и управление устройством (Profiles & Device Management). В открывшемся меню найдите загруженный профиль сертификата, откройте его, а затем установите.
Дополнительно может потребоваться установить доверие сертификату. Откройте Настройки (Settings) – Основные – Об этом устройстве (About), пролистайте вниз до конца, выберите пункт Доверие сертификатов (Certificate Trust Settings). В открывшемся окне отметьте переключателем сертификат, которому хотите дать доверие.
Для Android действия будут похожими, за исключением того, что дополнительно не потребуется указывать доверие сертификату, его достаточно будет лишь установить.
Подробнее про установку сертификатов можно прочитать в документации Charles.
Теперь можно проксировать и изучать трафик.
Как смотреть трафик
Запустите Charles. На устройстве или в браузере откройте интересующий сайт или приложение. При выполнении действий на клиенте, запросы с него и ответы от сервера будут логироваться в Charles.
В режиме Structure в левой части окна отображается список запросов, сгруппированный по хостам. Выделив элемент хоста, в правой части окна будет выведена подробная информация о запросе (сверху) и ответе (снизу), в том числе метод, заголовки, куки, запрос, ответ, параметры и прочая информация.
В режиме Sequence запросы отображаются без группировки, последовательно.
Чтобы исключить из отображения ненужные хосты, удобно пользоваться фильтром (поле под списком хостов).
Выделив хост, в контекстном меню можно включить режим Focus, при котором запросы к интересующим хостам будут группироваться вместе, а остальные скрыты в отдельную группу.
Не забывайте пользоваться Поиском (Edit – Find или Cmd+F). Он поможет быстро найти интересующий параметр или подстроку среди перехваченных запросов.
На что стоит обращать внимание:
Как менять запросы и ответы
Задача: на лету изменить параметр в заголовке или в теле запроса и посмотреть, что вернёт сервер, либо наоборот, модифицировать ответ сервера, чтобы проверить как поведет себя клиент.
В этом случае можно использовать инструмент Rewrite (Tools – Rewrite – галочка Enable Rewrite.
Добавьте новое правило, введите хост (или оставьте пустым, тогда правило будет действовать для всех хостов), затем заполните Rewrite Rule, где укажите что на что необходимо заменить.
В примере ниже, значение поля bonus в теле ответа будет заменено со 100 на 5000.
Еще задача: допустим есть лента с контентом (видео, реклама, музыка) и при тестировании нужно быстро изменить его источник без вмешательства разработчика.
В разделе Match можно использовать регулярные выражения.
Аналогичным способом через Rewrite можно изменять, добавлять, удалять заголовки, менять коды ответа сервера, хосты и url.
Как вручную отредактировать запрос
Задача: перехватить запрос (ответ) и перед отправкой (приемом) его отредактировать. Отличие от предыдущей задачи заключается в том, что в ней данные менялись на лету по заранее заданному шаблону, здесь же редактирование осуществляется вручную.
Запросы можно редактировать используя инструмент Compose. Прежде нужно, чтобы запрос выполнился хотя бы один раз. Найдите его среди остальных запросов. В контекстном меню выберите Compose.
В открывшемся окне можно изменить тело запроса, метод, протокол, url, параметры, заголовки и куки. Затем нужно нажать кнопку Execute и запрос будет отправлен с новыми данными.
Инструмент Repeat в контекстном меню запроса отправит его на сервер еще раз.
Repeat Advanced – похож на Repeat, однако позволяет указать количество отправляемых запросов и задержку между ними. Данный функционал может быть полезен при проверке сервера на флуд.
С помощью инструмента Breakpoints (точки остановка) можно перехватывать и изменять не только запросы, но так же и ответы от сервера, прежде чем они попадут на клиент.
Для начала нужно включить возможность использования Breakpoints (Proxy – Breakpoint Settings – Enable Breakpoints).
Перед выполнением запроса он будет остановлен и вы сможете отредактировать его тело, метод, протокол, url, параметры, заголовки и куки.
Когда запрос будет отправлен, ответ так же будет перехвачен, его аналогичным способом можно отредактировать.
Как подменить хост в API
Задача: подменить продовый хост с API на тестовый. Это можно сделать двумя способами.
Первый, через инструмент Rewrite, подобно тому, как описано в предыдущем разделе.
Второй способ подменить API, заключается в использовании инструмента Map Remote (Tools – Map Remote).
В зависимости от задачи можно подменить хост целиком, его часть или только параметры.
Как подменить код ответа сервера
Задача: проверить как поведет себя клиент при неожиданном коде ответа от сервера.
Как и в предыдущих двух примерах, тут подойдет инструмент Rewrite (Tools – Rewrite).
Как эмулировать недоступность сервера
Задача: проверить как поведет себя клиент при недоступности хоста.
Используя инструмент Block List (Tools – Block List), можно заблокировать доступ клиента к указанному хосту. На выбор разрыв соединения либо 403 код ответа.
Инструмент Allow List (Tools – Allow List) наоборот блокирует все хосты кроме разрешенных.
Как замокать ручку или подменить файл
Задача: подменить ответ от сервера на заранее подготовленный, сохраненный локально, например, чтобы замокать ответ ручки или заменить скрипт.
Для этих целей можно использовать инструмент Map Local (Tools – Map Local).
В настройках укажите ручку или файл на сервере, а также локальный файл, который будет использован вместо них. Поддерживаются форматы HTML, CSS, JSON, XML и медиафайлы.
Как эмулировать проблемы в сети
Задача: посмотреть, как работает сервис в различных сетевых условиях.
Для этого предназначен инструмент Throttle (Proxy – Throttle Settings).
Здесь можно включить сетевые ограничения для определенных или всех хостов, а так же задать различные сетевые параметры.
Так же можно использовать готовые предустановки из списка.
Как раздать VPN
Задача: дать доступ другому устройству в корпоративную сеть.
Если компьютер с установленным Charles имеет доступ к сети VPN, то и устройства, трафик которых проксируется, будут иметь доступ к той же сети.
Другие полезные функции
Инструмент Block Cookies – предотвращает получение клиентом запросов на установку cookie с сервера.
Инструмент No Caching предотвращает кэширование через заголовки.
MacOS Proxy или Windows Proxy разрешает или запрещает проксирование трафика из браузера, установленного на том же компьютере, что и Charles.
Инструмент Port Forwarding (проброс портов) позволяет пересылать запросы с одного порта на другой.
DNS Spoofing – перенаправляет запрос с доменного имени на указанный IP-адрес.
Mirror – автоматически сохраняет в указанную папку все ответы, возвращаемые в Charles. Затем их можно использовать как моки.
Устранение проблем
Большая часть функций 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 и я добавлю их в статью.
Полезные ссылки
На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.
Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.