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.

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.

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

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.

Referensi