Как установить Tampermonkey и скрипт для отладки WebRTC

Установка Tampermonkey в Chrome и добавление пользовательского скрипта

Вступление

Tampermonkey позволяет запускать пользовательские скрипты в браузере. В этой инструкции разберём, как с помощью расширения определить, использует ли сайт проверку WebRTC.

Установка Tampermonkey

Перейдите в магазин Chrome и установите расширение:

chromewebstore.google.comhttps://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

После установки нажмите на значок расширений справа сверху и закрепите Tampermonkey.

Расширение нужно только для запуска скрипта в браузере. Само по себе оно не устраняет утечки WebRTC.

Как добавить скрипт вручную

Для этой инструкции используйте скрипт из Gist:

Скрипт для дебага WebRTC

Откройте Gist со скриптом

Перейдите по ссылке на Gist.

Откройте файл со скриптом и полностью скопируйте его содержимое.

Создайте новый скрипт в Tampermonkey

Нажмите на иконку Tampermonkey и выберите Create a new script.

Удалите стандартный шаблон, который откроется в редакторе.

Вставьте код скрипта

Вставьте скопированный код из Gist в редактор Tampermonkey.

Сохраните изменения сочетанием Ctrl + S или кнопкой File → Save.

Проверьте, что скрипт включен

Убедитесь, что новый скрипт отображается в списке Tampermonkey и находится в статусе Enabled.

Как проверить, что скрипт работает

Убедитесь, что переключатель у скрипта включен.
Обновите нужную страницу.
Откройте DevTools через F12.
Перейдите во вкладку Console.
Удобно фильтровать вывод по меткам \[TM], \[WebRTC] и \[NET].

Какие логи должны появиться

Сразу после запуска скрипта обычно появляются служебные сообщения:

[TM] Network hooks installed
[TM] WebRTC hook installed

Если страница создает RTCPeerConnection, в консоли появятся логи по WebRTC:

[WebRTC] created
config: { iceServers: [...] }
ICE servers: [...]

Во время сбора кандидатов будут видны локальные и удаленные кандидаты:

[WebRTC] local candidate raw: candidate:...
[WebRTC] local candidate parsed: { ip: "192.168.1.10", port: "52344", type: "host" }

[WebRTC] remote candidate raw: candidate:...
[WebRTC] remote candidate parsed: { ip: "185.123.45.67", port: "3478", type: "srflx" }

Если соединение дошло до выбора маршрута, скрипт покажет итоговый путь:

[WebRTC] SELECTED PATH (connectionstatechange)
candidate-pair: { ... }
local-candidate: { ip: "10.0.0.2", port: 54012, protocol: "udp", candidateType: "host" }
remote-candidate: { ip: "185.123.45.67", port: 3478, protocol: "udp", candidateType: "srflx" }
[WebRTC] REAL REMOTE ENDPOINT: { ip: "185.123.45.67", port: 3478, protocol: "udp", candidateType: "srflx" }

Если сайт отправляет WebRTC-данные через fetch, xhr, WebSocket или sendBeacon, скрипт тоже это покажет:

[NET][fetch] https://site.example/api
[NET] SDP detected
v=0
o=- 46117317 2 IN IP4 127.0.0.1
...

[NET][ws] wss://site.example/socket
[NET] ICE detected
{"candidate":"candidate:...","sdpMid":"0","sdpMLineIndex":0}

На что смотреть в первую очередь

\[TM] WebRTC hook installed - скрипт успешно загрузился.
\[WebRTC] created - страница реально создала WebRTC-соединение.
\[WebRTC] local candidate parsed - виден локальный кандидат.
\[WebRTC] remote candidate parsed - виден удаленный кандидат.
\[WebRTC] REAL REMOTE ENDPOINT - самый полезный лог. Он показывает конечную удаленную точку, которую выбрал WebRTC.

Если логов мало

Этот скрипт добавляет две ручные команды в консоль:

__dumpAllWebRTCSelectedPaths()
__dumpAllWebRTCStats()

Первая команда повторно выводит выбранные пути.

Вторая показывает полный снимок candidate-pair, local-candidate, remote-candidate и transport.

Полезно проверить после установки

После запуска скрипта можно проверить поведение WebRTC через сервисы из статьи Через что можно проверить утечку WebRTC.

Если хотите понять сам механизм утечки, смотрите статью Как работает утечка через WebRTC.

Как установить Tampermonkey и скрипт для отладки WebRTC

На этой странице