Charles Proxy Server — с чего начать?

Зачастую, при тестировании мобильных (да и web) клиент-серверных приложений бывают ситуации, когда нужно проверить как ведёт себя приложение при разном объеме данных, в каком формате приложение отправляет и получает данные, какие параметры у запроса и ответа, какой ответ присылает сервер при некорректном запросе, как реагирует приложение на некорректный ответ, как оно обрабатывает ошибки. Всё это можно относительно просто проверить при помощи Charles Proxy Server.

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

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

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

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

2. Настройка мобильного устройства

Чтобы Charles мог мониторить весь входящий и исходящий трафик на устройстве, в настройках Wi-Fi подключения на устройстве нужно прописать IP-адрес хоста с запущенным Charles и указать порт 8888 (по умолчанию). В самом Сharles в настройках прокси нужно удостовериться что стоит порт 8888 (при необходимости можно изменить). Итак, проверка настроек Charles:

И настройка Wi-Fi подключения на смартфоне (в данном примере использовался iPhone):

Далее, на этом же смартфоне открываем браузер (если это iOS девайс, то Safari, если Android — Chrome) идём по адресу http://charlesproxy.com/getssl и устанавливаем сертификат на устройство. В случае iOS, хоть сертификат и установлен, iOS ему не доверяет, поэтому доверие придётся выставлять нам. Для этого идём в настройки устройства (Settings) -> Основные (General) -> Об устройстве (About) -> Доверие сертификатов (Certificate Trust Settings). Находим наш сертификат (Charles Proxy Custom Root Certificate) и включаем его. На появившемся алерте нажимаем “Продолжить”. Вот так должен выглядеть результат:

Начиная с этого момента, в Charles мы можем видеть адреса, к которым обращается смартфон.

3. Последние штрихи настройки

Далее, возвращаемся к настройке самого Charles. Во-первых, если нас интересует конкретный адрес, а весь остальной трафик является шумом, то нужно кликнуть по интересующему нас адресу и выбрать пункт “Focus”. Это позволит скрыть все лишние адреса во вкладке “Other Hosts” (см. картинку ниже). Как было упомянуто выше, адреса серверов, на которые смартфон отсылает запросы нам видны, но мы не можем видеть параметры запросов:

Для того, чтобы Charles мог увидеть параметры запроса, нужно прописать адрес сервера в SSl Proxy Settings. Это можно сделать следующим образом:

Теперь если отправить запрос на соответствующий сервер, то можно увидеть параметры запросов:

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

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

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

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

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

После сохранения и клика по кнопке Apply, Charles начнёт изменять все запросы по указанной связке URL+path в соответствии с заданным правилом. В данном случае в запросе будет передаваться JSON <“field”:”value”>. Подобным образом можно менять тело ответа, приходящего с сервера. Также можно изменять URL, заголовки, параметры запроса, код состояния HTTP.

Послесловие: В данной статье я постарался как можно более просто, но в то же время подробно описать инструкцию по работе с Charles Proxy Server. По сути, данная статья — агрегатор документации, размещенной на официальном сайте.

Погружение в удивительный мир Charles для чайников

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

Charles работает и на мобильных устройствах, но в этой статье мы будем рассматривать только версию для Windows. Давайте же начнем!

Установка Charles

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

Программа платная, но есть тестовый период на 30 дней. Даже без покупки программой можно спокойно пользоваться, но время одной сессии будет ограничено 30 минутами, а также частенько на 5-10 секунд будет появляться оверлей.

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

После скачивания следует запустить exe-файл и произвести инсталляцию. Здесь ничего сложного нет, просто оставьте стандартные настройки установки.

Настройка программы

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

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

Инструкция по установке сертификата:

Открываем меню установки сертификата через Help -> SSL Proxying -> Install Root Charles Certificate.

SSL Proxying -> Install Root Charles Certificate» src=»https://timeweb.com/media/image30.png» title=»»/>

Жмем «Установить сертификат».

Здесь выбираем «Локальный компьютер» и жмем «Далее».

ВАЖНО! На этом этапе выбираем «Поместить все сертификаты в следующее хранилище», жмем «Обзор», затем ОБЯЗАТЕЛЬНО выбираем «Доверенные корневые центры сертификации».

Жмем «Далее».

Затем жмем «Готово».

Установку сертификата мы выполнили, теперь нам необходимо включить SSL Proxying и настроить его фильтрацию, чтобы начать перехватывать запросы. Фильтрация определяет, какие именно запросы нужно ловить, но мы сделаем так, чтобы у нас перехватывались все запросы.

Открываем Proxy -> SSL Proxying Settings.

Ставим галочку на «Enable SSL Proxying», затем под полем «Include» жмем на кнопку «Add».

