Приложение Charles аналогично приложению Fiddler (установку разобрали в этой статье ), оно также работает как прокси-сервер и служит для просмотра запросов, которые идут между клиентом и сервером. Рассмотрим как использовать Charles для Firefox
Настройка для MAC OS в этой статье .
Как установить Charles
Скачиваем дистрибутив для вашей операционной системы с https://www.charlesproxy.com/ и запускаем установщик. Никаких особенных настроек в процессе установки делать не требуется, все достаточно стандартно:
Сразу после установки приложения можно приступить к работе.
Настройка Charles
Для работы с HTTPS-трафиком необходимо установить сертификаты прокси-сервера Charles в браузер. В зависимости от браузера этот сценарий отличается.
- Откройте меню Help и выберите «SSL Proxying -> Install Charles Root Certificate» .
Источник: dzen.ru
Обзор Charles Proxy | Что такое Charles Proxy | Установка Charles Proxy
Начинающему QA: полезные функции снифферов на примере Charles Proxy
Снифферы — это инструменты, позволяющие перехватывать, анализировать и модернизировать все запросы, которые через них проходят. Они полезны, когда из потока нужно извлечь какие-либо сведения или создать нужный ответ сервера. Так можно проводить модульное тестирование продукта, в котором есть и бэк, и фронт, и разные команды со своей версионностью.
Далее я расскажу об основных функциях снифферов, которые могут быть полезны QA. Попробую не вдаваться в теорию, а сфокусироваться на практике. Наиболее популярными представителями анализаторов трафика сейчас являются WhireShark, Fiddler и Charles Proxy. Об удобстве интерфейсов и функционале каждого из них можно рассуждать долго, учитывая все плюсы и минусы.
Но здесь я отдал предпочтение Charles, поскольку сам им активно пользуюсь. Буду рассказывать на его примере.
Что собой представляет Charles Proxy
Charles Web Debugging Proxy — это инструмент мониторинга HTTP и HTTPS трафика. Он выступает в роли прокси-сервера (промежуточного звена) между тестируемым приложением и сервером на бэкенде, позволяя не только видеть, но также перехватывать и редактировать запросы. Главное преимущество Charles Proxy и снифферов в целом — возможность просмотра трафика, в том числе с мобильных устройств, что значительно облегчает работу тестировщика клиент-серверных мобильных приложений.
Первичная настройка
При тестировании мобильного приложения
Charles Proxy необходимо запустить на компьютере, который находится в той же локальной подсети, что и мобильное устройство с тестируемым приложением. Как правило, соединение настраивается по Wi-Fi. В настройках Wi-Fi мобильного устройства в качестве proxy-сервера надо указать IP-адрес компьютера и стандартный порт инструмента 8888 (пароль остается пустым). IP-адрес компьютера можно узнать через командную строку (ipconfig) или в самом Charles Proxy (Help -> Local IP Address).
Charles proxy установка, настройка, подключение телефона. Как настроить Charles proxy.
Этот же адрес есть в инструкции по подключению, доступной в 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 Proxy прост. Слева — список перехваченных запросов, справа — детали. В списке запросов есть две основные вкладки — Structure и Sequence. В первом случае запросы рассортированы по хостам-папкам. Наведя на любой из них, можно получить всю информацию о количестве запросов к этому корневому хосту, доле удачных, таймингах, размерах и т.п.
Фактически, здесь представлена вся та же информация, которую можно получить из панели разработчика в браузере. Выбрав конкретный URL, можно увидеть код ответа, версии протоколов, контент и т.п. Тело запроса, заголовки, cookie (если есть) можно посмотреть в разных форматах — даже в HEX. С помощью контекстного меню запроса можно настраивать блокировки, повторять и изменять запросы.
На этом мы еще остановимся. На вкладке Sequence запросы выведены по времени в виде настраиваемой таблицы. Видно, когда начался запрос, сколько он длился, его размер, статус и т.п. Наведя на конкретную строку, мы получим ту же информацию о теле, заголовках и т.п. Если запросов на экране слишком много, с помощью панели инструментов их можно очистить или вообще остановить перехват.
Там же есть возможность включить и выключить троттлинг (подробнее об этих функциях расскажу позже). Базовая настройка каждой из функций осуществляется через меню, а кнопки панели управления выступают своего рода тумблерами On / Off.
Фильтрация
- сбросить соединение;
- вернуть ошибку 403.
От выбранного способа блокировки зависит, какой ответ мы получим.
Можно провести эксперимент. Включим наш тестовый стенд в Block list, выбрав простой сброс соединения. С помощью контекстного меню запроса повторим его (команда Repeat) и получим такой ответ:
Статус запроса — Failed, а в описании ошибки указано, что Connection dropped.
Просмотр SSL-трафика
Если ранее мы успешно установили SSL-сертификат, для просмотра зашифрованного трафика остается только включить SSL proxying для нужного хоста в самом Charles Proxy. Это можно сделать через контекстное меню конкретного хоста.
Чтобы не включать каждый хост, можно зайти в Proxy -> SSL Proxying settings и на первой вкладке SSL Proxying включить Enable SSL Proxying.
Аналогично настройке фильтров на вкладках Include и Exclude можно добавить или исключить конкретные хосты. Если списки на этих вкладках не заполнять, по умолчанию мы будем читать трафик со всех хостов.
Брейкпоинты
Наверное, одна из самых популярных функций Charles Proxy — это настройка точек остановки, которые позволяют перехватывать запросы.
Установить Breakpoint можно из контекстного меню запроса. После этого все аналогичные запросы будут перехвачены. Их можно будет просматривать и редактировать.
Чтобы проверить, как это работает можно использовать повтор запроса (Repeat из того же контекстного меню). Запрос перехватывается, его можно редактировать.
В принципе, изменить можно все — от header до авторизационного токена. Когда редактирование будет закончено, можно выбрать Execute и в Charles Proxy появится повторный запрос, который и отправится на сервер, а потом вернется с ответом. В этот момент можно будет посмотреть и отредактировать ответ, который получит приложение — появится поле Edit response.
Редактируя запрос, можно ввести заведомо некорректные данные и посмотреть, как ответит сервер. Также можно отредактировать ответ (внеся некорректные данные) и использовать его для тестирования фронта. Можно оставить корректные данные, но изменить код — посмотреть, как фронт воспринимает информацию, переданную через API.
Map remote
Еще одна популярная функция Charles Proxy — подмена ответа сервера. Так мы можем ответ одного хоста подменить на ответ другого. Настраивается это через Tools -> Map Remote.
Обратите внимание, в левом нижнем углу есть кнопки Import и Export. Они позволяют обмениваться настройками — переносить их с одного рабочего места на другое.
Например, мы можем подменить контура. Я буду посылать запрос на dev-контур, но ответ хочу получить с тестового стенда. Для этого создаем новый пункт в списке Map Remote Settings. Map From — куда изначально был запрос; Map to — откуда берем ответ.
Эта функция может быть полезна, если мы поймали ошибку на продакшене, например при загрузке таблицы, а информации в dev-контуре для полноценного тестирования не хватает. Вместо того, чтобы перезаполнять информацию в каждом контуре, мы можем скопировать ответ сервера в нужный контур и посмотреть, как он ведет себя после исправления ошибки.
Map Local
Главное отличие Map Local от предыдущей функции в том, что замена осуществляется не на ответ другого сервера, а на содержимое локального файла. Настройки выглядят точно также, но вместо второго сервера мы указываем локальный путь к файлу с ответом.
Rewrite
Функция Rewrite может быть полезна, если вам нужно переписать данные, которые отправляются в Charles Proxy. В отличие от простого редактирования Rewrite позволяет задать правила изменения и работать в автоматическом режиме. Можно изменять и добавлять заголовки, искать и заменять текст в теле запроса или ответа. Можно даже менять статус ответа.
Rewrite удобно использовать, когда нужен готовый ответ, но мы не хотим каждый раз ставить брейкпоинт и вписывать его в ручную. Редактируя таким образом ответ, фактически, мы ставим заглушку — можем имитировать работу сторонних партнеров. Честно говоря, в Postman-е эта функция реализована более интуитивно. Но раз мы говорим про Charles, не будем отходить от его примера.
Настроить это можно через Rewrite settings, доступные в контекстном меню. Единственный недостаток инструмента в том, что каждое правило замены прописывается отдельно.
Помимо изменения запросов и ответов мы можем запретить кэширование или cookie (функции No caching и Block cookies). Эти опции повторяют аналогичные инструменты панели разработчика в браузере. В обоих случаях настраивается список хостов, для которых действует настройка. Если же список пуст, то кэширование и cookie отключаются на всех перехваченных хостах.
Throttling
Charles Proxy помогает тестировать сервис на плохой связи, искусственно ограничив через настройки пропускную способность канала. Эта функция полезнее всего для тестирования десктопных приложений, поскольку на мобильных устройствах качеством связи можно управлять через панель разработчика.
Настраивается функция через Proxy ->Throttling settings.
Ограничения можно включить либо для хостов из списка, либо для всех перехваченных запросов. Из коробки есть несколько пресетов, но все параметры связи можно корректировать вручную. Мне по большей части хватает базовых настроек.
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.
Источник: spark.ru
Как использовать Charles
Charles – программа прокси для изучения и отладки HTTPS трафика между клиентом и сервером. С его помощью можно проверить состав запроса и ответа, при необходимости изменить его. Например, чтобы увидеть как ведет себя веб-приложение при некорректном ответе от сервера, или какой ответ присылает сервер при некорректном запросе. Можно перенаправлять запросы на другой хост, эмулировать проблемы в сети и много чего еще.
Документацию можно почитать на официальном сайте , а в данной заметке я покажу основные кейсы его использования.
Установка и предварительная настройка
Установка и запуск
Скачайте и установите Charles .
При первом запуске 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
Как менять запросы и ответы
Задача: на лету изменить параметр в заголовке или в теле запроса и посмотреть, что вернёт сервер, либо наоборот, модифицировать ответ сервера, чтобы проверить как поведет себя клиент.
В этом случае можно использовать инструмент Rewrite (Tools – Rewrite – галочка Enable Rewrite.
Добавьте новое правило, введите хост (или оставьте пустым, тогда правило будет действовать для всех хостов), затем заполните Rewrite Rule, где укажите что на что необходимо заменить.
В примере ниже, значение поля bonus в теле ответа будет заменено со 100 на 5000.
- Type: Body – потому что меняем параметр в теле;
- Where: Response – потому что меняем ответ;
- Match: в Value – значение, возвращаемое сервером;
- Replace: в Value – значение, на которое необходимо заменить Value из Match.
Еще задача: допустим есть лента с контентом (видео, реклама, музыка) и при тестировании нужно быстро изменить его источник без вмешательства разработчика.
В разделе Match можно использовать регулярные выражения.
Аналогичным способом через Rewrite можно изменять, добавлять, удалять заголовки, менять коды ответа сервера, хосты и url.
Как вручную отредактировать запрос
Задача: перехватить запрос (ответ) и перед отправкой (приемом) его отредактировать. Отличие от предыдущей задачи заключается в том, что в ней данные менялись на лету по заранее заданному шаблону, здесь же редактирование осуществляется вручную.
Запросы можно редактировать используя инструмент Compose. Прежде нужно, чтобы запрос выполнился хотя бы один раз. Найдите его среди остальных запросов. В контекстном меню выберите Compose.
В открывшемся окне можно изменить тело запроса, метод, протокол, url, параметры, заголовки и куки. Затем нужно нажать кнопку Execute и запрос будет отправлен с новыми данными.
Инструмент Repeat в контекстном меню запроса отправит его на сервер еще раз.
Repeat Advanced – похож на Repeat, однако позволяет указать количество отправляемых запросов и задержку между ними. Данный функционал может быть полезен при проверке сервера на флуд.
С помощью инструмента Breakpoints (точки остановка) можно перехватывать и изменять не только запросы, но так же и ответы от сервера, прежде чем они попадут на клиент.
Для начала нужно включить возможность использования Breakpoints (Proxy – Breakpoint Settings – Enable Breakpoints).
Далее нужно указать URL запроса, который в случае выполнения должен быть перехвачен. Это можно сделать в том же окне Breakpoint Settings, либо повесить Breakpoint через контекстное меню, выбрав ранее выполненный запрос.
Перед выполнением запроса он будет остановлен и вы сможете отредактировать его тело, метод, протокол, 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).
Здесь можно включить сетевые ограничения для определенных или всех хостов, а так же задать различные сетевые параметры.
- Bandwidth – пропускная способность;
- Utilisation – эффективность использования пропускной способности;
- Latency – задержка в миллисекундах между клиентом и сервером;
- MTU – максимальный объём данных за одну итерацию;
- Reliability – вероятность, что соединение не удастся;
- Stability – вероятность, что соединение будет нестабильным.
Так же можно использовать готовые предустановки из списка.
Как раздать 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 и я добавлю их в статью.
На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.
Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.
Источник: trofimovdigital.ru