Mengamankan interaksi pop-up dengan properti terbatas

Dapatkan isolasi lintas origin dan perlindungan kebocoran lintas situs saat berinteraksi dengan pop-up.

Arthur Hemery
GitHub
Maud Nalpas

Nilai baru untuk Cross-Origin Opener Policy (COOP) tersedia: restrict-properties. Fitur ini memberikan manfaat keamanan dan mempermudah penerapan isolasi lintas origin sekaligus memungkinkan situs Anda berinteraksi dengan pop-up pihak ketiga untuk pembayaran, autentikasi, atau kasus penggunaan lainnya.

Untuk mulai bereksperimen dengan restrict-properties, ikut serta dalam uji coba origin yang dimulai di Chrome 116.

Alasan menggunakan restrict-properties

restrict-properties memiliki dua kasus penggunaan utama:

Mencegah kebocoran lintas situs tanpa merusak situs

Secara default, situs mana pun dapat membuka aplikasi Anda di jendela pop-up dan mendapatkan referensi ke aplikasi tersebut.

Situs berbahaya dapat memanfaatkannya untuk melakukan serangan seperti kebocoran lintas situs. Untuk mengurangi risiko ini, Anda dapat menggunakan header Cross-Origin-Opener-Policy (COOP).

Hingga saat ini, opsi Cross-Origin-Opener-Policy Anda terbatas. Anda dapat memilih salah satu opsi berikut:

  • Tetapkan same-origin, yang memblokir semua interaksi lintas origin dengan pop-up.
  • Tetapkan same-origin-allow-popups, yang memblokir semua interaksi lintas origin yang membuka situs Anda di pop-up.
  • Tetapkan unsafe-none, yang mengizinkan semua interaksi lintas origin dengan pop-up.

Hal ini membuat situs yang perlu dibuka di pop-up dan berinteraksi dengan pembukanya tidak dapat menerapkan COOP. Hal ini membuat kasus penggunaan utama seperti login tunggal dan pembayaran tidak terlindungi dari kebocoran lintas situs.

Cross-Origin-Opener-Policy: restrict-properties mengatasi masalah ini.

Dengan restrict-properties, properti yang dapat digunakan untuk penghitungan frame dan serangan kebocoran lintas situs lainnya tidak tersedia, tetapi komunikasi dasar antar-jendela melalui postMessage dan closed diizinkan.

Tindakan ini meningkatkan keamanan situs sekaligus mempertahankan kasus penggunaan utama. Contoh:

  • Jika Anda menyediakan layanan di pop-up, menyetel Cross-Origin-Opener-Policy: restrict-properties akan melindungi diri Anda dari berbagai serangan kebocoran lintas situs. Anda tetap dapat membuka semua halaman yang sebelumnya dapat Anda buka.
  • Jika Anda perlu mengakses pop-up lintas origin, menyetel Cross-Origin-Opener-Policy: restrict-properties juga akan melindungi situs Anda dari penghitungan iframe. Anda akan dapat membuka set pop-up yang sama yang dapat Anda buka hari ini.
  • Jika pembuka dan penerima menetapkan header, dan halaman bersifat lintas origin, perilakunya akan serupa dengan salah satu dari keduanya yang telah menetapkan header. Jika berasal dari origin yang sama, akses penuh akan diberikan.

Menjadikan situs Anda diisolasi lintas origin

Alasan kami memerlukan isolasi lintas asal

Beberapa API web meningkatkan risiko serangan sisi saluran seperti Spectre. Untuk mengurangi risiko tersebut, browser menawarkan lingkungan terisolasi berbasis keikutsertaan yang disebut isolasi lintas asal. Dengan status diisolasi lintas asal, halaman web dapat menggunakan fitur istimewa termasuk SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), dan timer presisi tinggi dengan resolusi yang lebih baik, sekaligus mengisolasi origin dari origin lain kecuali jika origin tersebut ikut serta.

Hingga saat ini, untuk menggunakan API ini, Anda harus menyetel Cross-Origin-Opener-Policy: same-origin. Namun, tindakan ini akan merusak alur pop-up lintas origin yang mungkin Anda butuhkan, seperti login tunggal dan Pembayaran.

Cross-Origin-Opener-Policy: restrict-properties kini dapat digunakan sebagai pengganti Cross-Origin-Opener-Policy: same-origin untuk mengaktifkan isolasi lintas origin. Daripada menghentikan hubungan pembuka, tindakan ini hanya membatasinya pada subset komunikasi minimal window.postMessage() dan window.closed.

Anda dapat mengaktifkan isolasi lintas asal dengan dua header berikut:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

atau

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

Pelajari lebih lanjut credentialless di Memuat resource lintas origin tanpa header CORP menggunakan COEP: credentialless.

Demo

Coba berbagai opsi header dalam demo isolasi lintas asal ini.

Bereksperimen dengan uji coba origin

Untuk bereksperimen dengan Cross-Origin-Opener-Policy: restrict-properties, ikut serta dalam uji coba origin.

Dukungan browser

Saat ini, Cross-Origin-Opener-Policy: restrict-properties hanya didukung di Chrome. Browser lain terlibat aktif dalam diskusi untuk standardisasi.

FAQ

Situs saya perlu berkomunikasi dengan pop-up yang sama originnya, apakah saya harus menggunakan COOP: restrict-properties untuk mengaktifkan isolasi lintas origin?

Menetapkan COOP: restrict-properties di pop-up dan halaman utama tidak akan menyebabkan batasan. Menyetelnya hanya di pop-up atau hanya di halaman utama akan mencegah akses ke properti selain postMessage dan closed di seluruh pembuka, meskipun berasal dari origin yang sama.

Apakah kumpulan properti yang diizinkan sudah tetap?

Berdasarkan masukan sejauh ini, window.postMessage dan window.closed diduga cukup untuk sebagian besar alur kerja, tetapi kami masih mempertimbangkan untuk membukanya ke properti lain. Jika Anda memiliki kasus penggunaan yang tidak dapat diselesaikan hanya dengan menggunakan postMessage dan closed, berikan masukan Anda di rangkaian pesan Niat untuk Bereksperimen.

Resource