Dipublikasikan: 4 Mei 2020
Dalam Membuat situs Anda "terisolasi lintas origin" menggunakan COOP dan COEP, kami menjelaskan cara mengadopsi status "terisolasi lintas origin" menggunakan COOP dan COEP. Artikel ini adalah artikel pendamping yang menjelaskan alasan isolasi lintas asal diperlukan untuk mengaktifkan fitur canggih di browser.
Glosarium
Dokumen ini menggunakan banyak terminologi yang memiliki nama dan singkatan yang serupa. 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
Latar belakang
Web dibangun berdasarkan kebijakan origin yang sama, yaitu fitur keamanan yang membatasi cara dokumen dan skrip dapat berinteraksi dengan resource dari origin lain. Prinsip ini membatasi cara situs dapat mengakses resource lintas origin. Misalnya, dokumen dari https://a.example
dicegah mengakses data yang dihosting di https://b.example.
Namun, kebijakan origin yang sama memiliki beberapa pengecualian historis. Situs mana pun dapat:
- Menyematkan iframe lintas origin
- Menyertakan resource lintas origin seperti gambar atau skrip
- Membuka jendela dialog lintas origin dengan referensi DOM
Pada saat komunitas web menyadari manfaat kebijakan asal yang sama yang ketat, web sudah mengandalkan pengecualian ini.
Efek samping keamanan dari kebijakan origin yang sama yang longgar tersebut telah di-patch dengan dua cara:
- Protokol Cross-Origin Resource Sharing (CORS) memastikan bahwa server mengizinkan berbagi resource dengan asal tertentu.
- Developer secara implisit menghapus akses skrip langsung ke resource lintas origin, sekaligus mempertahankan kompatibilitas mundur. Aset lintas origin tersebut disebut aset "buram". Inilah alasan manipulasi piksel lintas origin dengan
CanvasRenderingContext2Dgagal kecuali jika CORS diterapkan pada gambar.
Semua keputusan kebijakan ini terjadi dalam grup konteks penjelajahan.
Untuk waktu yang lama, kombinasi ini sudah cukup untuk menjaga keamanan browser, dengan kasus ekstrem terbatas yang memerlukan patch langsung (seperti kerentanan JSON).
Hal ini berubah dengan Spectre, yang membuat data apa pun yang dimuat ke grup konteks penjelajahan yang sama dengan kode Anda berpotensi dapat dibaca. Dengan mengukur waktu yang dibutuhkan untuk operasi tertentu, penyerang
dapat menebak isi cache CPU, dan oleh karena itu isi
memori proses. Serangan semacam itu dapat dilakukan dengan timer bergranularitas rendah
yang ada di platform, dan dapat dipercepat dengan timer bergranularitas tinggi,
baik eksplisit (seperti performance.now()) maupun implisit (seperti
SharedArrayBuffer).
Jika evil.com menyematkan gambar lintas origin, mereka dapat menggunakan serangan Spectre untuk membaca data piksel gambar yang disematkan. Hal ini membuat perlindungan yang mengandalkan "keopakan" menjadi tidak efektif.
Idealnya, semua permintaan lintas origin diperiksa oleh server yang memiliki resource. Jika penelusuran tidak dilakukan, data tidak boleh sampai ke grup konteks penjelajahan aktor jahat. Dengan demikian, data tetap tidak dapat diakses oleh kemungkinan serangan Spectre. Kami menyebutnya status terisolasi lintas asal.
Jika kode sematan berada dalam status terisolasi lintas origin, situs yang meminta dianggap kurang berbahaya. Hal ini memungkinkan situs yang meminta untuk menggunakan
SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), dan
timer resolusi tinggi dengan presisi yang lebih baik,
sekaligus mencegah kemungkinan serangan Spectre. Status ini juga mencegah pengubahan
document.domain.
Kebijakan Penyemat Lintas Asal
Cross Origin Embedder Policy (COEP) mencegah dokumen memuat resource lintas origin yang tidak secara eksplisit memberikan izin dokumen dengan CORP atau CORS. Dengan fitur ini, Anda dapat menyatakan bahwa dokumen tidak dapat memuat resource tersebut.
a.example,
menetapkan kebijakan COEP ke require-corp. a.example ingin menyematkan 3 aset dari b.example, tetapi hanya dua yang berhasil.
Dua penyematan yang berhasil mencakup file JavaScript dengan kebijakan CORP lintas asal dan gambar dengan CORS diizinkan. Aset ketiga adalah video yang memiliki kebijakan CORP yang mengharuskan aset disematkan hanya di origin yang sama, sehingga video tidak akan dimuat di a.example.
Untuk mengaktifkan kebijakan ini, tambahkan header HTTP berikut ke dokumen:
Cross-Origin-Embedder-Policy: require-corp
COEP mengambil satu nilai require-corp. Hal ini memberlakukan kebijakan bahwa dokumen hanya dapat memuat resource dari origin yang sama, atau resource yang secara eksplisit ditandai sebagai dapat dimuat dari origin lain.
Agar dapat dimuat dari origin lain, resource harus mendukung Cross Origin Resource Sharing (CORS) atau Cross Origin Resource Policy (CORP).
Cross-Origin Resource Sharing (CORS)
Jika resource lintas asal mendukung Cross-Origin Resource Sharing (CORS), Anda dapat menggunakan atribut crossorigin untuk memuatnya ke halaman web Anda tanpa diblokir oleh COEP.
<img src="https://third-party.example.com/image.jpg" crossorigin>
Misalnya, jika resource gambar ini ditayangkan dengan header CORS, gunakan atribut
crossorigin sehingga permintaan untuk mengambil resource akan menggunakan mode
CORS. Hal ini juga mencegah gambar dimuat kecuali jika menetapkan header CORS.
Demikian pula, Anda dapat mengambil data lintas origin melalui metode fetch(), yang
tidak memerlukan penanganan khusus selama server merespons dengan header
HTTP
yang tepat.
Kebijakan Resource Lintas Asal
Cross Origin Resource Policy (CORP) awalnya diperkenalkan sebagai opsi keikutsertaan untuk melindungi resource Anda agar tidak dimuat oleh origin lain. Dalam konteks COEP, CORP dapat menentukan kebijakan pemilik resource tentang siapa yang dapat memuat resource.
Header Cross-Origin-Resource-Policy memiliki tiga kemungkinan nilai:
Cross-Origin-Resource-Policy: same-site
Resource yang ditandai same-site hanya dapat dimuat dari situs yang sama.
Cross-Origin-Resource-Policy: same-origin
Resource yang ditandai same-origin hanya dapat dimuat dari origin yang sama.
Cross-Origin-Resource-Policy: cross-origin
Resource yang ditandai cross-origin dapat dimuat oleh situs mana pun. (Nilai
ini ditambahkan ke
spesifikasi CORP bersama dengan COEP.)
Kebijakan Pembuka Lintas Asal
Cross Origin Opener Policy
(COOP) memungkinkan Anda mengisolasi
jendela tingkat atas dari dokumen lain, dengan menempatkan dokumen dalam grup konteks penjelajahan
terpisah. Dengan cara ini, dokumen tidak dapat berinteraksi langsung dengan
jendela tingkat atas. Misalnya, jika dokumen dengan COOP membuka dialog, properti
window.opener-nya adalah null. Properti .closed
referensi pembuka adalah true.
Header Cross-Origin-Opener-Policy memiliki tiga kemungkinan nilai:
Cross-Origin-Opener-Policy: same-origin
Dokumen yang ditandai same-origin dapat berbagi grup konteks penjelajahan yang sama dengan dokumen yang berasal dari origin yang sama yang juga ditandai secara eksplisit sebagai same-origin.
Cross-Origin-Opener-Policy: same-origin-allow-popups
Dokumen tingkat teratas dengan same-origin-allow-popups mempertahankan referensi ke pop-upnya yang tidak menetapkan COOP atau yang memilih tidak ikut isolasi dengan menetapkan COOP unsafe-none.
Cross-Origin-Opener-Policy: unsafe-none
unsafe-none adalah default dan memungkinkan dokumen ditambahkan ke grup konteks penjelajahan pembukanya, kecuali jika pembuka itu sendiri memiliki COOP same-origin.
Ringkasan
Jika Anda menginginkan akses ke fitur seperti SharedArrayBuffer,
performance.measureUserAgentSpecificMemory(), atau timer resolusi tinggi dengan presisi yang lebih baik,
dokumen Anda harus menggunakan COEP dengan nilai require-corp dan
COOP dengan nilai same-origin. Jika salah satunya tidak ada, browser
tidak akan menjamin isolasi yang memadai untuk mengaktifkan fitur canggih tersebut dengan aman.
Anda dapat menentukan situasi halaman dengan memeriksa apakah
self.crossOriginIsolated
menampilkan true.
Pelajari cara menerapkannya di Membuat situs Anda "terisolasi lintas asal" menggunakan COOP dan COEP.