Gunakan COOP dan COEP untuk menyiapkan lingkungan yang terisolasi lintas origin 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 kehati-hatian saat isolasi lintas asal diaktifkan. Beberapa penjelasan telah ditambahkan.
- 5 Agustus 2021: JS Self-Profiling API telah disebutkan sebagai salah satu API yang memerlukan isolasi lintas asal, tetapi mencerminkan perubahan terkini arah, data tersebut akan dihapus.
- 6 Mei 2021: Berdasarkan masukan dan masalah yang dilaporkan, kami telah memutuskan untuk melakukan penyesuaian
linimasa untuk penggunaan
SharedArrayBuffer
di tidak ada situs yang diisolasi lintas origin dibatasi di Chrome M92. - 16 April 2021: Menambahkan catatan tentang COEP baru tanpa kredensial mode dan COOP same-origin-allow-popup untuk longgar kondisi untuk lintas origin isolasi.
- 5 Maret 2021: Menghapus batasan untuk
SharedArrayBuffer
,performance.measureUserAgentSpecificMemory()
, dan fungsi proses debug, yang sekarang diaktifkan sepenuhnya di Chrome 89. Menambahkan kemampuan mendatang,performance.now()
danperformance.timeOrigin
, yang akan memiliki presisi. - 19 Februari 2021: Menambahkan catatan tentang kebijakan fitur
allow="cross-origin-isolated"
dan fungsionalitas proses debug di DevTools. - 15 Oktober 2020:
self.crossOriginIsolated
tersedia mulai Chrome 87. Mencerminkan hal tersebut,document.domain
tidak dapat diubah saatself.crossOriginIsolated
menampilkantrue
.performance.measureUserAgentSpecificMemory()
akan mengakhiri uji coba originnya dan diaktifkan secara default di Chrome 89. Buffering Array Bersama di Android Chrome akan tersedia mulai Chrome 88.
Beberapa web API meningkatkan risiko serangan side-channel seperti Spectre. Kepada memitigasi risiko, {i>browser<i} menawarkan lingkungan terisolasi berbasis {i>opt-in<i} yang disebut diisolasi lintas origin. Dengan status terisolasi lintas origin, halaman web akan dapat menggunakan fitur istimewa termasuk:
API | Deskripsi |
---|---|
SharedArrayBuffer
|
Wajib untuk thread WebAssembly. Ini tersedia dari Android Chrome 88. Versi desktop saat ini diaktifkan secara default dengan bantuan dari 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 terbatas pada 100 mikrodetik atau lebih tinggi. Dengan isolasi lintas asal, resolusi bisa 5 mikrodetik atau lebih tinggi. |
Status terisolasi lintas origin juga mencegah modifikasi
document.domain
. (Kemampuan mengubah document.domain
memungkinkan komunikasi
di antara dokumen yang sama dan telah dianggap
sebagai celah dalam
kebijakan origin yang sama.)
Untuk memilih ikut serta dalam status terisolasi lintas origin, Anda harus mengirimkan data berikut Header HTTP 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 dimuat oleh dokumen lintas origin, dan mencegah periode lintas origin untuk 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
Artikel ini menunjukkan cara menggunakan header baru tersebut. Dalam tindak lanjut artikel Saya akan memberikan lebih banyak latar belakang dan konteks.
Deploy COOP dan COEP untuk membuat situs Anda diisolasi lintas origin
Mengintegrasikan COOP dan COEP
1. Tetapkan header Cross-Origin-Opener-Policy: same-origin
di dokumen tingkat teratas
Dengan mengaktifkan COOP: same-origin
di dokumen tingkat atas, jendela dengan
origin, dan jendela yang dibuka dari dokumen, akan memiliki penjelajahan terpisah
grup konteks kecuali jika keduanya berada di asal yang sama dengan setelan COOP yang sama.
Dengan demikian, isolasi diberlakukan untuk jendela yang terbuka dan komunikasi timbal balik antara
kedua jendela dinonaktifkan.
Grup konteks penjelajahan adalah serangkaian jendela yang dapat saling mereferensikan. Sebagai
contoh dokumen tingkat atas dan dokumen turunannya yang disematkan melalui <iframe>
.
Jika situs (https://a.example
) membuka jendela pop-up (https://b.example
),
jendela pembuka dan jendela {i>pop-up<i} berbagi konteks penjelajahan yang sama,
keduanya memiliki akses satu sama lain melalui DOM API seperti window.opener
.
Anda dapat memeriksa apakah pembuka jendela dan pembukanya berada di penjelajahan terpisah grup konteks dari DevTools.
2. Memastikan resource telah mengaktifkan CORP atau CORS
Pastikan semua resource di halaman dimuat dengan CORP atau CORS HTTP {i>header<i}. Langkah ini diperlukan untuk langkah keempat, mengaktifkan COEP.
Berikut adalah hal yang perlu Anda lakukan bergantung pada sifat resource:
- Jika resource diharapkan akan dimuat hanya dari asal yang sama, tetapkan
header
Cross-Origin-Resource-Policy: same-origin
. - Jika resource diharapkan dimuat hanya dari situs yang sama tetapi
origin, setel header
Cross-Origin-Resource-Policy: same-site
. - Jika resource dimuat dari lintas origin 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
dalam tag HTML pemuatan jika resource-nya yang dilayani 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 setel atribut
Cross-Origin-Resource-Policy: cross-origin
(atausame-site
,same-origin
bergantung pada konteksnya). - Skrip yang dimuat dengan
WebWorker
harus ditayangkan dari origin yang sama, jadi Anda tidak memerlukan header CORP atau CORS. - Untuk dokumen atau pekerja yang disalurkan dengan
COEP: require-corp
, lintas origin subresource yang dimuat tanpa CORS harus menetapkan headerCross-Origin-Resource-Policy: cross-origin
agar dapat disematkan. Misalnya, ini berlaku untuk<script>
,importScripts
,<link>
,<video>
,<iframe>
, dll.
3. Gunakan header HTTP Khusus Laporan COEP untuk menilai sumber daya yang disematkan
Sebelum mengaktifkan COEP sepenuhnya, Anda dapat melakukan uji coba dengan menggunakan
Cross-Origin-Embedder-Policy-Report-Only
untuk memeriksa apakah kebijakan
berjalan. Anda akan menerima laporan tanpa memblokir konten yang disematkan.
Terapkan ini secara rekursif ke semua dokumen termasuk dokumen tingkat atas, iframe dan skrip worker. Untuk informasi tentang header HTTP Khusus Laporan, lihat Mengamati masalah menggunakan Pelaporan Google Cloud Platform.
4. Aktifkan COEP
Setelah Anda mengonfirmasi bahwa semuanya berfungsi, dan semua resource dapat
berhasil dimuat, alihkan 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 worker.
Menentukan apakah isolasi berhasil dengan self.crossOriginIsolated
Properti self.crossOriginIsolated
menampilkan true
saat halaman web berada dalam
status diisolasi lintas origin dan semua resource serta jendela diisolasi di
grup konteks penjelajahan yang sama. Anda bisa menggunakan API ini untuk menentukan apakah Anda
telah berhasil mengisolasi grup konteks penjelajahan
dan memperoleh akses ke
fitur canggih seperti performance.measureUserAgentSpecificMemory()
.
Men-debug masalah menggunakan Chrome DevTools
Untuk resource yang dirender di layar seperti gambar, prosesnya cukup mudah
mendeteksi masalah COEP karena permintaan akan diblokir dan halaman akan
menunjukkan gambar yang hilang. Namun, untuk resource yang tidak
selalu memiliki dampak visual, seperti skrip atau gaya, masalah COEP mungkin
tidak diperhatikan. Untuk fitur tersebut, gunakan panel Jaringan DevTools. Jika
ada masalah dengan COEP, Anda akan melihat
(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)
dalam Status
.
Kemudian, Anda dapat mengklik entri tersebut untuk melihat detail selengkapnya.
Anda juga dapat menentukan status iframe dan jendela pop-up melalui Application. Buka "Frame" di sisi kiri dan 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.
Mengamati masalah menggunakan Reporting API
Reporting API adalah mekanisme lain yang dapat digunakan mendeteksi berbagai masalah. Anda dapat mengonfigurasi Reporting API untuk menginstruksikan pengguna browser untuk mengirim laporan setiap kali COEP memblokir pemuatan resource atau COOP mengisolasi jendela {i>pop-up<i}. 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 artikel Menggunakan Pelaporan Google Cloud Platform.
Contoh laporan COEP
Contoh COEP laporan payload saat resource lintas origin diblokir akan 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 COOP payload laporan ketika jendela {i>pop-up<i} dibuka, tampak 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"
}]
Ketika kelompok konteks penjelajahan yang berbeda mencoba saling mengakses (hanya pada
"hanya laporan" COOP juga akan mengirimkan laporan. Misalnya, laporan saat
postMessage()
yang 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. Anda akan dapat memeriksa
self.crossOriginIsolated
untuk menentukan apakah suatu halaman web berasal dari lintas origin
dalam keadaan terisolasi.
Kami akan terus memperbarui postingan ini seiring dengan tersedianya fitur baru status terisolasi lintas origin, dan peningkatan lebih lanjut dilakukan pada DevTools COOP dan COEP.