Charles - налаштовуємо проксіювання трафіку з пристроїв

Charles Proxy — один з найпопулярніших інструментів для перехоплення та аналізу мережевого трафіку. Цей гайд допоможе вам швидко налаштувати Charles для роботи з мобільними додатками чи веб-сайтами.

Це незамінний інструмент для QA-інженерів, розробників та всіх, хто працює з запитами та відповідями

Навіщо потрібен Charles?

У сучасній розробці складно уявити тестування без аналізу мережевого трафіку. Charles вирішує ключові задачі:

• Дебаг API — бачите всі запити та відповіді
• Тестування мобільних додатків — перехоплення трафіку з iOS/Android
• Модифікація даних — підміна відповідей для тестування edge cases
• Аналіз безпеки — перевірка передачі чутливих даних

Що таке Charles?

Сніфінг трафіку — це процес моніторингу та перехоплення всіх пакетів, що проходять через мережу. Популярні інструменти: Charles Proxy, Fiddler, OWASP ZAP, Proxyman.

Ключові переваги Charles:

• Детальний аналіз трафіку — бачите весь HTTP/HTTPS трафік з додатків
• Модифікація запитів — підміна відповідей для тестування різних сценаріїв
• Підтримка HTTPS — робота з зашифрованим трафіком після встановлення сертифікатів
• Кросплатформенність — працює на macOS, Windows, Linux
• Інтуїтивний інтерфейс — зручна структура для аналізу запитів

Недоліки Charles:

• Платний — $50 за ліцензію, безкоштовна версія з обмеженнями
• Складне початкове налаштування — потребує встановлення сертифікатів
• Споживає ресурси — може сповільнювати роботу на слабких ПК
• Застарілий інтерфейс — дизайн не оновлювався роками
• Проблема з відображенням BASE64 - зависає додаток (фікситься встановленням бета версії)

Як наочно це виглядає:

Встановлення Charles

Charles доступний для всіх популярних операційних системах - macOS, Windows та Linux.

Завантажити Charles Proxy

Альтернативи Charles

Якщо вам потрібен безкоштовний аналог:

• Proxyman (macOS) — сучасний інтерфейс, безкоштовна версія з обмеженнями
• Fiddler (Windows/macOS) — безкоштовний, але менш зручний інтерфейс
• OWASP ZAP — open-source, орієнтований на безпеку

Налаштування Charles

З налаштуванням клієнта Charles і пристроїв справи йдуть набагато гірше, ніж просто з установкою, але ми з цим впораємося 👀

Клієнт Charles

Після запуску ми перевіряємо дані адреси ПК:

• У Charles дивимось свій IP: Help → Local IP Address
• Перевіряємо порт (за замовчуванням - 8888): Proxy → Proxy Settings (HTTP Proxy → Port)

IP та порт десь фіксуємо, щоб ввести ці дані на наших пристроях, з яких ми будемо транслювати трафік.

Android пристрої

Проксіюємо трафік з Android:

1. Налаштування системи → Мережа та інтернет → Wi-Fi
2. Вибираємо мережу, до якої підключений ПК
3. Клік на іконку шестерінки навпроти цієї мережі
4. Змінити → Розширені налаштування → Проксі-сервер → Вручну
5. Ім’я хоста проксі-сервера: IP Вашого ПК (це те, що я просив зафіксувати вище 🥸)
6. Порт проксі-сервера: порт Charles (8888 або який у вас встановлений)

Емулятор Android

На емуляторі достатньо ввести IP та порт у налаштуваннях самого емулятора:

1. “Settings” → “Proxy”
2. Вибрати “Manual proxy configuration”
3. Заповнити “Host name” та “Port number”

На деяких емуляторах необхідно налаштовувати аналогічно реальному пристрою:

1. Налаштування системи → Мережа та інтернет → Wi-Fi
2. Вибираємо мережу, до якої підключений ПК
3. Клік на іконку шестерінки навпроти цієї мережі
4. Змінити → Розширені налаштування → Проксі-сервер → Вручну

iOS пристрої

Проксіюємо трафік з iOS:

1. Налаштування системи → Wi-Fi
2. Вибираємо мережу, до якої підключений ПК
3. Клік на іконку інфо (i)
4. Налаштування проксі → Вручну
5. Сервер: IP Вашого ПК (наприклад, 192.168.1.2)
6. Порт: порт Charles (за замовчуванням - 8888)

Chrome (macOS)

Направити трафік з Chrome в Charles можна наступним чином:

1. Повинен бути увімкнений macOS Proxy (Proxy → macOS Proxy)
2. В Налаштуваннях Chrome знайти налаштування проксі
3. В налаштуваннях мережі автоматично підставиться потрібний IP та порт з Charles

Встановлення сертифікатів

Після встановлення та налаштування, яке ми здійснили вище - Вам необхідно встановити сертифікати на ПК та мобільний пристрій:

На ПК встановлюємо сертифікат:

1. Help → SSL Proxying → Install Charles Root Certificate

На мобільному пристрої:

1. Переходимо за URL: http://chls.pro/ssl або http://charlesproxy.com/getssl
2. Встановлюємо сертифікат

Для iOS після вибору “Дозволити” потрібно перейти в налаштування пристрою:

1. “Основні” → “Профілі та керування пристроєм”
2. Вибираємо потрібний сертифікат і натискаємо “Встановити”
3. Після цього дозволити використання сертифіката в меню: “Основні” → “Про цей пристрій” → “Довіра сертифікатам”
4. Вмикаємо свіч навпроти потрібного профілю

Включення проксіювання трафіку

Після налаштування проксі на пристрої та в самому Charles необхідно увімкнути запис та проксіювання SSL трафіку

Далі необхідно включити SSL Proxy для потрібного нам хоста, це можна зробити наступним чином:

1. На потрібному нам запиті викликати меню і натиснути “Enable SSL Proxy”
2. Через меню Proxy → SSL Proxy Settings, де вручну Вам потрібно буде ввести “Host” і “Port”

Тепер Ви зможете бачити трафік з пристрою на Вашому ПК! 🎉

Корисні поради

Часті проблеми та рішення

Не відображається HTTPS трафік?

• Перевірте встановлення сертифікатів на всіх пристроях

• Увімкніть SSL Proxy для потрібних хостів

Трафік не перехоплюється?

• Переконайтесь, що ПК і пристрій в одній мережі

• Перевірте налаштування firewall/антивірусу

Повільна робота додатків?

• Використовуйте фільтри для показу тільки потрібного трафіку

• Вимкніть запис, коли аналіз не потрібен

Безпека

Кроки для очищення:

1. Видаліть налаштування проксі в налаштуваннях Wi-Fi
2. Видаліть встановлені сертифікати Charles
3. Перезавантажте пристрій