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 terhadap pop-up Web: Popin yang Dipartisi. Uji Coba Developer ini hanya tersedia untuk Desktop, dan fitur ini belum tersedia di Android.

Pop-in yang dipartisi adalah jenis pop-up baru yang dirancang untuk interaksi berumur pendek, seperti login atau konfirmasi cepat. Alat ini memuat konten web dengan dua fitur unik:

• Penyimpanan yang dipartisi oleh pembuka
• UI seperti modal

Catatan: Pembuka pop-up yang dipartisi adalah halaman web tempat pop-up dibuka.

Mengapa kita memerlukan popin yang dipartisi?

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

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

Bagaimana cara kerja pop-in yang dipartisi?

Setiap penyimpanan popin yang dipartisi dipartisi ke pembukanya. Partisi penyimpanan membatasi akses ke data lintas situs, sehingga mengurangi 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:

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

Alur pop-up: Iframe third-party.example yang disematkan di opener.example tidak memiliki akses ke cookie yang tidak dipartisi sendiri yang ditetapkan dalam konteks tingkat teratas pop-up third-party.example.

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

1. Pengguna login dari konteks tingkat teratas third-party.example. Karena terbuka di popin yang dipartisi, penyimpanan dipartisi oleh opener.example.

   Catatan: Jika cookie pihak ketiga diblokir, pop-in 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 pop-in atau iframe third-party.example.

2. 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 sama.

Alur pop-up yang dipartisi: Iframe third-party.example yang disematkan di opener.example memiliki akses ke cookie yang dipartisi sendiri yang ditetapkan dalam konteks tingkat atas pop-up third-party.example, karena cookie dipartisi oleh opener.example.

UI seperti modal relatif terhadap tab pembukanya

Pop-up yang dipartisi bertujuan untuk membantu pengguna memahami bahwa pembuka dan pop-up terkait:

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

Catatan: Fitur Popin yang Dipartisi sedang dalam pengembangan aktif. UI dapat berubah, dengan tujuan meningkatkan pengalaman pengguna. Berikan masukan untuk membantu kami meningkatkan kualitas fitur ini.

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

Cobalah

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

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

Menggunakan pop-in yang dipartisi di situs Anda

Catatan: Selama Uji Coba Developer, pop-in tidak akan tersedia untuk pengguna Anda kecuali jika mereka mengaktifkan flag fitur. Ikuti blog Developer untuk mendapatkan info terbaru.

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");

Penting: Jika cookie pihak ketiga dinonaktifkan di browser, pop-in yang dipartisi akan menolak cookie yang tidak dipartisi. Partisi cookie Anda dengan CHIPS agar tersedia di seluruh konten tersemat di situs Anda dan pop-in.

Beri masukan

Kami sedang mempelajari pop-in yang dipartisi dan mencari masukan dari developer. Berikut beberapa potensi 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, pop-in 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, memiliki kasus penggunaan lain, atau ingin membantu membentuk masa depan fitur ini, coba 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 mendapati bahwa UI dengan jelas menunjukkan bahwa pembuka dan pop-in saling terkait?
• Seberapa berguna fitur ini menurut Anda?
• Apakah ada kasus penggunaan lain yang ingin Anda gunakan untuk popin yang dipartisi?

Ajukan masalah di GitHub untuk membagikan pendapat Anda.