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.
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()
danperformance.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 saatself.crossOriginIsolated
menampilkantrue
.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:
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.
Deploy COOP dan COEP untuk membuat situs Anda diisolasi lintas origin
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.
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.
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.
- Gunakan atribut
- Untuk iframe, ikuti prinsip yang sama di atas dan tetapkan
Cross-Origin-Resource-Policy: cross-origin
(atausame-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 headerCross-Origin-Resource-Policy: cross-origin
agar dapat disematkan. Misalnya, hal ini berlaku untuk<script>
,importScripts
,<link>
,<video>
,<iframe>
, dll.
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.
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.
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"
}]
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.