Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Panduan untuk mengaktifkan isolasi lintas asal

Isolasi lintas asal memungkinkan halaman web menggunakan fitur canggih seperti SharedArrayBuffer. Artikel ini menjelaskan cara mengaktifkan isolasi lintas asal di situs Anda.

Eiji Kitamura

Panduan ini menunjukkan cara mengaktifkan isolasi lintas asal. Isolasi lintas asal 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 asal lainnya di situs Anda, seperti penempatan iklan.

Menentukan tempat penggunaan `SharedArrayBuffer` di situs Anda

Mulai Chrome 92, fungsi yang menggunakan SharedArrayBuffer tidak akan berfungsi lagi tanpa isolasi lintas asal. Jika Anda membuka halaman ini karena pesan penghentian SharedArrayBuffer, kemungkinan situs Anda atau salah satu resource yang disematkan di dalamnya menggunakan SharedArrayBuffer. Untuk memastikan tidak ada yang rusak di situs Anda karena penghentian, mulailah dengan mengidentifikasi tempat penggunaannya.

Jika Anda tidak yakin di mana SharedArrayBuffer digunakan di situs Anda, ada dua cara untuk mengetahuinya:

Menggunakan Chrome DevTools
(Lanjutan) Menggunakan Pelaporan Penghentian

Jika Anda sudah tahu tempat penggunaan 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  for more details. common-bundle.js:535

Nama file dan nomor baris di akhir pesan (misalnya, common-bundle.js:535) menunjukkan asal SharedArrayBuffer. Jika ini adalah library pihak ketiga, hubungi developer untuk memperbaiki masalah ini. Jika diimplementasikan sebagai bagian dari situs Anda, ikuti panduan di bawah untuk mengaktifkan isolasi lintas asal.

Peringatan Konsol DevTools saat SharedArrayBuffer digunakan tanpa isolasi lintas asal.

(Lanjutan) Menggunakan Pelaporan Penghentian

Beberapa browser memiliki fungsi pelaporan penghentian API ke endpoint tertentu.

Siapkan server laporan penghentian dan dapatkan URL pelaporan. Anda dapat melakukannya dengan menggunakan layanan publik atau membuat layanan sendiri.
Dengan menggunakan URL, 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 disebarkan, endpoint yang Anda daftarkan akan mulai mengumpulkan laporan penghentian.

Lihat contoh penerapan.

Menganalisis dampak isolasi lintas asal

Bukankah akan lebih baik jika Anda dapat menilai dampak pengaktifan isolasi lintas asal terhadap situs Anda tanpa benar-benar merusak apa pun? Header HTTP Cross-Origin-Opener-Policy-Report-Only dan Cross-Origin-Embedder-Policy-Report-Only memungkinkan Anda melakukan hal tersebut.

Tetapkan Cross-Origin-Opener-Policy-Report-Only: same-origin pada dokumen tingkat atas Anda. Seperti namanya, header ini hanya mengirimkan laporan tentang dampak yang akan ditimbulkan oleh COOP: 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 pada dokumen tingkat atas Anda. Sekali lagi, header ini memungkinkan Anda melihat dampak pengaktifan COEP: require-corp tanpa benar-benar memengaruhi fungsi situs Anda. Anda dapat mengonfigurasi header ini untuk mengirim laporan ke server pelaporan yang sama yang Anda siapkan pada langkah sebelumnya.

