Chat Antar Tab: Belajar BroadcastChannel, postMessage, dan event.origin

Cara bermain Chat Antar Tab

1. Baca instruksi level. Arena menampilkan tab dan iframe berdampingan, lengkap dengan origin masing-masing. Tab bertanda kodemu adalah tempat kodemu dijalankan.
2. Tulis kodenya di editor. tampil(...) menulis gelembung chat ke layar tab yang menjalankan kode itu.
3. Gelembung oranye di kanan ditulis langsung oleh kode tab itu. Gelembung di kiri adalah reaksi atas pesan yang masuk, dengan nama pengirimnya. Gelembung abu putus-putus berarti pesannya sampai tapi tidak ada yang bereaksi, dan gelembung merah berarti browser membuangnya.
4. Di bawahnya, Jalan cerita memutar kejadian level satu per satu sekali setiap kodemu berubah, dengan garis kiriman dari pengirim ke penerima.
5. Tekan Cek jawaban atau Ctrl + Enter. Yang dicek adalah pesan yang terkirim, sampai, atau dibuang, isi layar tiap tab, dan kanal yang masih terbuka di akhir, dibandingkan dengan jawaban acuan.
6. Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
7. Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.

Yang kamu pelajari

1. Level 1

   BroadcastChannel dan onmessage

   new BroadcastChannel(nama) membuka kanal. Semua tab di origin yang sama yang membuka kanal bernama sama menerima pesannya lewat onmessage, dengan isi di event.data.

2. Level 2

   postMessage ke banyak tab

   kanal.postMessage(data) sekali saja sampai ke semua kanal lain bernama sama, berapa pun jumlah tabnya.

3. Level 3

   addEventListener("message")

   onmessage hanya menyimpan satu fungsi. addEventListener menambah pendengar tanpa membuang yang sudah ada.

4. Level 4

   Pengirim tidak menerima pesannya sendiri

   Kanal mengantar ke semua objek bernama sama kecuali objek yang memanggil postMessage, jadi tab pengirim harus menampilkan pesannya sendiri.

5. Level 5

   close()

   Memutus kanal. Pesan yang dikirim sesudahnya, termasuk yang sudah mengantre, tidak diantar lagi ke kanal itu.

6. Level 6

   Structured clone

   Data dikirim sebagai salinan. Objek, array, Date, dan Map bisa disalin, fungsi tidak dan memicu DataCloneError.

7. Level 7

   Disalin saat dikirim

   Perubahan objek setelah postMessage dipanggil tidak ikut terkirim, karena penerima memegang salinannya sendiri.

8. Level 8

   window.postMessage dan targetOrigin

   iframe.contentWindow.postMessage(data, targetOrigin) mengirim ke jendela lain, termasuk beda origin. Kalau origin tujuannya tidak cocok, browser membuang pesannya tanpa error.

9. Level 9

   Bahaya targetOrigin *

   "*" mengirim ke halaman apa pun yang sedang ada di jendela itu, termasuk iframe yang sudah dialihkan ke situs lain.

10. Level 10

    Validasi event.origin

    Penerima harus membandingkan event.origin dengan origin yang dipercaya, karena siapa pun bisa mengirim pesan ke jendelamu.

11. Level 11

    Membalas lewat event.source

    event.source adalah jendela pengirim. Balas dengan event.source.postMessage(data, event.origin).

12. Level 12

    Event storage

    Cara lama sinkron antar tab: mengubah localStorage memicu event storage di tab lain ber-origin sama, tidak di tab yang mengubahnya.

targetOrigin melindungi pengirim, event.origin melindungi penerima

Ada dua pemeriksaan origin di window.postMessage, dan keduanya menjaga sisi yang berbeda. targetOrigin ditulis pengirim: "pesan ini hanya untuk halaman dari https://bayar.id". Browser memeriksa origin halaman yang sedang ada di jendela tujuan saat pesan diantar, dan membuangnya kalau tidak cocok. Ini menjaga data rahasia tidak bocor ke iframe yang sudah dialihkan, seperti di level 9.

Sebaliknya, siapa pun boleh mengirim pesan ke jendelamu dengan targetOrigin "*". Penerima tidak bisa mencegah pesannya datang, jadi penerima harus memeriksa event.origin sebelum mempercayai isinya, seperti di level 10. Isi pesan bisa dipalsukan, tapi event.origin diisi browser. BroadcastChannel tidak butuh keduanya karena hanya menghubungkan tab ber-origin sama.

Tanya jawab