Як приручити Charles Proxy?
Вікіпедія нам повідомляє, що:
Charles являє собою кросплатформний додаток проксі-сервера для налагодження HTTP, написаний на Java. Він дає змогу користувачеві переглядати HTTP, HTTPS і активований трафік TCP-порту, доступ до якого здійснюється з локального комп'ютера, на нього або через нього. Сюди входять запити і відповіді, включно з HTTP-заголовками і метаданими (наприклад, файли cookie, кешування і кодування інформації), з функціями, призначеними для допомоги розробникам і тестувальникам в аналізі з'єднань і обміні повідомленнями.
Невелике пояснення
Сніфінг - процес моніторингу та перехоплення всіх пакетів, що проходять через мережу, за допомогою інструментів сніфінгу (Charles Proxy).
Перші кроки
1. Встановлення та запуск
Для початку необхідно завантажити та встановити застосунок.
Якщо у вас не придбано ліцензію, то буде доступна 30-денна пробна версія з обмеженнями (функціональність не блокується, але з'являтимуться вікна з таймаутом 5-10 секунд до відновлення використання, а також через 30 хвилин завершуватиметься робота застосунку).
2. Починаємо сніффіти трафік
Запустіть Charles Proxy на MAC, зайдіть у меню Help → SSL Proxying → Install Charles Root Certificate → Встановити сертифікат → Імпортуємо сертифікат.
Запустіть Charles Proxy в Windows, перейдіть в меню Довідка → SSL-проксінг → Встановити кореневий сертифікат Charles Root Certificate
У Windows, у вікні, що відкрилося, "Сертифікат" → "Встановити сертифікат". Вибрати "Поточний користувач" або "Локальний користувач". Далі ви отримаєте повідомлення від майстра імпорту сертифікатів, що сертифікат успішно імпортовано.
3. Проксування трафіку веб-браузера
Розглянемо варіант із проксуванням на прикладі браузера Mozilla Firefox. І встановлення сертифіката на прикладі двох OS: MAC і Windows.
3.1 Windows
Для цього дізнаємося IP-адресу ПК: у Charles Proxy перейдемо в Help → Local IP Address. Бачимо, що ваш IP: 10.0.2.15 (p.s. у Local IP Address може бути кілька вказано IP, наприклад, відображатимуться IP від VirtualBox, якщо після вказівки одного IP не відображатимуться запити, спробуйте вибрати інший зі списку).
Далі відкриємо Mozilla Firefox, перейдемо в Параметри мережі → Налаштувати. Виставимо все як на скріншоті нижче і натиснемо Ок.
Тепер необхідно перейти за посиланням chls.pro/ssl, а далі почнеться автоматичне завантаження сертифіката. У цей момент буде вхідне з'єднання в Charles Proxy, необхідно натиснути Allow, а також виконати імпорт сертифіката:
3.2 MAC OS
Для цього дізнаємося IP-адресу ПК: у Charles Proxy перейдемо в Help → Local IP Address. Бачимо, що ваш IP: 192.168.1.50.
Далі відкриємо Mozilla Firefox, перейдемо в Параметри мережі → Налаштувати.
Виставимо все як на скріншоті й натиснемо "Ок".
Тепер необхідно перейти за посиланням chls.pro/ssl, а далі почнеться автоматичне завантаження сертифіката.
У цей момент буде вхідне з'єднання, необхідно натиснути Allow:
Наступним кроком зверніть увагу на діалогове вікно, де необхідно вибрати Відкрити в keychain:
Важливим кроком, який ви повинні зробити далі, це в Keychain Access зробити сертифікат довіреним:
Не забудьте деактивувати Windows Proxy (якщо у вас ОС Windows) або Mac Proxy (інакше буде вам заважати).
Тепер у вас відображаються запити, однак вони зашифровані, і крім ієрогліфів нічого не видно. Щоб бачити Request/Response у нормальному вигляді, потрібно увімкнути SSL Proxying і налаштувати домени, пакети яких ми хочемо перехоплювати. А хочемо ми отримувати запити з усіх сайтів. Для цього перейдіть у розділ Proxy → SSL Proxying Settings.
У діалоговому вікні поставте галочку Enable SSL Proxying, виберіть розділ Include і натисніть Add.
Далі заповніть поле Host значенням * (як показано на скріншоті) і натисніть ОК.
У діалоговому вікні "SSL Proxying Settings" натисніть ОК.
4. Налаштування проксі на Android
Щоб відображалися запити додатка Android, у вас має стояти відповідна збірка Android-додатка, зі встановленим у маніфесті дозволом. Давайте уявимо, що такий застосунок є, і ми хочемо почати отримувати його трафік. Важливо: пристрій Android і десктоп мають бути в одній мережі.
Для цього дізнаємося IP-адресу ПК: у Charles Proxy перейдемо в Help → Local IP Address. Бачимо, що ваш IP: 192.168.1.50.
Далі візьміть до рук телефон, відкрийте Властивості мережі → Назва мережі WiFi → Проксі-сервер → Вручну → Ім'я хоста: *ваш IP* / Порт: *8888* → Збережіть змінені властивості мережі.
Тепер необхідно перейти за посиланням chls.pro/ssl або charlesproxy.com/getssl, а далі почнеться автоматичне завантаження сертифіката. Відкрийте його, задайте ім'я сертифіката, і тепер у вас є доступ до трафіку Android-додатку.
5. Налаштування проксі на iOS
Візьміть у руки iPhone, відкрийте Властивості мережі → Назва мережі WiFi → Проксі-сервер → Вручну → Ім'я хоста: *Наш IP* / Порт: *8888* → Збережіть змінені властивості мережі (важливо: пристрій iOS і десктоп мають бути в одній мережі).
Тепер необхідно перейти за посиланням chls.pro/ssl або charlesproxy.com/getssl, "Дозволити" завантаження профілю конфігурації. Далі перейдіть у Налаштування → Профіль завантажено → Встановити. Потім перейдіть у Налаштування → Основні → Про цей пристрій → Довіра до сертифікатів → знайдіть встановлений сертифікат і зробіть його "Довіреним".
Функціональність Charles Proxy
- Підміна даних:
1.1 Breakpoint
1.2 Rewrite
1.3 Map Local
2. Proxy:
2.1 Throttle Settings
2.2 Reverse Proxies
2.3 Port Forwarding
2.4 MacOS Proxy/Windows Proxy
3.Tools:
3.1 No Caching
3.2 Block Cookies
3.3 Map Remote
3.4 Block List
3.5 DNS Spoofing
3.6 Mirror
3.7 Compose
4. Recording Settings
5. Focus
6. Repeat
7. Repeat Advanced
1. Підміна даних
Уявімо, що нам треба протестувати на клієнті верстку. Потрібно перевірити, як відображатиметься велика кількість бонусів у користувача. Один із варіантів, який багато хто запропонує: змінити в БД кількість бонусів і перевірити на клієнті. Так, ви матимете рацію! Однак на сервері може бути кеш, і необхідно почекати якийсь час, поки кількість бонусів не оновиться, або просто під'єднатися до самої бази і виконати запит - це займає певний час. Є варіант простіший: змінити відповідь від сервера! У Charles Proxy є три способи підміни даних:
1.1 Breakpoint
Breakpoint - це певна точка зупинки запиту. Коли виявляється запит із заданого списку, для подальшої ручної взаємодії з параметрами запиту відкривається окреме вікно. У ньому перейдіть до ручної зміни запитів і відповідей. Зручно використовувати цю функцію, коли тестуєте API або різні відповіді сервера.
У нас є застосунок і профіль користувача, у якого зараз 45 бонусів на рахунку:
Запит, у якому приходить ця кількість бонусів: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8
Щоб "повісити" Breakpoint на запит, перейдіть у розділ Proxy → Breakpoint Settings. Далі поставте галочку "Enable Breakpoints → Add", і в діалоговому вікні "Edit Breakpoint", що відкрилося, вставте URL запиту, як показано на скріншоті:
Для прикладу поставте дві галочки "Request" і "Response". Далі натисніть OK, і ще раз OK у вікні "Breakpoint Settings". Тепер виконайте запит ще раз, тобто на клієнті заново відкриється екран із профілем користувача.
У Charles Proxy ми бачимо, що виконання запиту ставиться на паузу:
Тут можна змінити параметри запиту. Але зараз це робити не потрібно, натисніть "Execute". Слідом у нас ставиться на паузу відповідь від сервера, що вже прийшла. І тут якраз ми повинні відредагувати "Response". Знайдіть потрібний параметр — bonus_cnt»: 45.
Далі змініть значення параметра bonus_cnt, наприклад, на 1 000 000 бонусів, і натисніть "Execute".
На клієнті відобразиться нова кількість бонусів. Ми багаті!
1.2 Rewrite
Rewrite - це інструмент, що дає змогу створювати правила, які змінюють запити і відповіді, коли ті проходять через Charles Proxy. Наприклад, можна додавати і змінювати заголовок, шукати і замінювати текст у тілі відповіді або запиту, тощо.
Спробуємо за допомогою Rewrite змінити кількість бонусів нашого користувача. Для цього відкрийте Tools → Rewrite → галочка "Enable Rewrite" → Add. У полі Name можна ввести будь-яку назву підміни, наприклад, "Change bonus", або залишити за замовчуванням "Untitled Set".
Наступним кроком необхідно додати в "Location" шлях запиту. Для цього, у розділі "Location" → "Add" заповніть наступні поля та збережіть:
Host: https://api.youla.io
Path: /api/v1/user/5e6222bbbedcc5975d2375f8
Після того, як ви додали шлях запиту, необхідно змінити сам параметр і його значення. Для цього потрібно створити Rewrite Rule:
- Type: Body (тому що параметр знаходиться в тілі);
- Where: Response (тому що параметр знаходиться у відповіді від сервера);
Розділ Match: у "Value" вкажіть значення і параметр, який повертає сервер;
Розділ Replace: у "Value" вкажіть значення і параметр, який ви хочете побачити на клієнті.
Далі збережіть "Rewrite Rule" і натисніть ОК на вкладці "Rewrite Settings". На клієнті перезапитайте ще раз профіль користувача. У вас автоматично підмінилася кількість бонусів користувача. Ми знову багаті!
1.3 Map Local
Map Local - інструмент, який дає змогу використовувати локальні файли, немов вони є частиною сервера.
Перейдіть в Tools → Map Local.
Далі у віконці "Map Local Settings" натисніть Add → Хост: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8 → Local path: шлях на комп'ютері до файлу. Можете використовувати готові медіа-файли, HTML, CSS, JSON, XML. Більше підходить, звісно, розробникам, щоб не завантажувати дані на сервер для його подальшого тестування, але й тестувальник може знайти грамотне застосування. Ми заздалегідь підготували відповідь, яка нам буде потрібна, і зберегли у файл change_bonus.json:
Збережіть введені значення на вкладці "Edit Mapping" і на вкладці "Map Local Settings».
На клієнті перезапитайте ще раз профіль користувача. У вас автоматично підмінилася кількість бонусів користувача. Ми знову багаті!
Давайте розглянемо інші можливості інструменту Charles Proxy. І почнемо з самого початку, з вкладки "Proxy".
2.1 Throttle Settings
Throttle Settings - функція, що дає змогу задавати різні параметри швидкості з'єднання з обраним доменом.
Функція для тих, хто полюбляє тестувати в ліфті, в метро, в підземному переході. Перейдемо в Proxy → Throttle Settings → галочка Enable Throttling. Якщо не розбираєтеся у всіх перерахованих пунктах, то можете використовувати Throttle preset і там вибрати відповідну для тесту швидкість, а система автоматично заповнить інші поля.
Якщо вибрати "Only for selected hosts", то можна задати певний хост, до якого застосовуватимуться ваші налаштування. Тут можна використовувати готові пресети з налаштуваннями для різних типів (4G, 3G тощо). А також можна задати різні параметри, коротко перерахую деякі з них:
Bandwidth - максимальний обсяг даних, який може бути переданий з плином часу.
Utilisation - частка загальної пропускної спроможності, яка може бути надана користувачеві в будь-який момент часу.
Latency - затримка в мілісекундах за запитом firts між клієнтом і віддаленим сервером.
MTU - максимальний передавальний пристрій для поточного пресета.
Reliability - міра ймовірності, що з'єднання не вдасться. Використовується для імітації ненадійних мережевих умов.
Stability - міра ймовірності, що з'єднання буде нестабільним і, отже, знизиться якість. Корисно для моделювання мереж, у яких періодично падає якість зв'язку, наприклад, мобільних.
2.2 Reverse Proxies
Reverse proxy - зворотний проксі-сервер. Зазвичай використовується для того, щоб приймати запити з Інтернету і перенаправляти їх на один із веб-серверів.
2.3 Port Forwarding
Port Forwarding - прокидання портів, яке іноді називають переспрямуванням портів, або тунелюванням - процес пересилання трафіку, адресованого конкретному мережевому порту, з одного мережевого вузла на інший. Цей метод дає змогу зовнішньому користувачеві досягти порту всередині локальної мережі.
2.4 MacOS Proxy/Windows Proxy
MacOS Proxy або Windows Proxy (залежно від вашої ОС) - проксування трафіку з вашого веб-браузера.
Розібравшись із розділом Proxy, перейдемо до розділу Tools.
3.1 No Caching
Інструмент No Caching запобігає кешуванню, маніпулюючи заголовками HTTP, які керують кешуванням відповідей. Заголовки If-Modified-Since і If-None-Match видаляються із запитів, додаються Pragma: no-cache і Cache-control: no-cache. Заголовки Expires, Last-Modified і ETag видаляються з відповідей і додаються Expires: 0 і Cache-Control: no-cache.
3.2 Block Cookies
Block Cookies - заголовок файлу Cookie видаляється із запитів, запобігаючи надсиланню значень файлу з клієнтського додатка (наприклад, веб-браузер) на віддалений сервер. А також із відповідей видаляється заголовок Set-Cookie, запобігаючи отриманню клієнтським додатком запитів на встановлення файлів cookie з віддаленого сервера. У налаштуваннях можна ввімкнути видалення Cookie як для всіх хостів, так і для обраних. У прикладі нижче ввімкнено видалення Cookie для всіх запитів.
3.3 Map Remote
Map Remote - дає змогу переадресувати запити з одного URL "Map From" на інший "Map To". Підміняє хост, шлях цілком або тільки параметри залежно від вашого завдання. У прикладі нижче підмінено запит із prod-сервера на dev-сервер.
3.4 Block List
Block List - дає змогу блокувати певні доменні імена. Коли веб-браузер спробує запросити будь-яку сторінку із заблокованого доменного імені, вона заблокується. Можна вибрати або "Drop connection", або повернення 403 помилки.
3.5 DNS Spoofing
Віртуальний хостинг - це коли у вас є кілька сайтів на одній IP-адресі, і веб-сервер визначає, який сайт ви запитуєте, ґрунтуючись на імені, введеному в браузері. Точніше, сервер дивиться на заголовок хоста, надісланий у запиті. Наприклад, коли потрібно підмінити хости, щоб під час введення будь-якої адреси в браузері (скажімо, api.youla.ru) запити йшли за іншою адресою (припустімо, на тестовий майданчик).
DNS Spoofing - перенаправляє доменне ім'я на певну IP-адресу.
3.6 Mirror
Mirror - ця функція дає змогу автоматично зберігати всі відповіді, що повертаються в Charles Proxy. Вони розкладаються локально в такій самій ієрархії, як на сервері. Якщо раптово трапився даунтайм на бекенді, відвалилося тестове середовище тощо, у вас уже є готові моки для Map Local. Активувати функцію можна так: Tools → Mirror або Tools → Auto Save.
3.7 Compose
Compose - функція редагування запитів, які ви зловили.
Наприклад ви додаєте в обране якийсь товар, але чомусь він не додається. Ви можете відредагувати вже відправлений запит і відправити його ще раз. Для цього необхідно вибрати потрібний запит зі списку, натиснути на ньому правою кнопкою і вибрати Compose. Іконка у запиту зміниться, і тепер можна сміливо його редагувати.
Після того, як ви змінили потрібні значення в запиті, натисніть внизу "Execute", щоб відправити запит на сервер.
4. Recording Settings
Recording Settings - налаштування відображення списків дозволених і заборонених доменів.
У вкладці "Options" можна налаштувати ліміт, тобто кількість запитів, яку Charles Proxy може записати.
У вкладці "Include" можна вибрати конкретний домен для відображення пакетів.
У вкладці "Exclude" можемо вибрати ті домени, які необхідно заховати під час сніфінгу.
5. Focus
Focus - ця функція переміщує домен на перші позиції в списку.
6. Repeat
Repeat — відправляє на сервер запит, ідентичний обраному.
7. Repeat Advanced
Repeat Advanced - ідентично Repeat, тільки можна вибрати кількість надісланих запитів і затримку між ними. Ця функція стане в пригоді під час перевірки реакції сервера на флуд.
Тут Concurrency - кількість користувачів, а Iterations - кількість повторень кожного запиту. Також можна поставити галочку "Show results in new Session", у такому разі відкриється нове вікно, де будуть виконуватися запити.
Висновок
У цій статті ми постаралися описати ті функції Charles Proxy, якими користуються тестувальники мобільних додатків. На цьому все, і не забувайте прикріплювати до баг-репорту сесію зі сніфера.