Perhatian: Mengaktifkan isolasi lintas origin akan memblokir pemuatan resource lintas origin yang tidak Anda pilih secara eksplisit, dan akan mencegah dokumen tingkat atas Anda berkomunikasi dengan jendela pop-up. Kami telah mempelajari cara men-deploy Cross-Origin-Resource-Policy dalam skala besar, karena isolasi lintas asal mengharuskan semua subresource memilih secara eksplisit.
Dan kami telah menemukan ide untuk bergerak ke arah yang berlawanan: mode COEP "tanpa kredensial" baru yang memungkinkan pemuatan resource tanpa header CORP dengan menghapus semua kredensialnya. Kami harap hal ini akan meringankan beban Anda dalam memastikan subresource mengirimkan header Cross-Origin-Resource-Policy.
Meskipun mode credentialless tersedia di Chrome mulai versi 96, mode ini belum didukung oleh browser lain, sehingga beberapa developer mungkin merasa kesulitan untuk men-deploy COOP atau COEP pada tahap ini.
Selain itu, diketahui bahwa header Cross-Origin-Opener-Policy: same-origin akan merusak integrasi yang memerlukan interaksi jendela lintas asal seperti OAuth dan pembayaran. Untuk mengurangi masalah ini, kami mempelajari cara melonggarkan kondisi untuk mengaktifkan isolasi lintas asal ke Cross-Origin-Opener-Policy: same-origin-allow-popups.
Dengan cara ini, komunikasi dengan jendela yang dibuka sendiri akan dimungkinkan. Jika Anda ingin mengaktifkan isolasi lintas asal, tetapi diblokir oleh tantangan ini, sebaiknya daftar ke uji coba origin dan tunggu hingga mode baru tersedia. Kami tidak berencana menghentikan uji coba origin hingga mode baru ini tersedia.

Mengurangi dampak isolasi lintas asal

Setelah Anda menentukan resource mana yang akan terpengaruh oleh isolasi lintas origin, berikut adalah panduan umum tentang cara memilih ikut serta resource lintas origin tersebut:

Pada resource lintas origin seperti gambar, skrip, stylesheet, iframe, dan lainnya, tetapkan Cross-Origin-Resource-Policy:cross-origin header. Pada resource situs yang sama, tetapkan Cross-Origin-Resource-Policy:same-site header.
Untuk resource yang 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, pastikan request.mode ditetapkan ke cors.
Jika Anda ingin menggunakan fitur canggih seperti SharedArrayBuffer di dalam iframe yang dimuat, tambahkan allow="cross-origin-isolated" ke <iframe>.
Jika resource lintas origin yang dimuat ke dalam iframe atau skrip pekerja melibatkan lapisan iframe atau skrip pekerja lain, terapkan langkah-langkah yang dijelaskan di bagian ini secara rekursif sebelum melanjutkan.
Setelah Anda mengonfirmasi bahwa semua resource lintas origin telah ikut serta, tetapkan header Cross-Origin-Embedder-Policy: require-corp pada iframe dan skrip worker (Hal ini diperlukan terlepas dari origin yang sama atau lintas origin).
Pastikan tidak ada jendela pop-up lintas asal 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 lain (misalnya, permintaan HTTP).

Mengaktifkan isolasi lintas asal

Setelah Anda mengurangi dampak isolasi lintas asal, berikut adalah panduan umum untuk mengaktifkan isolasi lintas asal:

Tetapkan header Cross-Origin-Opener-Policy: same-origin pada dokumen tingkat atas Anda. Jika Anda telah menetapkan Cross-Origin-Opener-Policy-Report-Only: same-origin, ganti. Tindakan ini akan memblokir komunikasi antara dokumen tingkat atas Anda dan jendela pop-up-nya.
Tetapkan header Cross-Origin-Embedder-Policy: require-corp pada dokumen tingkat atas Anda. Jika Anda telah menetapkan Cross-Origin-Embedder-Policy-Report-Only: require-corp, ganti. Tindakan ini akan memblokir pemuatan resource lintas origin yang tidak dipilih.
Periksa apakah self.crossOriginIsolated menampilkan true di konsol untuk memverifikasi bahwa halaman Anda diisolasi lintas origin.

Mengaktifkan isolasi lintas asal di server lokal mungkin akan sulit karena server sederhana tidak mendukung pengiriman header. Anda dapat meluncurkan Chrome dengan tanda command line --enable-features=SharedArrayBuffer untuk mengaktifkan SharedArrayBuffer tanpa mengaktifkan isolasi lintas asal. Pelajari cara menjalankan Chrome dengan flag command line di platform masing-masing.