Isolasi lintas origin memungkinkan halaman web menggunakan fitur canggih seperti SharedArrayBuffer. Artikel ini menjelaskan cara mengaktifkan isolasi lintas asal di situs Anda.
Panduan ini menunjukkan cara mengaktifkan isolasi lintas asal. Isolasi lintas origin
diperlukan jika Anda ingin menggunakan
SharedArrayBuffer
,
performance.measureUserAgentSpecificMemory()
atau timer resolusi tinggi dengan presisi
yang lebih baik.
Jika Anda ingin mengaktifkan isolasi lintas asal, evaluasi dampaknya terhadap resource lintas origin lainnya di situs Anda, seperti penempatan iklan.
SharedArrayBuffer
digunakan di situs AndaSharedArrayBuffer
tidak akan lagi
berfungsi tanpa isolasi lintas origin. Jika Anda membuka halaman ini karena adanya pesan penghentian penggunaan SharedArrayBuffer
, kemungkinan situs Anda atau salah satu resource yang disematkan dinya menggunakan SharedArrayBuffer
. Untuk memastikan tidak ada yang rusak di situs Anda karena tidak digunakan lagi, mulailah dengan mengidentifikasi tempat penggunaannya.Jika tidak yakin di bagian situs Anda mana SharedArrayBuffer
digunakan, ada
dua cara untuk mengetahuinya:
- Menggunakan Chrome DevTools
- (Lanjutan) Menggunakan Pelaporan Penghentian
Jika Anda sudah mengetahui tempat Anda menggunakan SharedArrayBuffer
, lanjutkan ke
Menganalisis dampak isolasi lintas asal.
Menggunakan Chrome DevTools
Chrome DevTools memungkinkan developer memeriksa situs.
- Buka Chrome
DevTools di
halaman yang Anda curigai mungkin menggunakan
SharedArrayBuffer
. - Pilih panel Konsol.
- Jika halaman menggunakan
SharedArrayBuffer
, pesan berikut akan muncul:[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
- Nama file dan nomor baris di akhir pesan (misalnya,
common-bundle.js:535
) menunjukkan asalSharedArrayBuffer
. Jika library adalah library pihak ketiga, hubungi developer untuk memperbaiki masalah. Jika diterapkan sebagai bagian dari situs Anda, ikuti panduan di bawah ini untuk mengaktifkan isolasi lintas asal.
![Peringatan Konsol DevToools saat SharedArrayBuffer digunakan tanpa isolasi lintas origin](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=6&hl=id)
(Lanjutan) Menggunakan Pelaporan Penghentian
Beberapa browser memiliki fungsi pelaporan untuk menghentikan penggunaan API ke endpoint yang ditentukan.
- Siapkan server laporan penghentian penggunaan dan dapatkan URL pelaporan. Anda dapat mencapainya dengan menggunakan layanan publik atau membuatnya sendiri.
- Dengan menggunakan URL tersebut, tetapkan header HTTP berikut ke halaman yang berpotensi menayangkan
SharedArrayBuffer
.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- Setelah header mulai diterapkan, endpoint yang Anda gunakan untuk mendaftar akan mulai mengumpulkan laporan penghentian penggunaan.
Lihat contoh implementasinya di sini: https://cross-origin-isolation.glitch.me.
Menganalisis dampak isolasi lintas asal
Bukankah lebih bagus jika Anda dapat menilai dampak pengaktifan isolasi lintas asal
pada situs Anda tanpa benar-benar merusak apa pun? Dengan header HTTP
Cross-Origin-Opener-Policy-Report-Only
dan
Cross-Origin-Embedder-Policy-Report-Only
,
Anda dapat melakukan hal tersebut.
- Tetapkan
Cross-Origin-Opener-Policy-Report-Only: same-origin
di dokumen tingkat atas. Seperti namanya, header ini hanya mengirim laporan tentang dampak yang akan dimilikiCOOP: same-origin
pada situs Anda—header ini tidak akan benar-benar menonaktifkan komunikasi dengan jendela pop-up. - Siapkan pelaporan dan konfigurasi server web untuk menerima dan menyimpan laporan.
- Tetapkan
Cross-Origin-Embedder-Policy-Report-Only: require-corp
di dokumen tingkat atas. Sekali lagi, header ini memungkinkan Anda melihat dampak pengaktifanCOEP: require-corp
tanpa benar-benar memengaruhi fungsi situs Anda. Anda dapat mengonfigurasi header ini untuk mengirim laporan ke server pelaporan yang sama dengan yang Anda siapkan di langkah sebelumnya.
Mengurangi dampak isolasi lintas asal
Setelah menentukan resource yang akan terpengaruh oleh isolasi lintas origin, berikut adalah panduan umum tentang cara Anda benar-benar mengikutsertakan resource lintas origin tersebut:
- Di resource lintas origin seperti gambar, skrip, stylesheet, iframe, dan
lainnya, tetapkan header
Cross-Origin-Resource-Policy: cross-origin
. Di resource situs yang sama, tetapkan headerCross-Origin-Resource-Policy: same-site
. - Agar resource dapat dimuat menggunakan CORS, pastikan resource tersebut diaktifkan, dengan menetapkan atribut
crossorigin
di tag HTML-nya (misalnya,<img src="example.jpg" crossorigin>
). Untuk permintaan pengambilan JavaScript, pastikanrequest.mode
ditetapkan kecors
. - Jika Anda ingin menggunakan fitur canggih seperti
SharedArrayBuffer
di dalam iframe yang dimuat, tambahkanallow="cross-origin-isolated"
ke<iframe>
. - Jika resource lintas origin yang dimuat ke iframe atau skrip pekerja melibatkan lapisan iframe atau skrip pekerja lain, terapkan langkah-langkah yang dijelaskan di bagian ini secara berulang sebelum melanjutkan.
- Setelah Anda mengonfirmasi bahwa semua resource lintas origin diikutsertakan, tetapkan header
Cross-Origin-Embedder-Policy: require-corp
di iframe dan skrip pekerja (Hal ini diperlukan terlepas dari origin yang sama atau lintas origin). - Pastikan tidak ada jendela pop-up lintas origin yang memerlukan komunikasi
melalui
postMessage()
. Tidak ada cara untuk membuatnya tetap berfungsi saat isolasi lintas-asal diaktifkan. Anda dapat memindahkan komunikasi ke dokumen lain yang tidak diisolasi lintas origin, atau menggunakan metode komunikasi yang berbeda (misalnya, permintaan HTTP).
Mengaktifkan isolasi lintas asal
Setelah Anda mengurangi dampak oleh isolasi lintas origin, berikut panduan umum untuk mengaktifkan isolasi lintas origin:
- Tetapkan header
Cross-Origin-Opener-Policy: same-origin
di dokumen level atas. Jika Anda telah menyetelCross-Origin-Opener-Policy-Report-Only: same-origin
, gantilah. Hal ini memblokir komunikasi antara dokumen tingkat atas dan jendela {i>pop-up<i}-nya. - Tetapkan header
Cross-Origin-Embedder-Policy: require-corp
di dokumen level atas. Jika Anda telah menyetelCross-Origin-Embedder-Policy-Report-Only: require-corp
, gantilah. Tindakan ini akan memblokir pemuatan resource lintas origin yang tidak diikutsertakan. - Periksa apakah
self.crossOriginIsolated
menampilkantrue
di konsol untuk memverifikasi bahwa halaman Anda diisolasi lintas origin.