Chrome menonaktifkan modifikasi document.domain

Jika situs Anda bergantung pada setelan document.domain, tindakan Anda diperlukan.

Maud Nalpas
Maud Nalpas
Twitter GitHub
Eiji Kitamura
Eiji Kitamura
Twitter GitHub Glitch Mastodon

Apa yang berubah, dan mengapa?

Mulai Chrome 115, situs tidak dapat menetapkan document.domain: Chrome akan membuat document.domain tidak dapat diubah. Untuk berkomunikasi lintas origin, Anda perlu menggunakan pendekatan alternatif, seperti postMessage() atau Channel Messaging API.

Perhatikan bahwa perubahan ini akan diluncurkan secara bertahap.

Kami memperkirakan browser lain pada akhirnya akan menghentikan dan menghapus fungsi ini. Tinjau bagian kompatibilitas browser untuk mengetahui detailnya.

Mengapa membuat document.domain tidak dapat diubah?

document.domain dirancang untuk mendapatkan atau menyetel nama host asal. Banyak situs menetapkan document.domain untuk memungkinkan komunikasi antara halaman situs yang sama tetapi lintas origin.

Meskipun mudah, teknik ini menimbulkan risiko keamanan karena melonggarkan kebijakan asal yang sama. Masalah keamanan seputar document.domain telah menyebabkan perubahan spesifikasi yang memperingatkan pengguna untuk menghindari penggunaannya.

Secara mendetail: Mengapa document.domain tidak dapat diubah?

Penggunaan document.domain saat ini

Banyak situs menetapkan document.domain untuk memungkinkan komunikasi antara halaman situs yang sama tetapi lintas origin.

Situs yang sama tetapi lintas origin memiliki eTLD+1 yang sama tetapi berbeda subdomain.

Berikut penggunaan document.domain hingga saat ini:

Misalnya, halaman di https://parent.example.com menyematkan halaman iframe dari https://video.example.com. Halaman ini memiliki eTLD+1 (example.com) yang sama dengan subdomain yang berbeda. Jika document.domain kedua halaman disetel ke 'example.com', browser akan memperlakukan kedua origin tersebut seolah-olah berasal yang sama.

Tetapkan document.domain untuk https://parent.example.com:

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Tetapkan document.domain untuk https://video.example.com:

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Anda kini dapat membuat manipulasi DOM lintas origin pada https://parent.example.com terhadap https://video.example.com.

Situs menetapkan document.domain untuk memudahkan dokumen di situs yang sama berkomunikasi. Karena perubahan ini melonggarkan kebijakan origin yang sama, halaman induk dapat mengakses dokumen iframe dan melewati hierarki DOM, dan sebaliknya.

Ini adalah teknik yang praktis, tetapi dapat menimbulkan risiko keamanan.

Masalah keamanan pada document.domain

Masalah keamanan seputar document.domain telah menyebabkan perubahan pada spesifikasi yang memperingatkan pengguna untuk menghindari penggunaannya.

Misalnya, saat dua halaman menetapkan document.domain, halaman tersebut dapat berpura-pura seolah-olah memiliki asal yang sama. Hal ini sangat penting terutama saat halaman ini menggunakan layanan hosting bersama dengan subdomain yang berbeda. Menyetel document.domain akan membuka akses ke semua situs lain yang dihosting oleh layanan yang sama, yang memudahkan penyerang mengakses situs Anda. Hal ini memungkinkan karena document.domain mengabaikan bagian nomor port domain.

Untuk mempelajari implikasi keamanan jika document.domain ditetapkan lebih lanjut, baca halaman"Document.domain" di MDN.

Kompatibilitas browser

Bagaimana cara mengetahui apakah situs saya terpengaruh?

Jika situs Anda terpengaruh oleh perubahan ini, Chrome akan memperingatkan Anda di panel Masalah DevTools — peringatan ini telah ditambahkan pada 2022. Perhatikan bendera kuning di kanan atas DevTools.

