Cross-Origin Isolation: Memahami COOP, COEP, dan CORP di Browser

Browser modern memisahkan situs berdasarkan origin—kombinasi skema, host, dan port—agar sebuah halaman tidak bebas membaca data milik situs lain. Namun, batas ini bukan satu-satunya lapisan pertahanan. Untuk aplikasi web yang memproses data sensitif atau membutuhkan kemampuan tertentu seperti SharedArrayBuffer, pengembang mungkin perlu mengaktifkan cross-origin isolation. Konsep ini bergantung pada beberapa header HTTP yang namanya mirip, tetapi tugasnya berbeda: COOP, COEP, dan CORP.

Apa itu Cross-Origin Isolation?

Cross-origin isolation adalah kondisi keamanan browser yang memperketat pemisahan antara dokumen dari origin berbeda. Tujuannya antara lain mengurangi peluang sebuah halaman berinteraksi dengan konteks browsing yang tidak semestinya dan membantu browser membatasi sebagian risiko kebocoran informasi lintas situs. Isolasi ini bukan pengganti autentikasi, otorisasi server, atau kebijakan same-origin policy; ia menambahkan aturan pada cara browser mengelola dokumen dan sumber daya.

Isolasi lintas origin juga dapat menjadi prasyarat bagi kemampuan web tertentu. Contohnya, beberapa penggunaan SharedArrayBuffer dan timer berpresisi tinggi memerlukan lingkungan yang terisolasi karena kemampuan tersebut dapat memperbesar risiko serangan side-channel jika tersedia tanpa pembatasan yang sesuai.

Perbedaan COOP, COEP, dan CORP

1. COOP — Cross-Origin-Opener-Policy

COOP mengatur apakah sebuah dokumen boleh berbagi kelompok konteks penjelajahan dengan dokumen yang dibuka dari origin lain. Header Cross-Origin-Opener-Policy: same-origin memisahkan dokumen dari jendela atau tab lintas origin sehingga hubungan melalui window.opener tidak dipertahankan seperti biasa. Ini membantu mengurangi risiko halaman lain memengaruhi konteks browsing atau mempertahankan referensi ke halaman yang seharusnya terpisah.

Perubahan ini dapat memengaruhi alur login pop-up, pembayaran, OAuth, atau integrasi yang sengaja berkomunikasi dengan jendela pembuka. Karena itu, uji alur tersebut sebelum menerapkan kebijakan ketat di seluruh situs.

2. COEP — Cross-Origin-Embedder-Policy

COEP menentukan syarat ketika dokumen memuat sumber daya lintas origin, seperti gambar, skrip, stylesheet, atau iframe. Salah satu nilai yang umum adalah require-corp, yang mengharuskan sumber lintas origin memberikan izin yang sesuai melalui CORS atau CORP. Nilai credentialless, jika didukung browser dan sesuai kebutuhan, memungkinkan sebagian permintaan tanpa kredensial diproses dengan aturan berbeda; dukungan dan perilakunya perlu diuji pada browser sasaran.

COEP sering menjadi bagian yang paling terlihat dampaknya: aset pihak ketiga yang sebelumnya tampil dapat gagal dimuat jika server asal tidak mengirim header yang diperlukan. Periksa font, analitik, video embed, iklan, widget, dan CDN, bukan hanya berkas yang di-host sendiri.

3. CORP — Cross-Origin-Resource-Policy

CORP adalah header yang dikirim oleh server pemilik sumber daya untuk menyatakan konteks mana yang boleh memuat sumber tersebut. Nilainya antara lain same-origin, same-site, dan cross-origin. Misalnya, berkas privat yang hanya boleh digunakan dalam origin yang sama dapat diberi Cross-Origin-Resource-Policy: same-origin. Sebaliknya, aset publik yang memang dirancang untuk dipakai banyak situs mungkin membutuhkan kebijakan yang lebih longgar atau mekanisme CORS yang tepat.

CORP tidak sama dengan CORS. CORS mengatur izin berbagi respons melalui mekanisme permintaan lintas origin, sedangkan CORP menyatakan apakah sebuah sumber boleh dimuat dalam konteks tertentu. Memilih nilai yang salah bisa membuat aset tidak tersedia atau membuka akses lebih luas daripada yang dimaksud.

Bagaimana ketiganya bekerja bersama?

COOP membantu memisahkan konteks dokumen, COEP membatasi pemuatan sumber lintas origin pada dokumen tersebut, dan CORP memberi sinyal dari server sumber daya tentang siapa yang boleh memuatnya. Untuk mencapai cross-origin isolation, konfigurasi yang umum adalah COOP bernilai same-origin dan COEP bernilai require-corp, dengan syarat sumber daya yang dibutuhkan memenuhi aturan pemuatan. Menambahkan satu header saja belum tentu cukup.

Contoh konfigurasi konseptual pada respons HTML utama:

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

Ini bukan konfigurasi yang bisa dipasang tanpa pengujian. Header sebaiknya diterapkan pada dokumen yang memang memerlukan isolasi, sementara respons aset harus dikonfigurasi berdasarkan apakah aset tersebut privat, satu situs, atau publik lintas origin.

Langkah implementasi yang lebih aman

1. Inventarisasi dependensi. Catat semua sumber daya pihak ketiga, iframe, pop-up login, integrasi pembayaran, font, dan skrip analitik.
2. Uji di staging. Terapkan header pada lingkungan uji dan pantau Console serta Network panel di DevTools untuk menemukan sumber daya yang diblokir.
3. Perbaiki sumber daya satu per satu. Bila aset memang boleh dibagikan, atur CORS atau CORP pada server pemiliknya. Jangan melonggarkan kebijakan secara membabi buta hanya untuk menghilangkan error.
4. Periksa alur pop-up. Pastikan OAuth, login, pembayaran, dan komunikasi ant jendela tetap berjalan setelah COOP diterapkan.
5. Verifikasi hasil. Di browser yang mendukungnya, periksa nilai window.crossOriginIsolated. Nilai true menunjukkan dokumen berjalan dalam konteks terisolasi menurut browser tersebut, tetapi bukan bukti bahwa seluruh aplikasi bebas dari kerentanan.
6. Pantau setelah rilis. Gunakan pengujian otomatis dan pemantauan error untuk mendeteksi regresi ketika dependensi pihak ketiga berubah.

Kesalahan yang sering terjadi

Kesalahan umum adalah memasang COEP tanpa memeriksa sumber daya eksternal, menganggap CORP dapat menggantikan CORS, atau mengaktifkan COOP tanpa menguji alur yang menggunakan window.opener. Kesalahan lain adalah mengandalkan cross-origin isolation sebagai perlindungan menyeluruh. Header ini tidak memperbaiki kontrol akses API, XSS, kebocoran token, atau validasi input yang buruk. Tetap gunakan Content Security Policy, cookie yang aman, autentikasi yang benar, dan pembatasan akses server.

Kesimpulan

COOP, COEP, dan CORP menyelesaikan masalah yang saling berkaitan, tetapi tidak saling menggantikan. COOP mengatur pemisahan konteks browsing, COEP menetapkan persyaratan pemuatan sumber lintas origin, dan CORP menyatakan kebijakan pemuatan pada tingkat sumber daya. Mulailah dari inventaris dependensi, uji konfigurasi di staging, lalu verifikasi perilaku browser sebelum menerapkannya ke produksi. Dokumentasi resmi MDN tentang cross-origin isolation dan panduan COOP dan COEP dapat menjadi rujukan lanjutan.