Kembali lagi dengan drama di balik layar saat development NetMeter Web. Setelah kemarin kita berhasil menaklukkan Twitch dengan jurus Patch-di-Dalam-Patch pada Web Worker dan WASM-nya, kali ini giliran kita bergelut dengan sang raja video pendek: TikTok.
TikTok menyimpan misteri yang jauh lebih unik. Meskipun saya GAGAL mem-patch worker mereka seperti di Twitch, justru error yang muncul saat kita mencoba menginjeksi script ke dalam worker TikTok malah jadi kunci keberhasilan melacak bandwidth live streaming mereka.
Kenapa? Karena TikTok punya pagar keamanan yang cukup ketat, yakni Content Security Policy (CSP) yang secara eksplisit melarang Worker berbasis blob dari pihak ketiga melakukan patching.
Artinya, bahkan kalau mau jujur, browser tidak mengizinkan kita melakukan patching ke worker tersebut dan kalau kita mencoba memaksa, itu bukan hanya mustahil, tapi juga berisiko melanggar aturan keamanan browser.
NetMeter versus XGPlayer
Sebenarnya tugas NetMeter Web ini simple, yakni menghitung setiap byte yang masuk di client. Namun, saat menguji live stream TikTok, hasil yang saya dapatkan bikin kepala cenat-cenut lagi! 😂
Stream berjalan lancar, tapi NetMeter melaporkan nol bytes, atau bytes yang dihitung oleh Devtools network inspect element berbeda dengan yang saya harapkan.
TikTok, dengan player -nya (kemungkinan xgplayer yang telah dimodifikasi), menggunakan HTTP-FLV untuk live stream agar bisa berlatensi rendah. Karena browser umum tidak mendukung FLV, maka datanya di-fetch lewat JavaScript lalu diubah (transmuxing) menjadi format yang bisa dimainkan oleh player browser.
TikTok Live: Dual Mode Player yang Diam-Diam Canggih
Saat saya mulai tracing trafik TikTok Live, saya menemukan pola yang cukup unik:
- Kadang player TikTok memakai sebuah VEWorker (video engine worker).
- Terkadang worker ini tiba-tiba hilang dan player otomatis jalan di main-thread tanpa worker sama sekali.
Awalnya saya pikir ini semacam AB testing.
Ternyata, setelah membaca dua file raksasa (veworker-xxxxx.js dan ttplayer-plugin-xxxxx.js), TikTok Live memang punya dua engine:
1. Mode VEWorker (normal)
Semua pekerjaan berat dilakukan di Web Worker:
- fetch FLV segment
- demux (FLV -> video/audio)
- remux (jadi MP4/fMP4)
- decoding via WebCodecs
- sinkronisasi audio/video
- audio worklet
- tapping FPS, TTFB, bandwidth adaptasi
List diatas saya dapatkan setelah dibantu oleh ChatGPT dan Claude untuk melakukan analisa veworker.js, karna tidak mungkin juga saya membaca minified + obfuscated versi JS yang sangat panjang. 😂
2. Mode Fallback (tanpa worker)
Jika VEWorker error, gagal load, atau dianggap “terganggu” oleh patch ekstensi dan pihak third-party lain. TikTok akan melakukan mekanisme fail-safe dan langsung jatuh ke mode FLV main-thread, yaitu:
- fetch di main-world (window.fetch)
- demux di main-thread
- remux di main-thread
- MSE append juga di main-thread
Dan ya… patch NetMeter Web secara tidak sengaja akan memicu mode fallback ini. Hal ini adalah tanda darurat, dimana jika saya pertahankan patch ini, akan berbahaya untuk kelangsungan ekstensi NetMeter Web secara regulasi dan policy di Chrome WebStore.
Saat Worker Di-patch, TikTok Langsung Fallback 😆
Ketika saya mencoba teknik yang sukses di Twitch yakni meng-inject script via patch window.Worker(), TikTok langsung mendeteksi perubahan dan membatalkan seluruh mekanisme worker internalnya.
TikTok seolah berkata:
“Ada yang aneh di Worker. Ayo! Kita balik ke mode aman!”
Dan fallback inilah yang akhirnya membuat semua fetch FLV muncul di main-thread. Dari sisi NetMeter Web, ini seperti shortcut yang tidak disengaja, tapi justru mempermudah kita membaca byteLength setiap segment.
Justru inilah titik lucunya. Begitu worker mati, TikTok terpaksa memakai pipeline klasik yang lebih “ramah” bagi extension seperti NetMeter Web, dimana:
ttplayer-plugin-xxxxx.jsmelakukan fetch(). (dan patch NetMeter bisa membaca ini)
Jadi tanpa sengaja, NetMeter mendapat jalan pintas.
TikTok Worker! Kamu Takkan Kukejar Lagi.
Awalnya saya ingin tetap mem-patch VEWorker agar analisis dan penghitungan bandwidth untuk TikTok bisa lebih sempurna. Tapi setelah mempelajari struktur internal VEWorker dan plugin TikTok Live, saya menyadari satu hal penting:
Mem-patch VEWorker secara stabil dan aman adalah hal yang berbahaya sekaligus mustahil.
Alasannya adalah ketika kita mem-patch Worker, TikTok menerapkan CSP yang ketat dimana karna adanya ini di response body mereka:
worker-src 'self'
script-src 'self'
child-src 'self'Dengan error itu, maka kita tidak boleh sembarangan melanggarnya, karena balik lagi, akan mengorbankan kredibilitas NetMeter Web.
Kita tidak mau memaksakan patch yang “melawan” policy browser, mem-bypass CSP, atau menyelundup lewat celah-celah abu-abu yang tidak seharusnya digunakan.
Sama halnya seperti mencoba masuk rumah tetangga lewat jendela, padahal pintu depan sudah dikunci. Bahkan sudah ada satpam di gerbangnya.
Memang bisa kalau nekat, tapi sekali ketahuan, reputasi kita akan langsung hancur, wkwkwk. 😂
Tapi tenang! Untuk konten non-streaming, seperti video FYP di beranda atau video on-demand, NetMeter Web tetap bisa melakukan monitoring dengan akurat tanpa masalah.
Thanks TikTok!
Tinggalkan Balasan