Як встановити 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

На цій сторінці