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.

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 dampak yang akan ditimbulkan pada resource lintas-asal lainnya di situs Anda, seperti penempatan iklan.

Jika Anda tidak yakin di bagian mana situs Anda 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 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
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.

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

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

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:

  1. 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.
  2. 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.
  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-asal yang dimuat ke dalam iframe atau skrip pekerja melibatkan lapisan iframe atau skrip pekerja lain, terapkan secara berulang langkah-langkah yang dijelaskan di bagian ini sebelum melanjutkan.
  5. Setelah Anda mengonfirmasi bahwa semua resource lintas-asal diikutsertakan, tetapkan header Cross-Origin-Embedder-Policy: require-corp pada skrip iframe dan pekerja (Hal ini diperlukan terlepas dari asal yang sama atau lintas-asal).
  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 origin

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

  1. 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. Tindakan ini akan memblokir komunikasi antara dokumen tingkat atas dan jendela pop-up-nya.
  2. 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.
  3. Pastikan self.crossOriginIsolated menampilkan true di konsol untuk memverifikasi bahwa halaman Anda terisolasi lintas origin.

Resource