Pop-in yang Dipartisi: pendekatan baru untuk pop-up Web di Uji Coba Developer

Natalia Markoborodova

Mulai Chrome 132, developer dapat berpartisipasi dalam Uji Coba Developer untuk pendekatan baru pada pop-up Web: Popin yang Dipartisi. Uji Coba Developer ini hanya tersedia untuk Desktop, dan fitur ini belum tersedia di Android.

Popin yang dipartisi adalah jenis pop-up baru yang dirancang untuk interaksi singkat, seperti login atau konfirmasi cepat. Aplikasi ini memuat konten web dengan dua fitur unik:

Penyimpanan yang dipartisi oleh pembuka
UI seperti modal

Mengapa kita memerlukan popin yang dipartisi?

Pop-in yang dipartisi didesain untuk mempertahankan properti privasi iframe yang dipartisi dan properti keamanan pop-up.

Seiring makin banyak pengguna memilih untuk menjelajah tanpa cookie pihak ketiga, alur yang mengandalkan penyimpanan data di pop-up untuk pengambilan dalam konteks pihak ketiga nanti (misalnya, untuk mempertahankan sesi pengguna di seluruh situs) mungkin terganggu. Popin yang dipartisi bertujuan untuk mengatasi masalah ini.

Bagaimana cara kerja popin yang dipartisi?

Penyimpanan setiap popin yang dipartisi dipartisi ke pembukanya. Partisi penyimpanan membatasi akses ke data lintas situs, sehingga memitigasi risiko pelacakan dan serangan injeksi skrip. Pelajari cara kerja partisi penyimpanan di dokumentasi kami.

Pertimbangkan situs opener.example yang menyematkan konten dari third-party.example. Untuk menampilkan konten yang dipersonalisasi di opener.example, pengguna harus login di third-party.example. Jika cookie pihak ketiga diblokir di browser pengguna, alur pop-up saat ini adalah sebagai berikut:

Pengguna mengklik tombol login.
Dialog akan terbuka.
Pengguna login dari konteks tingkat teratas third-party.example, dan cookie autentikasi yang tidak dipartisi ditulis.
Konten third-party.example yang disematkan di opener.example tidak memiliki akses ke cookie level teratasnya sendiri yang ditulis di third-party.example saat ditampilkan dalam konteks pihak pertama. Hal ini terjadi karena cookie autentikasi tidak dipartisi dan oleh karena itu merupakan cookie pihak ketiga.

Penyimpanan popin yang dipartisi dipartisi ke pembuka. Hal ini mengubah langkah 3-4 alur:

Pengguna login dari konteks tingkat teratas third-party.example. Karena dibuka di popin yang dipartisi, penyimpanan dipartisi berdasarkan opener.example.

Catatan: Jika cookie pihak ketiga diblokir, popin tidak dapat mengakses cookie yang ditetapkan dalam konteks tingkat teratas. Dalam contoh kami, cookie yang ditetapkan saat third-party.example dibuka di jendela browser terpisah tidak tersedia di popin atau iframe third-party.example.
Konten third-party.example yang disematkan di opener.example memiliki akses ke cookie-nya sendiri yang ditetapkan di popin, karena keduanya berbagi penyimpanan yang dipartisi yang sama.

Alur autentikasi pengguna popin yang dipartisi. Jendela pop-in dari 'third-party.example' dibuka di 'opener.example'. Iframe dalam pop-in ini dapat mengakses cookie yang ditetapkan oleh konteks tingkat teratas 'third-party.example' — Alur popin yang dipartisi: Iframe `third-party.example` yang disematkan di `opener.example` memiliki akses ke set cookie yang dipartisi sendiri dalam konteks tingkat teratas popin `third-party.example`, karena cookie dipartisi oleh `opener.example`.

Popin yang dipartisi bertujuan membantu pengguna memahami bahwa pembuka dan popin saling terkait:

Saat pengguna beralih ke tab lain, popin akan otomatis menjadi tidak terlihat dan tidak dapat diakses, sama seperti modal hanya terlihat saat tab pembuka aktif.
Saat pengguna kembali ke tab pembuka, popin akan ditampilkan lagi.
Pengguna tidak dapat melakukan perubahan di kolom alamat browser pop-in.

Partisi penyimpanan dengan popin yang dipartisi: iframe yang disematkan di halaman pembuka dapat mengakses penyimpanan yang ditetapkan dalam popin.

Cobalah

Chrome 132 memperkenalkan Uji Coba Developer untuk fitur Popin yang Dipartisi. Artinya, fitur akan tersedia di balik tanda. Berikut cara mencoba popin yang dipartisi:

Pastikan Anda menggunakan Chrome 132 atau yang lebih baru.
Buka chrome://flags#partitioned-popins dan aktifkan tanda fitur.
Mulai ulang Chrome.
Coba demo kami.

Menggunakan popin yang dipartisi di situs Anda

Untuk menggunakan popin yang dipartisi di situs Anda, panggil metode window.open() dengan parameter popin yang diteruskan:

window.open("third-party-popin.example", "_blank", "popin");

Beri masukan

Kami sedang mengeksplorasi popin yang dipartisi dan mencari masukan dari developer. Berikut beberapa kemungkinan skenario kasus penggunaan:

Alur autentikasi pengguna. Jika Anda telah menerapkan alur autentikasi kustom, dan autentikasi terjadi di domain yang berbeda dengan situs Anda (misalnya, pengguna site.example login di auth-site.example), coba buka halaman autentikasi di pop-in untuk menggunakan cookie sesi di halaman pembuka.
Konten sematan. Coba popin yang dipartisi untuk menampilkan konten tambahan dari widget pihak ketiga, seperti dialog setelan, gambar, atau PDF (atau konten lain yang biasanya dimuat di pop-up), yang dirender di jendela yang lebih besar. Dalam hal ini, popin yang dipartisi bertujuan untuk mempertahankan status sesi pengguna antara widget pihak ketiga dan situs Anda.

Jika Anda memiliki salah satu skenario ini dalam solusi Anda, memikirkan kasus penggunaan lain, atau ingin membantu membentuk masa depan fitur ini, coba fitur ini dan beri tahu kami:

Apakah Anda mengalami masalah?
Apakah Anda memiliki saran untuk pengalaman pengguna yang lebih baik?
Apakah Anda memiliki saran untuk UI yang lebih baik? Secara khusus, apakah Anda merasa bahwa UI menunjukkan dengan jelas bahwa pembuka dan popin saling terkait?
Seberapa berguna fitur ini menurut Anda?
Apakah ada kasus penggunaan lain yang ingin Anda gunakan untuk popin yang dipartisi?

Laporkan masalah di GitHub untuk membagikan pendapat Anda.