Halaman ini diterjemahkan oleh Cloud Translation API.

Mengamankan interaksi pop-up dengan properti terbatas

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

Arthur Hemery

Maud Nalpas

Nilai baru untuk Kebijakan Pembuka Lintas Asal (COOP) tersedia: restrict-properties. Hal ini memberikan manfaat keamanan dan memudahkan 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, berpartisipasilah dalam uji coba origin mulai dari Chrome 116.

Alasan menggunakan `restrict-properties`

restrict-properties memiliki dua kasus penggunaan utama:

Mencegah kebocoran lintas situs tanpa kerusakan.
Membuat situs Anda diisolasi lintas origin.

Mencegah kebocoran lintas situs tanpa kerusakan

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

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

Hingga saat ini, opsi Anda untuk Cross-Origin-Opener-Policy terbatas. Anda dapat:

Tetapkan same-origin, yang memblokir semua interaksi lintas-asal dengan pop-up.
Tetapkan same-origin-allow-popups, yang memblokir semua interaksi lintas origin yang membuka situs Anda dalam pop-up.
Tetapkan unsafe-none, yang mengizinkan semua interaksi lintas-asal 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 hal ini.

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

Hal 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 Anda dari berbagai serangan kebocoran lintas situs. Anda masih dapat membuka semua halaman yang sebelumnya dapat dibuka.
Jika Anda perlu mengakses pop-up lintas origin, menetapkan Cross-Origin-Opener-Policy: restrict-properties juga akan melindungi situs Anda dari penghitungan iframe. Anda akan dapat membuka kumpulan pop-up yang sama dengan yang dapat Anda buka saat ini.
Jika pembuka dan penerima menetapkan header, dan halaman bersifat lintas-asal, perilakunya akan sama dengan salah satu dari keduanya yang telah menetapkan header. Jika memiliki origin yang sama, akses penuh akan diberikan.

Membuat situs Anda diisolasi lintas origin

Alasan diperlukannya isolasi lintas asal

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

Hingga saat ini, untuk menggunakan API ini, Anda harus menetapkan Cross-Origin-Opener-Policy: same-origin. Namun, tindakan ini akan merusak alur pop-up lintas origin yang mungkin Anda perlukan, seperti login sekali klik dan Payments.

Cross-Origin-Opener-Policy: restrict-properties kini dapat digunakan sebagai pengganti Cross-Origin-Opener-Policy: same-origin untuk mengaktifkan isolasi lintas-asal. Bukannya memutuskan hubungan pembuka, hal ini hanya membatasinya ke subset komunikasi minimal window.postMessage() dan window.closed.

Anda akan 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 credentialless lebih lanjut di Memuat resource lintas origin tanpa header CORP menggunakan COEP: credentialless.

Demo

Coba berbagai opsi header dalam demo isolasi lintas origin ini.

Bereksperimen dengan uji coba origin

Untuk bereksperimen dengan Cross-Origin-Opener-Policy: restrict-properties, pilih untuk menggunakan uji coba origin.

Dukungan browser

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

FAQ

Situs saya perlu berkomunikasi dengan pop-up dengan origin yang sama. Apakah saya harus menggunakan `COOP: restrict-properties` untuk mengaktifkan isolasi lintas origin?

Menetapkan COOP: restrict-properties di pop-up dan halaman utama Anda tidak akan menyebabkan pembatasan. Menetapkan setelan ini 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 telah diperbaiki?

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 Intent to Experiment.