Membuat situs Anda "terisolasi lintas asal" menggunakan COOP dan COEP

Gunakan COOP dan COEP untuk menyiapkan lingkungan yang terisolasi lintas asal dan mengaktifkan fitur canggih seperti SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), dan timer resolusi tinggi dengan presisi yang lebih baik.

Eiji Kitamura

Perhatian: SharedArrayBuffer di desktop Chrome memerlukan isolasi lintas asal mulai Chrome 92. Pelajari lebih lanjut di update SharedArrayBuffer di Android Chrome 88 dan Desktop Chrome 92.

Update

• 21 Juni 2022: Skrip pekerja juga memerlukan perhatian saat isolasi lintas asal diaktifkan. Menambahkan beberapa penjelasan.
• 5 Agustus 2021: JS Self-Profiling API telah disebutkan sebagai salah satu API yang memerlukan isolasi lintas asal, tetapi mencerminkan perubahan arah terbaru, API tersebut dihapus.
• 6 Mei 2021: Berdasarkan masukan dan masalah yang dilaporkan, kami telah memutuskan untuk menyesuaikan linimasa penggunaan SharedArrayBuffer di situs yang diisolasi lintas origin tidak dibatasi di Chrome M92.
• 16 April 2021: Menambahkan catatan tentang mode tanpa kredensial COEP baru dan COOP yang sama-origin-allow-popup menjadi kondisi longgar untuk isolasi lintas origin.
• 5 Maret 2021: Menghapus batasan untuk SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), dan fungsi proses debug, yang sekarang sepenuhnya diaktifkan di Chrome 89. Menambahkan kemampuan mendatang, performance.now() dan performance.timeOrigin, yang akan memiliki presisi lebih tinggi.
• 19 Februari 2021: Menambahkan catatan tentang kebijakan fitur allow="cross-origin-isolated" dan fungsi proses debug di DevTools.
• 15 Oktober 2020: self.crossOriginIsolated tersedia dari Chrome 87. Mencerminkan bahwa, document.domain tidak dapat diubah saat self.crossOriginIsolated menampilkan true. performance.measureUserAgentSpecificMemory() akan mengakhiri uji coba originnya dan diaktifkan secara default di Chrome 89. Buffer Array Bersama di Chrome Android akan tersedia mulai Chrome 88.

Beberapa web API meningkatkan risiko serangan side-channel seperti Spectre. Untuk mengurangi risiko tersebut, browser menawarkan lingkungan terisolasi berbasis keikutsertaan yang disebut diisolasi lintas origin. Dengan status terisolasi lintas origin, halaman web akan dapat menggunakan fitur istimewa, termasuk:

Fitur yang akan tersedia di balik status terisolasi lintas origin.

API	Deskripsi
SharedArrayBuffer	Diperlukan untuk thread WebAssembly. Ini tersedia mulai Chrome 88 Android. Versi desktop saat ini diaktifkan secara default dengan bantuan Isolasi Situs, tetapi akan memerlukan status terisolasi lintas origin dan akan dinonaktifkan secara default di Chrome 92.
performance.measureUserAgentSpecificMemory()	Tersedia dari Chrome 89.
performance.now(), performance.timeOrigin	Saat ini tersedia di banyak browser dengan resolusi yang dibatasi hingga 100 mikrodetik atau lebih tinggi. Dengan isolasi lintas asal, resolusinya dapat mencapai 5 mikrodetik atau lebih tinggi.

Status yang diisolasi lintas origin juga mencegah modifikasi document.domain. (Kemampuan mengubah document.domain memungkinkan komunikasi antardokumen situs yang sama dan telah dianggap sebagai celah dalam kebijakan asal yang sama.)

Untuk memilih ikut serta dalam status terisolasi lintas origin, Anda harus mengirim header HTTP berikut pada dokumen utama:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Header ini memerintahkan browser untuk memblokir pemuatan resource atau iframe yang tidak ikut dimuat oleh dokumen lintas origin, dan mencegah jendela lintas-asal berinteraksi langsung dengan dokumen Anda. Hal ini juga berarti bahwa resource yang dimuat lintas origin memerlukan keikutsertaan.

Anda dapat menentukan apakah halaman web berada dalam status terisolasi lintas origin dengan memeriksa self.crossOriginIsolated.

Artikel ini menunjukkan cara menggunakan header baru ini. Dalam artikel lanjutan, saya akan memberikan latar belakang dan konteks yang lebih lengkap.

Catatan: Artikel ini ditujukan untuk pengguna yang ingin menyiapkan situsnya untuk menggunakan SharedArrayBuffer, rangkaian pesan WebAssembly, performance.measureUserAgentSpecificMemory(), atau timer resolusi tinggi dengan presisi yang lebih baik dan cara yang lebih andal di seluruh platform browser.

Istilah utama: Artikel ini menggunakan banyak istilah yang terdengar serupa. Untuk memperjelas, mari kita definisikan terlebih dahulu: * COEP: Kebijakan Cross Origin Embedder * COOP: Cross Origin Opener Policy * CORP: Cross Origin Resource Policy * CORS: Cross Origin Resource Sharing * CORB: Cross Origin Read Blocking

