Membuat situs Anda "diisolasi lintas origin" menggunakan COOP dan COEP

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

Eiji Kitamura

Dipublikasikan: 13 April 2020, Terakhir diperbarui: 21 Juni 2022

Perhatian: SharedArrayBuffer di desktop Chrome memerlukan isolasi lintas asal mulai Chrome 92. Pelajari lebih lanjut di Pembaruan SharedArrayBuffer.

Dokumen ini menunjukkan cara menggunakan COOP dan COEP ini. Anda dapat membaca lebih lanjut alasan hal ini penting di Membuat situs Anda "diisolasi lintas asal" menggunakan COOP dan COEP.

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

Fitur yang akan tersedia di balik status diisolasi lintas origin state.

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

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

Untuk ikut serta dalam status diisolasi lintas origin, Anda harus mengirimkan header HTTP berikut pada dokumen utama:

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

Header ini menginstruksikan browser untuk memblokir pemuatan resource atau iframe yang belum ikut serta untuk dimuat oleh dokumen lintas origin, dan mencegah jendela lintas origin berinteraksi langsung dengan dokumen Anda. Hal ini juga berarti resource yang dimuat lintas origin memerlukan keikutsertaan.

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

Catatan: Dokumen ini ditujukan bagi mereka yang ingin menyiapkan situs untuk menggunakan SharedArrayBuffer, thread WebAssembly, performance.measureUserAgentSpecificMemory(), atau timer resolusi tinggi dengan presisi yang lebih baik secara lebih andal di seluruh platform browser.

Glosarium

Dokumen ini menggunakan banyak terminologi yang namanya mirip dan disingkat. Untuk memperjelas, kami telah menyusun glosarium mini:

• COEP: Cross Origin Embedder Policy
• COOP: Cross Origin Opener Policy
• CORP: Cross Origin Resource Policy
• CORS: Cross Origin Resource Sharing
• CORB: Cross Origin Read Blocking

Membuat situs Anda diisolasi lintas origin

Tips: Pelajari langkah-langkah praktis untuk mengaktifkan isolasi lintas asal.

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

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

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

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

2. Mengaktifkan CORP atau CORS pada resource

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

Berikut hal yang perlu Anda lakukan, bergantung pada sifat resource:

• Jika resource diharapkan dimuat hanya dari origin yang sama, tetapkan header Cross-Origin-Resource-Policy: same-origin.
• Jika resource diharapkan dimuat hanya dari situs yang sama tetapi lintas origin, tetapkan header Cross-Origin-Resource-Policy: same-site.
• Jika resource dimuat dari lintas origin yang berada di bawah kontrol Anda, tetapkan header Cross-Origin-Resource-Policy: cross-origin jika memungkinkan.
• Untuk resource lintas origin yang tidak dapat Anda kontrol:
  • Gunakan atribut crossorigin di 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 dan tetapkan Cross-Origin-Resource-Policy: cross-origin (atau same-site, same-origin bergantung pada konteksnya).
• Skrip yang dimuat dengan WebWorker harus ditayangkan dari origin yang sama, sehingga Anda tidak memerlukan header CORP atau CORS.
• Untuk dokumen atau worker yang ditayangkan dengan COEP: require-corp, subresource lintas origin yang dimuat tanpa CORS harus menetapkan header Cross-Origin-Resource-Policy: cross-origin untuk ikut serta dalam penyematan. Misalnya, hal ini berlaku untuk <script>, importScripts, <link>, <video>, <iframe>, dll.

Istilah Penting: Situs yang sama adalah situs yang memiliki skema yang sama dan eTLD+1 yang sama. Origin yang sama adalah situs yang memiliki kombinasi skema, nama host, dan port yang sama. Baca selengkapnya tentang perbedaan antara situs yang sama dan origin yang sama.

Isolasi dalam iframe

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

3. Menggunakan header HTTP COEP Report-Only untuk menilai resource yang disematkan

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 hal ini secara rekursif ke semua dokumen, termasuk dokumen tingkat atas, iframe, dan skrip pekerja. Untuk mengetahui informasi tentang header HTTP Report-Only, lihat Mengamati masalah menggunakan Reporting API.

4. Mengaktifkan COEP

Langkah ini hanya dapat dilakukan setelah Anda memastikan resource telah mengaktifkan CORP atau CORS.

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

