Halaman ini diterjemahkan oleh Cloud Translation API.

Panduan untuk mengaktifkan isolasi lintas asal

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

Eiji Kitamura

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 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 penggunaan 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 penggunaan, mulailah dengan mengidentifikasi tempatnya digunakan.

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

Menggunakan Chrome DevTools
(Lanjutan) Menggunakan Pelaporan Penghentian Penggunaan

Jika sudah mengetahui lokasi penggunaan SharedArrayBuffer, lanjutkan ke bagian 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 asal SharedArrayBuffer. Jika library tersebut adalah library pihak ketiga, hubungi developer untuk memperbaiki masalahnya. Jika diterapkan sebagai bagian dari situs Anda, ikuti panduan di bawah untuk mengaktifkan isolasi lintas origin.

Peringatan Konsol DevTools saat SharedArrayBuffer digunakan tanpa isolasi lintas asal.

(Lanjutan) Menggunakan Pelaporan Penghentian

Beberapa browser memiliki fungsi pelaporan penghentian 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 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 tempat Anda mendaftar akan mulai mengumpulkan laporan penghentian penggunaan.

Lihat contoh penerapan di sini: https://cross-origin-isolation.glitch.me.

Menganalisis dampak isolasi lintas origin

Bukankah akan lebih baik jika Anda dapat menilai dampak pengaktifan isolasi lintas origin 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 melakukannya.

Tetapkan Cross-Origin-Opener-Policy-Report-Only: same-origin di dokumen tingkat teratas. Seperti namanya, header ini hanya mengirim laporan tentang dampak COOP: same-origin terhadap situs Anda dan benar-benar tidak akan menonaktifkan komunikasi dengan jendela pop-up.
Siapkan pelaporan dan konfigurasikan server web untuk menerima dan menyimpan laporan.
Tetapkan Cross-Origin-Embedder-Policy-Report-Only: require-corp di dokumen tingkat teratas. 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 dengan yang Anda siapkan di langkah sebelumnya.

Perhatian: Mengaktifkan isolasi lintas origin akan memblokir pemuatan resource lintas origin yang tidak Anda aktifkan secara eksplisit, dan akan mencegah dokumen tingkat teratas 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 sub-resource untuk ikut serta secara eksplisit. Dan kita mendapatkan ide untuk melakukan kebalikannya: mode "tanpa kredensial" COEP baru yang memungkinkan pemuatan resource tanpa header CORP dengan menghapus semua kredensialnya. Kami harap hal ini akan meringankan beban Anda dalam memastikan subresource mengirim header Cross-Origin-Resource-Policy. Meskipun mode credentialless tersedia di Chrome mulai versi 96, mode ini belum didukung oleh browser lain. Hal ini dapat menyebabkan beberapa developer kesulitan 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 sedang mempelajari mengendorkan kondisi untuk mengaktifkan isolasi lintas origin ke Cross-Origin-Opener-Policy: same-origin-allow-popups. Dengan cara ini, komunikasi dengan jendela yang terbuka dengan sendirinya akan dimungkinkan. Jika Anda ingin mengaktifkan isolasi lintas origin, tetapi diblokir oleh tantangan ini, sebaiknya daftar untuk uji coba origin dan tunggu hingga mode baru tersedia. Kami tidak berencana untuk menghentikan uji coba origin hingga mode baru ini tersedia.

Mitigasi dampak isolasi lintas-asal

Setelah Anda menentukan resource mana yang akan terpengaruh oleh isolasi lintas origin, berikut adalah panduan umum tentang cara Anda benar-benar memilih untuk mengaktifkan resource lintas origin tersebut:

Pada resource lintas-asal seperti gambar, skrip, stylesheet, iframe, dan lainnya, tetapkan header Cross-Origin-Resource-Policy: cross-origin. Pada resource situs yang sama, tetapkan header Cross-Origin-Resource-Policy: same-site.
Untuk resource yang dapat dimuat menggunakan CORS, pastikan resource tersebut diaktifkan, dengan menetapkan atribut crossorigin dalam 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-asal yang dimuat ke dalam iframe atau skrip pekerja melibatkan lapisan iframe atau skrip pekerja lain, terapkan secara rekursif langkah-langkah yang dijelaskan di bagian ini sebelum melanjutkan.
Setelah Anda mengonfirmasi bahwa semua resource lintas origin diikutsertakan, 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 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 terisolasi lintas origin, atau menggunakan metode komunikasi yang berbeda (misalnya, permintaan HTTP).

Aktifkan isolasi lintas asal

Setelah Anda memitigasi dampaknya dengan isolasi lintas origin, berikut adalah panduan umum untuk mengaktifkan isolasi lintas origin:

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

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