Модифицирование запросов и ответов
Итак, запросы к нужному серверу для нас теперь абсолютно прозрачны, но Charles интересен не только возможностью мониторинга запросов, но и возможностью их модификации. Например, можно изменить какой-либо параметр в заголовке или в теле запроса и посмотреть что вернёт нам сервер, или же наоборот, отправить правильный запрос, но модифицировать ответ, чтобы проверить ситуации, когда сервер может возвращать некорректные данные или когда нужно показать лишь часть данных. Сейчас нас интересует инструмент Rewrite:
Этот инструмент как раз и позволяет вносить нужные нам изменения в запросы. По-умолчанию, там ничего нет, следовательно, нам нужно добавить первую опцию, например, на изменение запроса.
Название можно дать любое, для себя я обозначил данную опцию как Request, чтобы в ней хранить все нужные мне модификации для запросов.
Далее нужно понять что именно мы хотим изменить в конкретном запросе. Например, нужно проверить, как поведёт себя серверная часть приложения в том случае, если клиент пришлёт некорректный запрос (будет отсутствовать одно поле или в поле будет неверный тип данных). Сообщит ли нам сервер об ошибке? Лучше, конечно, проверять, реакцию клиента на некорректный ответ сервера, потому что такая ситуация наиболее вероятна. Набор действий в любом случае идентичен. Под полем Location нужно кликнуть Add, а затем можно поставить значение * (в этом случае перезапись будет работать для всех запросов), либо указать конкретный URL и конкретный path.
После того как был задан адрес, по которому нужно произвести замену, нужно указать что конкретно следует изменить. В нашем случае это тело запроса.
После сохранения и клика по кнопке Apply, Charles начнёт изменять все запросы по указанной связке URL+path в соответствии с заданным правилом. В данном случае в запросе будет передаваться JSON {“field”:”value”}. Подобным образом можно менять тело ответа, приходящего с сервера. Также можно изменять URL, заголовки, параметры запроса, код состояния HTTP.
Проблемы и использованием Charles
В целом же, это только основные и наиболее часто используемые функции плагина. Нередко можно заметить, что в некоторых случаях могут возникнуть и проблемы. Так, например, очень частыми являются ситуации, когда в списке, содержащем папки шлюзов (Gateway), могут не отображаться те или иные серверы и их адреса.
По всей видимости, пользователь мог их просто случайно внести в так называемый «игнор-лист». Восстановить настройки можно войдя в соответствующее меню (через Proxy/Recording Settings), где выбирается раздел «Ignore Hosts» (иногда может называться как Black List, в зависимости от версии программы). Отсюда сервер нужно просто удалить, после чего он будет показан в основном списке.
Rewrite
Функция Rewrite может быть полезна, если вам нужно переписать данные, которые отправляются в Charles Proxy. В отличие от простого редактирования Rewrite позволяет задать правила изменения и работать в автоматическом режиме. Можно изменять и добавлять заголовки, искать и заменять текст в теле запроса или ответа. Можно даже менять статус ответа.
Rewrite удобно использовать, когда нужен готовый ответ, но мы не хотим каждый раз ставить брейкпоинт и вписывать его в ручную. Редактируя таким образом ответ, фактически, мы ставим заглушку – можем имитировать работу сторонних партнеров. Честно говоря, в Postman-е эта функция реализована более интуитивно. Но раз мы говорим про Charles, не будем отходить от его примера.
Настроить это можно через Rewrite settings, доступные в контекстном меню. Единственный недостаток инструмента в том, что каждое правило замены прописывается отдельно.
Помимо изменения запросов и ответов мы можем запретить кэширование или cookie (функции No caching и Block cookies). Эти опции повторяют аналогичные инструменты панели разработчика в браузере. В обоих случаях настраивается список хостов, для которых действует настройка. Если же список пуст, то кэширование и cookie отключаются на всех перехваченных хостах.
Установка и настройка программы
Установить Charles легко – достаточно следовать инструкциям, появляющимся в процессе инсталляции. К сожалению, в лицензионной версии предлагается только английский язык, но инфографика кнопок вполне ясная.
Также для браузера Mozilla скачайте и установите Java самой свежей версии – это позволяет программе работать корректно. Иногда нужный файл кладут в общий архив – кликните по нему и запустите
Обратите внимание, что Java не поддерживается браузерами на основе Chromium: Google Chrome, Яндекс. Браузер и прочими
Главное окно программы Charles
После установки программы найдите в пакете инсталляции файл с расширением .xpi. Откройте Firefox и просто перетащите элемент в окно браузера.
Переходим к настройкам:
- Если у вас браузер Firefox, то просто откройте его, перейдите во вкладку Tools – Charles и нажмите Enable Charles. Для проверки откройте какой-нибудь сайт, а затем Charles (значок в виде кувшинчика, по умолчанию он находится на «Рабочем столе»), и вы увидите целый список запросов, связанных с открытием ресурса.
- В Chrome и Opera нужно открыть «Настройки» – «Прокси-сервер», отметить пункт HTTP, указать IP: 127.0.0.1 и порт: 8888.
Как пользоваться Charles: основные аспекты
Итак, плагин настроен и готов к использованию. Самое простое действие с активацией записи траффика в реальном времени производится при помощи кнопки «Start/Stop Recording».
Редактирование настроек осуществляется простейшим способом для всех параметров. На нужной строке нужно просто использовать правый клик, после чего выбрать команду «Edit». После изменения той или иной настройки требуется подтверждение изменений. Оно производится с помощью кнопки «Execute».
Иногда может потребоваться использование так называемого перехвата запросов. Это называется Breakpoints. Активировать эту службу можно в тех же настройках, где ставится галочка в соответствующем поле «Enable/Disable Breakpoints». Что это даст? А вот что: когда перехват запросов включен, плагин буде автоматически блокировать все входящие и исходящие обращения к серверу или сервера к компьютеру в обратном режиме. Иными словами, при заданном адресе можно просто исключить из списка доступных ресурсов именно те объекты, которые, грубо говоря, являются нежелательными или запрещенными для посещения.
Отслеживание прямых и обратных запросов и того проще. В графическом режиме обращения к удаленному серверу отображаются в виде красных стрелок, направленных вверх, а входящие запросы серверов непосредственно к системе – стрелками с направлением вниз.
Шаг 1. Установите Charles Proxy на ваш компьютер
Наш любимый инструмент для анализа HTTP-трафика — это Charles Proxy. Он доступен для всех современных операционных систем (Linux, MacOS, Windows). Бесплатную 30-дневную пробную версию вы можете скачать на сайте charlesproxy.com/download. По завершении пробного периода вам предложат купить лицензию, стоимость которой составляет 50 долларов.
Charles — это чрезвычайно мощный инструмент, не только для анализа трафика приложений, но и для любых видов анализа и отладки веб-приложений. Поэтому если вы занимаетесь мобильной разработкой, то это будет хорошая инвестиция. Если вы просто хотите посмотреть, что происходит с приложениями на вашем смартфоне или планшете, то бесплатной пробной версии будет достаточно. Только имейте в виду, что бесплатная пробная версия ограничена 30-минутными сеансами, поэтому вам нужно будет закрывать и перезапускать Charles каждые 30 минут.
После загрузки файла MSI, DMG или TAR.GZ откройте его и следуйте инструкциям по установке. Charles устанавливается точно так же, как и любое другое приложение, которое вы устанавливаете из сжатого файла.
Repeat Advanced
Хотя полноценное нагрузочное тестирование лучше проводить в специальных инструментах, Charles Proxy имеет одну базовую настройку, которая помогает закрыть минимальные потребности. Функция Repeat Advanced (доступная через контекстное меню перехваченного запроса) позволяет нужное количество раз повторить тот же запрос. После настройки откроется отдельная сессия, где будут видны детали каждого из запросов.
Конечно, список функций Charles Proxy этим не ограничивается. Есть еще много полезного – от перенаправления доменного имени на другой IP-адрес, до автоматического сохранения полученных ответов.
Отмечу, что Charles Proxy платный. Можно использовать триальную версию. Но раз в 5-7 минут поверх него будет отображаться всплывающее окно с версией, а раз в 30 минут он будет выключаться, при этом сессии не сохраняются. Решайте сами, помешает ли это вашей работе.
В целом Charles Proxy – это хороший инструмент. Не сказал бы, что он сильно отличается от того же Fiddler-а, но на мой взгляд он больше заточен под MacOS, поскольку пришел на эту платформу раньше. Хотя сейчас уже нельзя сказать, что какой-то сниффер принципиально лучше или хуже. Все они решают примерно одни и те же задачи сходным образом.
P.S. Мы публикуем наши статьи на нескольких площадках Рунета. Подписывайтесь на наши страницы в VK, FB, Instagram или Telegram-канал, чтобы узнавать обо всех наших публикациях и других новостях компании Maxilect.
View the discussion thread.
blog comments powered by DISQUS
Что собой представляет плагин Charles?
Как уже, наверное, понятно, Charles представляет собой специализированное дополнение, предназначенное для записи входящего и исходящего трафика в режиме реального времени, выполненное в виде программного веб-прокси-сервера.
Изначально этот плагин рассчитан на работу в среде интернет-браузера Mozilla Firefox, однако на сегодняшний день имеются версии, которые с легкостью можно использовать и в не менее популярных браузерах типа Google Chrome или Opera. Основные настройки будут приведены ниже.
В рассмотрении вопроса о том, как пользоваться Charles, стоит отметить, что такая дополнительная утилита подойдет не только рядовым пользователям, а и администраторам компьютерных систем, отдельных терминалов и локальных сетей. При правильной пользовательской настройке абсолютно все параметры можно и контролировать, и изменять.
Что собой представляет программа Charles
Программа предназначена для браузера Mozilla, так что перед установкой Charles нужно скачать его. В принципе, сейчас дополнение поддерживается и Google Chrome, и Opera, но синхронизация потребует определённых настроек.
Mozilla Firefox – наиболее оптимальный браузер для использования Charles
Пока вы работаете в интернете, плагин собирает информацию с серверов и сортирует их по папкам с названиями посещенных сайтов. Вы увидите объём данных, исходящих в сеть и выходящих из неё
Приложение справляется со своей задачей достаточно хорошо, чтобы обратить на себя внимание не только рядовых пользователей, но и профессионалов
Фильтрация
В Charles Proxy очень много вариантов фильтрации запросов.
Начнем с вкладки Structure. Самое примитивное – скопировать хост и вставить в поле Filter. Так мы увидим только запросы с этого хоста. Примерно того же результата можно добиться, если в контекстном меню хоста выбрать Focus. Остальные запросы будут собраны в Other Hosts. Если при этом перейти на закладку Sequence и отметить настройку Focused, то в списке окажется информация только о тех запросах, которые были выбраны на вкладке Structure.
На вкладке Sequence есть аналогичный фильтр.
Charles Proxy умеет работать с регулярными выражениями. Для этого на вкладке Sequence выбираем Settings и отмечаем пункт Filter uses regex. И вписываем в поле поиска элементарную регулярку.
Например, вот так
можно выбрать все запросы, в которых в начале имени хоста находится четыре буквы, а потом идет точка.
Там же можно включить Autoscroll списка запросов или указать максимальное количество строк.
В Charles Proxy можно фильтровать не только отображение, но и запись запросов. Для этого надо зайти в Proxy -> Record settings и задать условия на одной из вкладок – Include или Exclude – так мы включаем или выключаем запись запросов данного хоста.
Похожего результата можно добиться, используя блок-листы. Включить хост в блок лист можно из контекстного меню (команда Block list) или через добавление в Tools -> Block list, где следует отметить Enable Block list.
Блокируемый запрос можно прервать двумя способами (подходящий надо выбрать в настройках):
сбросить соединение;
вернуть ошибку 403.
От выбранного способа блокировки зависит, какой ответ мы получим.
Можно провести эксперимент. Включим наш тестовый стенд в Block list, выбрав простой сброс соединения. С помощью контекстного меню запроса повторим его (команда Repeat) и получим такой ответ:
Статус запроса – Failed, а в описании ошибки указано, что Connection dropped.
Брейкпоинты
Наверное, одна из самых популярных функций Charles Proxy – это настройка точек остановки, которые позволяют перехватывать запросы.
Установить Breakpoint можно из контекстного меню запроса. После этого все аналогичные запросы будут перехвачены. Их можно будет просматривать и редактировать.
Чтобы проверить, как это работает можно использовать повтор запроса (Repeat из того же контекстного меню). Запрос перехватывается, его можно редактировать.
В принципе, изменить можно все – от header до авторизационного токена. Когда редактирование будет закончено, можно выбрать Execute и в Charles Proxy появится повторный запрос, который и отправится на сервер, а потом вернется с ответом. В этот момент можно будет посмотреть и отредактировать ответ, который получит приложение – появится поле Edit response.
Редактируя запрос, можно ввести заведомо некорректные данные и посмотреть, как ответит сервер. Также можно отредактировать ответ (внеся некорректные данные) и использовать его для тестирования фронта. Можно оставить корректные данные, но изменить код – посмотреть, как фронт воспринимает информацию, переданную через API.
Для чего нужна эта программа
FurMark даёт адаптеру некоторую нагрузку, специально составленную так, чтобы возможные дефекты проявили себя – вот, что это за программа. Она анализирует, как видеокарта справляется с задачами при максимально сложных условиях, насколько быстро реагирует на смену кадров, за какое время и как сильно нагревается/остывает.
Но самое главное – FurMark подскажет, есть ли проблемы в ПК, влияющие на работу графической карты. Иногда пользователи винят её в маломощности и нерасторопности, а потом выясняется, что проблема скрывалась в узлах питания или системных настройках.
Каждый, кто проверил своё оборудование, может поделиться результатами на сайте FurMark — таким образом, накапливается общая база, позволяющая составить представление о тех или иных брендах, и понять, соответствует ли конкретная видеокарта норме, которую демонстрируют аналоги.
Настройка мобильного устройства
Чтобы Charles мог мониторить весь входящий и исходящий трафик на устройстве, в настройках Wi-Fi подключения на устройстве нужно прописать IP-адрес хоста с запущенным Charles и указать порт 8888 (по умолчанию). В самом Сharles в настройках прокси нужно удостовериться что стоит порт 8888 (при необходимости можно изменить). Итак, проверка настроек Charles:
И настройка Wi-Fi подключения на смартфоне (в данном примере использовался iPhone):
Открываем настройки, выбираем наше подключение, находим внизу HTTP Proxy, открываем и в поле Server вводим IP-адрес устройства, на котором запущен Charles, прописываем порт 8888 (или другой, если в самом Charles он был изменен) и сохраняем.
Далее, на этом же смартфоне открываем браузер (если это iOS девайс, то Safari, если Android — Chrome) идём по адресу https://charlesproxy.com/getssl и устанавливаем сертификат на устройство. В случае iOS, хоть сертификат и установлен, iOS ему не доверяет, поэтому доверие придётся выставлять нам. Для этого идём в настройки устройства (Settings) -> Основные (General) -> Об устройстве (About) -> Доверие сертификатов (Certificate Trust Settings). Находим наш сертификат (Charles Proxy Custom Root Certificate) и включаем его. На появившемся алерте нажимаем “Продолжить”. Вот так должен выглядеть результат:
Начиная с этого момента, в Charles мы можем видеть адреса, к которым обращается смартфон.
Проблемы с использованием Charles
Иногда при посещении некоторых сайтов сведения о них не отображаются в списках Charles. Попробуйте сделать следующее:
- Откройте раздел Proxy/Recording Settings и Black List.
- Удалите из последнего нужный сайт, и его данные появятся в общем перечне.
Также большая проблема программы заключается в том, что ею пользуются взломщики. Умело манипулируя полученной информацией, они получают доступ к ограниченному контенту, например, к закрытым объектам в онлайн-игре. Это делается с помощью редактирования сведений, которые пришли в Charles: вначале узнается название и код проделанной доступной операции, а затем значение меняется на более высокое. В итоге игрок может «перепрыгнуть» на несколько уровней вперед и получить премиум-ресурсы. Это представляет угрозу не только для разработчиков гейм-развлечений, но и для соперников по игре, особенно если конкуренция лежит в её основе.
Зачастую Charles используется для взлома WEB приложений
Если у вас возник соблазн проделать нечто подобное, то настоятельно не рекомендуем так поступать: как правило, разработчики следят за ходом игры, рано или поздно они обнаружат вашу нечестность, и вы можете лишиться аккаунта вместе со всеми достижениями (а некоторые люди играют годами и успевают сделать денежные вложения).
Первичная настройка
При тестировании мобильного приложения
Charles Proxy необходимо запустить на компьютере, который находится в той же локальной подсети, что и мобильное устройство с тестируемым приложением.
Как правило, соединение настраивается по Wi-Fi. В настройках Wi-Fi мобильного устройства в качестве proxy-сервера надо указать IP-адрес компьютера и стандартный порт инструмента 8888 (пароль остается пустым).
IP-адрес компьютера можно узнать через командную строку (ipconfig) или в самом Charles Proxy (Help -> Local IP Address).
Этот же адрес есть в инструкции по подключению, доступной в Help -> SSL Proxying -> Install Charles Root Certificate on mobile device remote browser.
После сохранения настроек Charles Proxy сможет читать HTTP-трафик мобильного устройства. Но чтобы смотреть расшифрованный трафик HTTPS, нужны дополнительные манипуляции – требуется установить SSL-сертификат Charles Proxy в браузере на мобильном устройстве.
Скачать сертификат можно по адресу: chls.pro/ssl (адрес, по которому скачивается сертификат, также можно найти в инструкции Help -> SSL Proxying -> Install Charles Root Certificate on mobile device remote browser). Далее в iOS его необходимо сделать доверенным (в Настройки -> Основные -> Профили).
В Android установленные сертификаты верифицируются в Settings -> Trusted Credentials на вкладке User.
Главное отличие в настройках для этой ОС в том, что с Android 6.0 и выше в Androidmanifest надо добавить специальную конфигурацию, позволяющую просматривать защищенный трафик. На продакшене эта конфигурация убирается из соображений безопасности.
При тестировании приложения на ПК
В этом случае дополнительные сертификаты нужно установить на сам ПК. Для скачивания и установки нужна ссылка из Help -> SSL Proxying -> Install Charles Root Certificate.
Сертификат устанавливается в доверенные корневые центры.
Что собой представляет программа Charles
Программа предназначена для браузера Mozilla, так что перед установкой Charles нужно скачать его. В принципе, сейчас дополнение поддерживается и Google Chrome, и Opera, но синхронизация потребует определённых настроек.
Mozilla Firefox – наиболее оптимальный браузер для использования 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 и я добавлю их в статью.
Как пользоваться Charles: основные аспекты
Итак, плагин настроен и готов к использованию. Самое простое действие с активацией записи траффика в реальном времени производится при помощи кнопки «Start/Stop Recording».
Редактирование настроек осуществляется простейшим способом для всех параметров. На нужной строке нужно просто использовать правый клик, после чего выбрать команду «Edit». После изменения той или иной настройки требуется подтверждение изменений. Оно производится с помощью кнопки «Execute».
Иногда может потребоваться использование так называемого перехвата запросов. Это называется Breakpoints. Активировать эту службу можно в тех же настройках, где ставится галочка в соответствующем поле «Enable/Disable Breakpoints». Что это даст? А вот что: когда перехват запросов включен, плагин буде автоматически блокировать все входящие и исходящие обращения к серверу или сервера к компьютеру в обратном режиме. Иными словами, при заданном адресе можно просто исключить из списка доступных ресурсов именно те объекты, которые, грубо говоря, являются нежелательными или запрещенными для посещения.
Отслеживание прямых и обратных запросов и того проще. В графическом режиме обращения к удаленному серверу отображаются в виде красных стрелок, направленных вверх, а входящие запросы серверов непосредственно к системе – стрелками с направлением вниз.
Rewrite
Функция Rewrite может быть полезна, если вам нужно переписать данные, которые отправляются в Charles Proxy. В отличие от простого редактирования Rewrite позволяет задать правила изменения и работать в автоматическом режиме. Можно изменять и добавлять заголовки, искать и заменять текст в теле запроса или ответа. Можно даже менять статус ответа.
Rewrite удобно использовать, когда нужен готовый ответ, но мы не хотим каждый раз ставить брейкпоинт и вписывать его в ручную. Редактируя таким образом ответ, фактически, мы ставим заглушку – можем имитировать работу сторонних партнеров. Честно говоря, в Postman-е эта функция реализована более интуитивно. Но раз мы говорим про Charles, не будем отходить от его примера.
Настроить это можно через Rewrite settings, доступные в контекстном меню. Единственный недостаток инструмента в том, что каждое правило замены прописывается отдельно.
Помимо изменения запросов и ответов мы можем запретить кэширование или cookie (функции No caching и Block cookies). Эти опции повторяют аналогичные инструменты панели разработчика в браузере. В обоих случаях настраивается список хостов, для которых действует настройка. Если же список пуст, то кэширование и cookie отключаются на всех перехваченных хостах.
Установка и настройка программы
Установить Charles легко – достаточно следовать инструкциям, появляющимся в процессе инсталляции. К сожалению, в лицензионной версии предлагается только английский язык, но инфографика кнопок вполне ясная.
Также для браузера Mozilla скачайте и установите Java самой свежей версии – это позволяет программе работать корректно. Иногда нужный файл кладут в общий архив – кликните по нему и запустите
Обратите внимание, что Java не поддерживается браузерами на основе Chromium: Google Chrome, Яндекс. Браузер и прочими
Главное окно программы Charles
После установки программы найдите в пакете инсталляции файл с расширением .xpi. Откройте Firefox и просто перетащите элемент в окно браузера.
Переходим к настройкам:
- Если у вас браузер Firefox, то просто откройте его, перейдите во вкладку Tools – Charles и нажмите Enable Charles. Для проверки откройте какой-нибудь сайт, а затем Charles (значок в виде кувшинчика, по умолчанию он находится на «Рабочем столе»), и вы увидите целый список запросов, связанных с открытием ресурса.
- В Chrome и Opera нужно открыть «Настройки» — «Прокси-сервер», отметить пункт HTTP, указать IP: 127.0.0.1 и порт: 8888.