Screenshot peringatan masalah di DevTools

Anda juga dapat menjalankan situs melalui audit API LightHouse yang tidak digunakan lagi untuk menemukan semua API yang dijadwalkan untuk dihapus dari Chrome.

Jika Anda telah menyiapkan Reporting API, Chrome telah mengirimkan laporan penghentian penggunaan untuk memberi tahu Anda tentang penghentian mendatang ini. Pelajari lebih lanjut cara menggunakan Reporting API dengan layanan pengumpulan laporan yang sudah ada atau dengan membuat solusi internal Anda sendiri.

Bagaimana cara melihat penerapan perubahan ini?

Perubahan ini akan diluncurkan secara bertahap, mulai Chrome 115. Untuk melihat penerapan perubahan ini meskipun belum diluncurkan di browser Chrome, Anda dapat mengaktifkannya seperti berikut:

  1. Buka chrome://flags/#origin-agent-cluster-default
  2. Pilih Aktifkan.
  3. Mulai ulang Chrome.

Alternatif apa yang dapat saya gunakan?

Opsi terbaiknya adalah tidak mengubah document.domain sama sekali, misalnya dengan menghosting halaman dan semua frame konstituen pada origin yang sama. Cara ini berfungsi di semua versi browser. Namun, tindakan ini mungkin memerlukan pengerjaan ulang aplikasi yang substansial, jadi ada baiknya juga untuk melihat alternatif yang terus mendukung akses lintas origin.

Gunakan postMessage() atau Channel Messaging API, bukan document.domain

Pada sebagian besar kasus penggunaan, postMessage() lintas origin atau Channel Messaging API dapat menggantikan document.domain.

Dalam contoh berikut:

  1. https://parent.example.com meminta https://video.example.com di dalam iframe untuk memanipulasi DOM dengan mengirim pesan melalui postMessage().
  2. https://video.example.com memanipulasi DOM segera setelah menerima pesan dan memberitahukan keberhasilan kembali ke induk.
  3. https://parent.example.com mengonfirmasi keberhasilannya.

Di https://parent.example.com:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

Di https://video.example.com:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

Cobalah dan lihat cara kerjanya. Jika Anda memiliki persyaratan khusus yang tidak berfungsi dengan postMessage() atau Channel Messaging API, beri tahu kami di Twitter melalui @ChromiumDev atau tanyakan di Stack Overflow dengan tag document.domain.

Sebagai upaya terakhir, kirim header Origin-Agent-Cluster: ?0

Jika memiliki alasan kuat untuk terus menetapkan document.domain, Anda dapat mengirim header respons Origin-Agent-Cluster: ?0 beserta dokumen target.

Origin-Agent-Cluster: ?0

Header Origin-Agent-Cluster menginstruksikan browser apakah dokumen harus ditangani oleh cluster agen dengan kunci origin atau tidak. Untuk mempelajari Origin-Agent-Cluster lebih lanjut, baca Meminta isolasi performa dengan header Origin-Agent-Cluster.

Saat header ini dikirim, dokumen Anda dapat terus menetapkan document.domain meskipun tidak dapat diubah secara default.

Semua dokumen lain yang memerlukan perilaku tersebut juga perlu mengirim Origin-Agent-Cluster (perhatikan bahwa document.domain tidak akan berpengaruh jika hanya satu dokumen yang menetapkannya).

Konfigurasi OriginAgentClusterDefaultEnabled untuk kebijakan perusahaan

Secara opsional, admin Anda dapat mengonfigurasi kebijakan OriginAgentClusterDefaultEnabled ke false agar document.domain dapat disetel secara default pada instance Chrome di seluruh organisasi Anda. Untuk mempelajari lebih lanjut, baca Daftar & Pengelolaan Kebijakan Chrome Enterprise | Dokumentasi.

Referensi

Ucapan terima kasih

Foto oleh Finan Akbar di Unsplash