Для отключения фильтрации и сниффинга всего трафика мы просто добавляем звездочку в поле « Host » .

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

Compose

Данная функция позволяет нам отправить копию выбранного запроса с измененными параметрами.

Нам достаточно выбрать один конкретный запрос и с помощью функции Compose поменять его параметры (заголовок запроса, тело запроса, куки, код и пр.)
Для начала мы можем отделить конкретные запросы от остальных с помощью функции Focus :

Теперь выбираем нужный нам запрос и выполняем ПКМ -> Compose

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

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

После изменения нужных нам параметров жмем « Execute » и получаем копию запроса с ответом от сервера.

Breakpoint

Данная функция позволяет точнее работать с запросами, вешая на них так называемый «Breakpoint» (точку остановки).

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

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

Открываем Proxy -> Breakpoint Settings.

Ставим галочку на «Enable Breakpoints», затем жмем «Add».

Заполняем все поля в открывшемся окне (выше пример заполнения).

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

Rewrite

Если же ваша задача заключается в подмене параметров множества запросов, то вы можете прибегнуть к функции « Rewrite » .

Открываем Tools -> Rewrite.

Rewrite» src=»https://timeweb.com/media/image9.png» title=»»/>

Ставим галочку на «Enable Rewrite», затем в открывшемся окне под левым полем жмем «Add», а дальше жмем «Add» уже под правым верхним полем.

Заполняем все поля (они идентичны тем, что заполняются при создании Breakpoint).

Затем жмем «Add» уже под правым нижним полем, указываем тип редактирования запроса, заменяемые значения, а также условия замены.

Давайте поймаем запрос и посмотрим на реакцию Charles!

Charles поймал нужный запрос, а затем заменил все Header одним значением.

Repeat Advanced

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

Ниже подробно показано, как это сделать.

ПКМ по запросу -> Repeat Advanced.

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

Должно открыться новое окно, где отправляются запросы.

Map Local

Последняя функция в сегодняшней статье. Позволяет работать с локальными файлами.

Демонстрация инструмента ниже.

ПКМ по запросу -> Map Local.

В открывшемся окне у нас идут знакомые поля. Жмем «Choose» и выбираем локальный файл, после чего жмем « OK » .

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

Надеюсь, эта статья помогла вам разобраться в основах Charles. Это действительно мощный и довольно простой инструмент для тестирования. Спасибо за внимание!

Charles

Web Debugging Proxy Application for Windows, Mac OS and Linux

Download

Browser & System Configuration

In order for any browser (or any application) to use Charles it must be configured to use Charles as its proxy server. Most browsers will have a way to configure this manually, but configuring manually is annoying because you have to configure and reconfigure everytime you start and stop Charles.

Fortunately Charles can autoconfigure the proxy settings in many cases including:

• Windows / Internet Explorer proxy settings – used automatically by most Windows applications
• macOS proxy settings – used automatically by most macOS applications
• Mozilla Firefox proxy settings (all platforms)

Windows Proxy Settings

Charles can automatically configure the Windows proxy settings so that Internet Explorer and other Windows applications automatically start using Charles. By default Charles will configure and then reconfigure the Windows proxy settings whenever Charles is started or quit.

Charles proxy configuration behaviour can be changed in Charles in the Proxy Menu, Proxy Settings dialog.

The Windows proxy settings are configured in the Internet Options control panel on the Connections tab if you want to look at them yourself.

Microsoft Edge has an additional setting that you may need to make by browsing to about:flags and enabling Allow localhost loopback. This is required in order to connect to Charles Proxy running on localhost.

macOS Proxy Settings

Charles can automatically configure the macOS system proxy settings so that Safari and other macOS applications automatically start using Charles.

When you first install Charles you will be prompted to grant permissions to Charles to autoconfigure the proxy settings. After that, Charles will configure and then reconfigure the macOS proxy settings whenever Charles is started or quit.

Charles proxy configuration behaviour can be changed in Charles in the Proxy Menu, Proxy Settings dialog.

The macOS proxy settings are configured in the advanced areas of the Network panel in the System Preferences if you want to look at them yourself.

In order to use HTTP 2 with Charles from Safari you must use Charles in SOCKS mode. See the Proxy Settings for configuring SOCKS.

iOS Device Settings

To use Charles as your HTTP proxy on your iPhone you must manually configure the HTTP Proxy settings on your WiFi network in your iPhone’s Settings.

Go to the Settings app, tap Wi-Fi, find the network you are connected to and then tap it to configure the network. Scroll down to the HTTP Proxy setting, tap Manual. Enter the IP address of your computer running Charles in the Server field, and the port Charles is running on in the Port field (usually 8888). Leave Authentication set to Off.