Catatan: Squoosh, PWA pengoptimalan gambar, menggunakan COOP / COEP untuk mendapatkan akses ke Thread Wasm (dan Shared Array Buffer) dan di Chrome Android.

Perhatian: Kami sedang mempelajari cara men-deploy Cross-Origin-Resource-Policy dalam skala besar, karena isolasi lintas asal mengharuskan semua subresource untuk ikut serta secara eksplisit. Salah satu opsinya adalah mode tanpa kredensial COEP yang memungkinkan pemuatan resource tanpa header CORP, dengan menghapus semua kredensialnya. Mode tanpa kredensial tersedia dari Chrome 96 dan di Edge, tetapi belum didukung oleh browser lain.

Menentukan apakah isolasi berhasil

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

Men-debug masalah

Anda mungkin mengalami masalah dengan COOP dan COEP. Anda dapat menggunakan alat developer browser atau Reporting API untuk men-debug.

Men-debug dengan Chrome DevTools

Untuk resource yang dirender di layar seperti gambar, masalah COEP cukup mudah dideteksi, karena permintaan diblokir dan halaman akan menunjukkan gambar yang tidak ada. Namun, untuk resource yang tidak selalu memiliki dampak visual, seperti skrip atau gaya, masalah COEP mungkin tidak diperhatikan. Untuk itu, gunakan panel Jaringan DevTools.

Jika ada masalah dengan COEP, Anda akan melihat (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) di kolom Status.

Kemudian, Anda dapat mengklik entri untuk melihat detail selengkapnya.

Anda juga dapat menentukan status iframe dan jendela dialog melalui panel Aplikasi. Buka bagian "Frame" di sisi kiri dan luaskan "top" untuk melihat perincian struktur resource.

Anda dapat memeriksa status iframe seperti ketersediaan SharedArrayBuffer, dll.

Anda juga dapat memeriksa status jendela dialog seperti apakah jendela tersebut diisolasi lintas asal.

Mengamati masalah menggunakan Reporting API

Reporting API adalah mekanisme lain yang dapat Anda gunakan untuk mendeteksi berbagai masalah. Anda dapat mengonfigurasi Reporting API untuk menginstruksikan browser pengguna Anda mengirim laporan setiap kali COEP memblokir pemuatan resource atau COOP mengisolasi jendela dialog. 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 sedang bertransisi ke versi baru Reporting API, yang menggantikan Report-To dengan Reporting-Endpoints; pertimbangkan untuk bermigrasi ke versi baru. Lihat Bermigrasi ke Reporting API v1 untuk mengetahui detailnya.

Pelajari cara mengonfigurasi Reporting API dan menyiapkan server untuk menerima laporan.

Contoh laporan COEP

Payload laporan COEP contoh saat resource lintas asal 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 ada untuk kompatibilitas mundur dan akan dihapus.

Contoh laporan COOP

Payload laporan COOP contoh saat dialog dibuka dan diisolasi 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 grup konteks penjelajahan yang berbeda mencoba mengakses satu sama lain (hanya dalam mode "report-only"), COOP juga akan mengirim 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"
}]

Poin-poin penting

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

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

Resource

• Alasan Anda memerlukan "diisolasi lintas origin" untuk fitur canggih
• Panduan untuk mengaktifkan isolasi lintas asal
• Memantau total penggunaan memori halaman web Anda dengan measureUserAgentSpecificMemory()

Pembaruan dokumen

• 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 karena perubahan arah baru-baru ini, API tersebut dihapus.
• 6 Mei 2021: Berdasarkan masukan dan masalah yang dilaporkan, kami memutuskan untuk menyesuaikan linimasa penggunaan SharedArrayBuffer di situs yang tidak diisolasi lintas origin agar dibatasi di Chrome M92.
• 16 April 2021: Menambahkan catatan tentang mode tanpa kredensial COEP dan COOP same-origin-allow-popups sebagai kondisi yang lebih longgar untuk isolasi lintas asal.
• 5 Maret 2021: Menghapus batasan untuk SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), dan fungsi debug, yang kini 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 debug di DevTools.
• 15 Oktober 2020: self.crossOriginIsolated tersedia dari Chrome 87. Dengan demikian, document.domain tidak dapat diubah saat self.crossOriginIsolated menampilkan true. performance.measureUserAgentSpecificMemory() mengakhiri uji coba origin dan diaktifkan secara default di Chrome 89. Shared Array Buffer di Chrome Android akan tersedia dari Chrome 88.