Deploy COOP dan COEP untuk membuat situs Anda diisolasi lintas origin

Catatan: Pelajari langkah-langkah praktis untuk mengaktifkan isolasi lintas asal di Panduan untuk mengaktifkan isolasi lintas asal.

Mengintegrasikan COOP dan COEP

1. Tetapkan header Cross-Origin-Opener-Policy: same-origin pada dokumen tingkat atas

Dengan mengaktifkan COOP: same-origin di dokumen tingkat atas, jendela dengan origin dan jendela yang sama yang dibuka dari dokumen, akan memiliki grup konteks penjelajahan terpisah kecuali jika memiliki asal yang sama dengan setelan COOP yang sama. Dengan demikian, isolasi diterapkan untuk jendela yang terbuka dan komunikasi timbal balik antara kedua jendela dinonaktifkan.

Perhatian: Hal ini akan merusak integrasi yang memerlukan interaksi jendela lintas origin seperti OAuth dan pembayaran. Untuk mengurangi masalah ini, kami menjelajahi kondisi tersebut 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 masalah ini, sebaiknya daftar ke uji coba origin dan tunggu hingga kondisi baru tersedia. Kami tidak berencana untuk menghentikan uji coba origin hingga masalah ini diselesaikan dengan aman.

Grup konteks penjelajahan adalah kumpulan jendela yang dapat saling merujuk. Misalnya, dokumen tingkat atas dan dokumen turunannya disematkan melalui <iframe>. Jika situs (https://a.example) membuka jendela pop-up (https://b.example), jendela pembuka dan jendela pop-up memiliki konteks penjelajahan yang sama, sehingga keduanya memiliki akses satu sama lain melalui DOM API seperti window.opener.

Anda dapat memeriksa apakah pembuka jendela dan pembukanya berada dalam grup konteks penjelajahan terpisah dari DevTools.

Coba: Lihat dampak dari berbagai parameter COOP.

2. Pastikan resource mengaktifkan CORP atau CORS

Pastikan semua resource di halaman dimuat dengan header HTTP CORP atau CORS. Langkah ini diperlukan untuk langkah keempat, mengaktifkan COEP.

Berikut yang perlu Anda lakukan bergantung pada sifat resource:

• Jika resource diharapkan dimuat hanya dari origin yang sama, setel header Cross-Origin-Resource-Policy: same-origin.
• Jika resource diharapkan dimuat hanya dari situs yang sama, tetapi lintas asal, tetapkan header Cross-Origin-Resource-Policy: same-site.
• Jika resource dimuat dari lintas origin di bawah kontrol Anda, setel header Cross-Origin-Resource-Policy: cross-origin jika memungkinkan.
• Untuk resource lintas origin yang tidak dapat Anda kontrol:
  • Gunakan atribut crossorigin dalam tag HTML pemuatan jika resource ditayangkan dengan CORS. (Misalnya, <img src="***" crossorigin>.)
  • Minta pemilik resource untuk mendukung CORS atau CORP.
• Untuk iframe, ikuti prinsip yang sama di atas dan tetapkan Cross-Origin-Resource-Policy: cross-origin (atau same-site, same-origin, bergantung pada konteksnya).
• Skrip yang dimuat dengan WebWorker harus disalurkan dari origin yang sama, jadi Anda tidak memerlukan header CORP atau CORS.
• Untuk dokumen atau pekerja yang disalurkan dengan COEP: require-corp, subresource lintas origin yang dimuat tanpa CORS harus menetapkan header Cross-Origin-Resource-Policy: cross-origin agar dapat disematkan. Misalnya, hal ini berlaku untuk <script>, importScripts, <link>, <video>, <iframe>, dll.

Anda dapat mengaktifkan isolasi lintas asal pada dokumen yang disematkan dalam iframe dengan menerapkan kebijakan izin allow="cross-origin-isolated" ke tag <iframe> dan memenuhi ketentuan yang sama seperti yang dijelaskan dalam dokumen ini. Perlu diperhatikan bahwa seluruh rantai dokumen, termasuk frame induk dan frame turunan, juga harus diisolasi lintas asal.

Istilah utama: Anda harus memahami perbedaan antara "situs yang sama" dan "origin yang sama". Pelajari perbedaannya di artikel Memahami situs yang sama dan asal yang sama.

3. Gunakan header HTTP Laporan Khusus COEP untuk menilai resource tersemat

Sebelum mengaktifkan COEP sepenuhnya, Anda dapat melakukan uji coba dengan menggunakan header Cross-Origin-Embedder-Policy-Report-Only untuk memeriksa apakah kebijakan tersebut benar-benar berfungsi. Anda akan menerima laporan tanpa memblokir konten yang disematkan.

Terapkan ini secara berulang ke semua dokumen, termasuk dokumen tingkat atas, iframe, dan skrip pekerja. Untuk mengetahui informasi tentang header HTTP Hanya Laporan, lihat Mengamati masalah menggunakan Reporting API.

4. Aktifkan COEP

Setelah Anda mengonfirmasi bahwa semuanya berfungsi, dan semua resource dapat berhasil dimuat, alihkan header Cross-Origin-Embedder-Policy-Report-Only ke header Cross-Origin-Embedder-Policy dengan nilai yang sama untuk semua dokumen, termasuk dokumen yang disematkan melalui iframe dan skrip pekerja.

Coba: Lihat dampak dari berbagai parameter COEP / CORP.

Catatan: Squoosh (PWA pengoptimalan gambar) kini menggunakan COOP / COEP untuk mendapatkan akses ke Wasm Threads (dan Buffer Array Bersama) serta di Android Chrome.

Perhatian: Kami telah mencari cara untuk men-deploy Cross-Origin-Resource-Policy dalam skala besar, karena isolasi lintas asal memerlukan semua subresource untuk memilih 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. Namun, karena mode credentialless tersedia di Chrome dari versi 96 tetapi belum didukung oleh browser lain, beberapa developer mungkin merasa kesulitan men-deploy COOP atau COEP. Jika Anda memilih untuk tidak mengaktifkan isolasi lintas asal, sebaiknya daftar ke uji coba origin dan tunggu hingga credentialless tersedia di browser lainnya.

Tentukan apakah isolasi berhasil dengan self.crossOriginIsolated

Properti self.crossOriginIsolated menampilkan true saat halaman web berada dalam status terisolasi lintas origin dan semua resource serta jendela diisolasi dalam grup konteks penjelajahan yang sama. Anda dapat menggunakan API ini untuk menentukan apakah telah berhasil mengisolasi grup konteks penjelajahan dan mendapatkan akses ke fitur canggih seperti performance.measureUserAgentSpecificMemory().

Men-debug masalah menggunakan Chrome DevTools

Untuk resource yang dirender di layar seperti gambar, masalah COEP cukup mudah dideteksi karena permintaan akan diblokir dan halaman akan menunjukkan gambar yang tidak ada. Namun, untuk resource yang tidak harus memiliki dampak visual, seperti skrip atau gaya, masalah COEP mungkin tidak diperhatikan. Untuk melakukannya, gunakan panel DevTools Network. Jika ada masalah dengan COEP, Anda akan melihat (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) di kolom Status.

Anda kemudian dapat mengklik entri tersebut untuk melihat detail lebih lanjut.

Anda juga dapat menentukan status iframe dan jendela pop-up melalui panel Application. Buka bagian "Frame" di sisi kiri, lalu luaskan "atas" untuk melihat perincian struktur resource.

Anda dapat memeriksa status iframe seperti ketersediaan SharedArrayBuffer, dll.

Anda juga dapat memeriksa status jendela pop-up, seperti apakah jendela pop-up terisolasi lintas origin.

Mengamati masalah menggunakan Reporting API

Reporting API adalah mekanisme lain yang dapat Anda gunakan untuk mendeteksi berbagai masalah. Anda dapat mengonfigurasi Reporting API untuk memerintahkan browser pengguna agar mengirim laporan setiap kali COEP memblokir pemuatan resource atau COOP mengisolasi jendela pop-up. Chrome telah mendukung Reporting API sejak versi 69 untuk berbagai penggunaan, termasuk COEP dan COOP.

Catatan: Apakah Anda sudah menggunakan Reporting API dengan header Report-To? Chrome akan melakukan transisi ke Reporting API versi baru, yang menggantikan Report-To dengan Reporting-Endpoints. Pertimbangkan untuk bermigrasi ke versi baru. Lihat Bermigrasi ke Reporting API v1 untuk mengetahui detailnya.

Untuk mempelajari cara mengonfigurasi Reporting API dan menyiapkan server untuk menerima laporan, buka Menggunakan Reporting API.

Contoh laporan COEP

Contoh payload laporan COEP saat resource lintas origin diblokir terlihat seperti ini:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Perhatian: blocked-url hanya tersedia untuk kompatibilitas mundur dan nantinya akan dihapus.

Contoh laporan COOP

Contoh payload laporan COOP saat jendela pop-up dibuka dan terisolasi akan terlihat seperti ini:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Saat berbagai grup konteks penjelajahan mencoba saling mengakses (hanya dalam mode "hanya laporan"), COOP juga akan mengirimkan laporan. Misalnya, laporan saat postMessage() dicoba akan terlihat seperti ini:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Kesimpulan

Gunakan kombinasi header HTTP COOP dan COEP untuk mengikutsertakan halaman web ke status terisolasi lintas origin khusus. Anda akan dapat memeriksa self.crossOriginIsolated untuk menentukan apakah halaman web berada dalam status terisolasi lintas origin.

Kami akan terus memperbarui postingan ini karena fitur baru akan tersedia untuk status terisolasi lintas origin ini, dan peningkatan lebih lanjut akan dilakukan pada DevTools seputar COOP dan COEP.

Referensi

• Alasan Anda memerlukan "diisolasi lintas origin" untuk fitur canggih
• Panduan untuk mengaktifkan isolasi lintas asal
• Update SharedArrayBuffer di Android Chrome 88 dan Chrome Desktop 92
• Memantau total penggunaan memori halaman web Anda dengan measureUserAgentSpecificMemory()