All of your web traffic from your iPhone will now be sent via Charles. You should see a prompt in Charles when you first make a connection from the iPhone, asking you to allow the traffic. Allow this connection. The IP address of your iPhone will be added to the Access Control list in Charles, which you can view and change in the Proxy menu > Access Control Settings.

Remember to disable the HTTP Proxy in your Settings when you stop using Charles, otherwise you’ll get confusing network failures in your applications!

Auto configuration

You can also supply an auto-configuration URL instead of entering manual configuration. This approach will enable your device to first try to use Charles, but then to fallback to using a direct connection if Charles isn’t running. This is an experimental approach!

For the auto-configuration URL enter:

Where you replace X.X.X.X with the IP address of your computer running Charles. This defaults to port 8888. If you use a different port, just include that, e.g. https://chls.pro/X.X.X.X:XXXX.pac

You can also use Charles in SOCKS proxy mode from iOS using an autoconfiguration rule, in spite of this not being available as a manual setting. Enter the auto-configuration URL as follows:

HTTP 2

Safari on iOS 10 does not currently support HTTP 2 via HTTP proxies. In order to use HTTP 2 with Safari on iOS and Charles Proxy you need to use Charles in SOCKS mode and use the auto-configuration URL described above to specify SOCKS mode.

iOS Simulators

The iOS Simulator should use the system proxy settings. If it doesn’t, please try quitting and restarting the iOS Simulator. As of Xcode 6 it appears to be important that Charles is running and set as the macOS system proxy before you run the iOS Simulator.

Mozilla Firefox Proxy Settings

Configure Firefox to use your system proxy settings. In Firefox, go to Preferences > Advanced > Network > Connection Mozilla Firefox can now be configured to use the system proxy settings, which is usually preferable as Charles can control the system proxy settings on Windows and macOS without the need for installing an add-on. Check your Firefox proxy settings in Preferences > Advanced > Network > Connection and press the Settings button. Then choose «Use system proxy settings».

Manual Proxy Configuration

In Charles, go to the Proxy menu and choose Proxy Settings. This will show you the currently configured HTTP Proxy Port and SOCKS Proxy Port. Note down which one you want to use (probably HTTP Proxy).

The host name is 127.0.0.1 (your own computer) or the external address of your computer if you want to access Charles from another computer.

You can then configure your browser or application’s proxy settings with that host name and port.

Java Application Proxy Configuration

You can configure your Java application to use Charles in code or as command line arguments to the java executable.

System.setProperty(«http.proxyHost», «127.0.0.1»);
System.setProperty(«http.proxyPort», «8888»);

And for HTTPS as well. Note that you may also want to configure Java to trust Charles’s root certificate in this case (see SSL Proxying).

System.setProperty(«https.proxyHost», «127.0.0.1»);
System.setProperty(«https.proxyPort», «8888»);

For the source of this information, including more discussion and how to set these as command line arguments: http://java.sun.com/j2se/1.5.0/docs/guide/net/proxies.html

cURL and libcurl

For cURL on the command line:
curl —proxy localhost:8888

If you are developing an application using libcurl you can configure it to use Charles as its proxy server:

curl_easy_setopt(pCurl, CURLOPT_PROXY, «127.0.0.1»);
curl_easy_setopt(pCurl, CURLOPT_PROXYPORT, 8888);

If you are using SSL you may like to disable the certificate verification during development, if you can’t get cURL to trust Charles’s CA certificate:

curl_easy_setopt(pCurl, CURLOPT_SSL_VERIFYPEER, 0);

Thanks to Michael Klische for providing this information.

Android emulator

In the Android emulator run configuration add an Additional Emulator Command Line Option:
-http-proxy http://10.0.2.2:8888

Where 10.0.2.2 is a special IP address for Android Emulators that resolves to the host computer IP. If you run Charles on another computer, replace that IP address with the IP address of the other computer.

Android

Some Android devices have HTTP proxy settings. On the Nexus S it is hidden; you can access the HTTP proxy settings by opening the Voice Dialler app and saying «proxy». On some Samsung devices you can access proxy settings by long-pressing on the network name in the WiFi configuration.

You can also hardcode your application to use a proxy server during testing:

HttpHost httpproxy = new HttpHost(«192.168.0.101», 8888, «http»);
httpClient.getParams().setParameter(ConnRoutePNames.DEFAULT_PROXY,httpproxy);

HttpUrlConnection conn = url.openConnection(new Proxy(Proxy.Type.HTTP, new InetSocketAddress(«192.168.0.101», 8888)));

Make sure the first IP address is the IP address of your computer running Charles, then add this code to customise your httpClient or to open a URL connection.

Charles is developed by XK72. All content is copyright 2021. Site design by Matthew Buchanan.