Panduan untuk mengaktifkan isolasi lintas asal

Isolasi lintas origin 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 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.

Tentukan tempat SharedArrayBuffer digunakan di situs Anda

Mulai Chrome 92, fungsi yang menggunakan SharedArrayBuffer 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.

Tujuan:

• Aktifkan isolasi lintas asal untuk terus menggunakan SharedArrayBuffer.
• Jika Anda mengandalkan kode pihak ketiga yang menggunakan SharedArrayBuffer, beri tahu penyedia pihak ketiga untuk mengambil tindakan.

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.

1. Buka Chrome DevTools di halaman yang Anda curigai mungkin menggunakan SharedArrayBuffer.
2. Pilih panel Konsol.
3. 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
   

4. Nama file dan nomor baris di akhir pesan (misalnya, common-bundle.js:535) menunjukkan asal SharedArrayBuffer. 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 asal.

(Lanjutan) Menggunakan Pelaporan Penghentian

Beberapa browser memiliki fungsi pelaporan untuk menghentikan penggunaan API ke endpoint yang ditentukan.

1. Siapkan server laporan penghentian penggunaan dan dapatkan URL pelaporan. Anda dapat mencapainya dengan menggunakan layanan publik atau membuatnya sendiri.
2. 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"}]}
   

3. 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.

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

Catatan: Anda juga dapat mengaktifkan kolom Domain di panel Jaringan Chrome DevTools untuk mendapatkan gambaran umum tentang resource mana yang akan terpengaruh.

Perhatian: Mengaktifkan isolasi lintas asal akan memblokir pemuatan resource lintas origin yang tidak Anda pilih secara eksplisit, dan akan mencegah dokumen tingkat atas Anda dapat berkomunikasi dengan jendela pop-up. Kami telah mengeksplorasi cara untuk men-deploy Cross-Origin-Resource-Policy dalam skala besar, karena isolasi lintas asal memerlukan semua subresource untuk ikut serta secara eksplisit. Dan kami memiliki ide untuk melakukan ke arah yang berlawanan: mode "tanpa kredensial" COEP baru yang memungkinkan pemuatan resource tanpa header CORP dengan menghapus semua kredensialnya. Kami harap hal ini dapat meringankan beban Anda dalam memastikan bahwa subresource mengirimkan header Cross-Origin-Resource-Policy. Meskipun mode credentialless tersedia di Chrome mulai versi 96, mode ini belum didukung oleh browser lain, hal ini mungkin menyebabkan beberapa developer merasa kesulitan men-deploy COOP atau COEP pada tahap ini. Selain itu, header Cross-Origin-Opener-Policy: same-origin akan merusak integrasi yang memerlukan interaksi jendela lintas origin seperti OAuth dan pembayaran. Untuk mengurangi masalah ini, kami sedang 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 terbuka dengan sendirinya 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 untuk menghentikan uji coba origin hingga mode baru ini tersedia.

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:

1. 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 header Cross-Origin-Resource-Policy: same-site.
2. 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, pastikan request.mode ditetapkan ke cors.
3. Jika Anda ingin menggunakan fitur canggih seperti SharedArrayBuffer di dalam iframe yang dimuat, tambahkan allow="cross-origin-isolated" ke <iframe>.
4. 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.
5. 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).
6. 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:

1. Tetapkan header Cross-Origin-Opener-Policy: same-origin di dokumen level atas. Jika Anda telah menyetel Cross-Origin-Opener-Policy-Report-Only: same-origin, gantilah. Hal ini memblokir komunikasi antara dokumen tingkat atas dan jendela {i>pop-up<i}-nya.
2. Tetapkan header Cross-Origin-Embedder-Policy: require-corp di dokumen level atas. Jika Anda telah menyetel Cross-Origin-Embedder-Policy-Report-Only: require-corp, gantilah. Tindakan ini akan memblokir pemuatan resource lintas origin yang tidak diikutsertakan.
3. Periksa apakah self.crossOriginIsolated menampilkan true di konsol untuk memverifikasi bahwa halaman Anda diisolasi lintas origin.

Mengaktifkan isolasi lintas origin di server lokal mungkin menyulitkan 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 tanda command line di setiap platform.

Referensi

• Membuat situs Anda "diisolasi lintas origin" menggunakan COOP dan COEP
• Update SharedArrayBuffer di Android Chrome 88 dan Chrome Desktop 92