PrepBro
← Назад к вопросам

Виден ли в Charles трафик веб-сокета

1.0 Junior🔥 241 комментариев
#Инструменты тестирования

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI5 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Видимость трафика WebSocket в Charles Proxy

Да, трафик WebSocket (WS и WSS) полностью виден в Charles Proxy при корректной настройке. Однако его отображение и анализ отличаются от классического HTTP/HTTPS трафика, что часто вызывает вопросы.

Как Charles перехватывает и отображает трафик WebSocket

Charles действует как прокси-сервер (man-in-the-middle), поэтому он может перехватывать и расшифровывать весь трафик, проходящий через него, включая WebSocket-соединения. Процесс выглядит так:

  1. Установление соединения (Handshake): Изначально WebSocket-соединение начинается с HTTP-запроса (Upgrade request). Этот запрос Charles отображает как обычный HTTP-запрос в своей структуре. 
    GET /ws/chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

    Ответ сервера на апгрейд также виден как HTTP-ответ.
  1. Передача данных (Data Frames): После успешного handshake соединение переходит в режим обмена бинарными или текстовыми фреймами по протоколу WebSocket. Именно эти фреймы Charles перехватывает и отображает в специальном формате.

Где и как смотреть WebSocket-трафик в интерфейсе Charles

В отличие от HTTP, сообщения WebSocket отображаются не в общем списке запросов, а внутри конкретного WebSocket-соединения.

  • Найдите соединение: В списке сессий (Structure или Sequence view) найдите начальный HTTP-запрос с методом GET и заголовками Upgrade: websocket. Обычно он имеет иконку в виде глобуса со стрелками.
  • Откройте вкладку "WebSocket": Дважды кликните на этот запрос. В открывшемся окне деталей, рядом с вкладками "Request", "Response" и "Summary", появится вкладка "WebSocket". Перейдите на неё.
  • Анализируйте сообщения: Здесь вы увидите хронологический список всех отправленных и полученных фреймов в рамках этого соединения. Интерфейс разделён на две колонки:
    *   **Outgoing (Исходящие)**: Сообщения, отправленные клиентом (браузером).
    *   **Incoming (Входящие)**: Сообщения, полученные от сервера.

Каждое сообщение можно раскрыть и просмотреть его содержимое. Charles автоматически декодирует фреймы и отображает текст в читаемом виде, а бинарные данные — в hex-представлении.

Критически важные настройки для работы с WebSocket

  1. SSL Proxying (для WSS):
    *   Для расшифровки защищённого трафика **WSS** необходимо:
        *   Установить корневой сертификат Charles в систему/браузер/устройство.
        *   Настроить **SSL Proxying Settings** для домена, на который идёт соединение (правая кнопка мыши на домене -> *Enable SSL Proxying*).
    *   Без этого вы увидите лишь начальный handshake, а данные фреймов будут зашифрованы и нечитаемы.
  1. Включение перехвата WebSocket (в современных версиях Charles включено по умолчанию):
    *   Убедитесь, что в меню *Proxy -> Proxy Settings* на вкладке **WebSocket** стоит галочка **Enable WebSocket proxying**.

Практическое применение для QA-инженера

  • Отладка логики реального времени: Просмотр последовательности сообщений (например, в чате, биржевых тикерах, уведомлениях) для проверки корректности работы.
  • Валидация данных: Проверка формата (JSON, XML, plain text) и содержимого каждого сообщения.
  • Тестирование устойчивости соединения: Можно симулировать проблемы, используя инструменты Charles:
    *   **Breakpoints (Точки останова)**: Чтобы останавливать и модифицировать WebSocket-сообщения на лету (работает на вкладке WebSocket).
    *   **Throttling (Ограничение скорости)**: Для проверки поведения приложения при плохом соединении.
    *   **Map Local/Remote**: Подмена ответа на handshake-запрос или даже потока данных (более сложная настройка).
  • Поиск причин ошибок: Анализ последнего сообщения перед разрывом соединения (close frame).

Пример просмотра сообщения в Charles

В интерфейсе на вкладке WebSocket вы увидите список такого вида:

11:23:01.123 Outgoing: {"type":"join","room":"qa"}
11:23:01.456 Incoming: {"type":"notification","text":"User joined"}

Раскрыв любое из них, вы детально изучите содержимое.

Ограничения

  • Charles отображает фреймы последовательно. Очень высокая частота сообщений (десятки в секунду) может быть сложна для визуального анализа.
  • Для глубокого анализа бинарных протоколов (например, WebSocket с ProtoBuf) может потребоваться дополнительная декодировка, хотя сырые данные будут видны.

Вывод: Charles является мощным инструментом для анализа WebSocket-трафика. Его ключевое преимущество для QA — возможность не только пассивно просматривать, но и активно вмешиваться в передаваемые данные с помощью брейкпоинтов и других функций, что делает его незаменимым при тестировании веб-приложений в реальном времени. Правильная настройка SSL Proxying и активация опции перехвата WebSocket — обязательные условия для успешной работы.

Виден ли в Charles трафик веб-сокета | PrepBro