Bölünmüş pop-up'lar: Geliştirici deneme sürümünde web pop-up'larına yönelik yeni bir yaklaşım

Natalia Markoborodova

Chrome 132'den itibaren geliştiriciler, web pop-up'larına yönelik yeni bir yaklaşım olan Bölümlendirilmiş Pop-in'ler için geliştirici denemesine katılabilir. Bu geliştirici denemesi yalnızca masaüstünde kullanılabilir ve özellik henüz Android'de kullanıma sunulmamıştır.

Bölümlendirilmiş pop-in, oturum açma veya hızlı onay gibi kısa süreli etkileşimler için tasarlanmış yeni bir pop-up türüdür. Web içeriklerini iki benzersiz özellikle yükler:

• Açana göre bölümlendirilmiş depolama alanı
• Modal benzeri bir kullanıcı arayüzü

Neden bölümlendirilmiş pop-in'lere ihtiyacımız var?

Bölümlendirilmiş pop-in'ler, bölümlendirilmiş bir iFrame'in gizlilik özelliklerini ve pop-up'ların güvenlik özelliklerini koruyacak şekilde tasarlanmıştır.

Üçüncü taraf çerezleri olmadan göz atmayı tercih eden kullanıcı sayısı arttıkça, daha sonra üçüncü taraf bağlamında almak üzere verileri pop-up'ta depolamaya dayalı akışlar (örneğin, kullanıcı oturumunu siteler arasında korumak için) kesintiye uğrayabilir. Bölümlendirilmiş pop-in'ler bu sorunu çözmeyi amaçlar.

Bölümlendirilmiş pop-in'lerin işleyiş şekli

Bölümlendirilmiş her pop-in'in depolama alanı, açıcısına göre bölümlendirilir. Depolama alanı bölümleme, siteler arası verilere erişimi sınırlandırarak izleme risklerini ve komut dosyası yerleştirme saldırılarını azaltır. Depolama alanı bölümlemenin nasıl çalıştığını belgelerimizden öğrenebilirsiniz.

opener.example kaynağından içerik yerleştiren bir third-party.example web sitesini düşünün. opener.example üzerinde kişiselleştirilmiş içeriklerin gösterilmesi için kullanıcının third-party.example üzerinde oturum açması gerekir. Kullanıcının tarayıcısında üçüncü taraf çerezleri engellendiğinde mevcut pop-up akışı şu şekildedir:

1. Kullanıcı bir giriş düğmesini tıkladığında
2. Bir iletişim kutusu açılır.
3. Kullanıcı, third-party.example üst düzey bağlamından giriş yaptığında bölümleme yapılmamış bir kimlik doğrulama çerezi yazılır.
4. third-party.example içeriği, birinci taraf bağlamında sunulduğunda opener.example üzerinde yerleştirilmiş third-party.example üzerinde yazılan kendi üst düzey çerezlerine erişemez. Bunun nedeni, kimlik doğrulama çerezinin bölümlenmemiş olması ve bu nedenle üçüncü taraf çerezi olmasıdır.

Bölümlendirilmiş bir pop-in'in depolama alanı, açıcıya göre bölümlendirilir. Bu değişiklik, akışların 3-4. adımlarını etkiler:

1. Kullanıcı, third-party.example üst düzey bağlamından giriş yapar. Bölümlendirilmiş bir pop-in penceresinde açık olduğundan depolama alanı opener.example ile bölümlendirilir.

2. opener.example sayfasına yerleştirilen third-party.example içeriği, aynı bölümlenmiş depolama alanını paylaştığı için pop-in'de ayarlanan kendi çerezine erişebilir.

Açıldığı sekmeye göre modal benzeri kullanıcı arayüzü

Bölümlendirilmiş pop-in'ler, kullanıcının açıcı ile pop-in'in ilişkili olduğunu anlamasına yardımcı olmayı amaçlar:

• Kullanıcı başka bir sekmeye geçtiğinde, popin otomatik olarak görünmez ve erişilemez hale gelir. Bu durum, modalın yalnızca açıcı sekme etkin olduğunda görünür olmasıyla aynıdır.
• Kullanıcı açıcı sekmeye döndüğünde pop-in tekrar gösterilir.
• Kullanıcı, pop-in'in tarayıcı adres çubuğunda değişiklik yapamaz.

Deneyin

Chrome 132, Bölümlendirilmiş Popinler özelliği için bir geliştirici deneme sürümü sunuyor. Bu, özelliğin bir bayrağın arkasında kullanılabileceği anlamına gelir. Bölümlendirilmiş pop-in'leri nasıl deneyebileceğiniz aşağıda açıklanmıştır:

1. Chrome 132 veya sonraki bir sürümü kullandığınızdan emin olun.
2. chrome://flags#partitioned-popins'ya gidin ve özellik bayrağını etkinleştirin.
3. Chrome'u yeniden başlatın.
4. Demomuzu deneyin.

Web sitenizde bölümlendirilmiş pop-in'ler kullanma

Web sitenizde bölümlendirilmiş bir pop-in kullanmak için window.open() parametresi iletilen popin yöntemini çağırın:

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

Görüşlerinizi paylaşın

Bölümlendirilmiş pop-in'leri inceliyoruz ve geliştiricilerden geri bildirim bekliyoruz. Olası kullanım alanı senaryolarından bazıları şunlardır:

• Kullanıcı kimlik doğrulama akışı. Özel bir kimlik doğrulama akışı uyguladıysanız ve kimlik doğrulama, sitenizden farklı bir alanda gerçekleşiyorsa (örneğin, site.example kullanıcıları auth-site.example alanında oturum açıyorsa) açıcı sayfadaki oturum çerezini kullanmak için kimlik doğrulama sayfasını bir pop-in penceresinde açmayı deneyin.
• Yerleştirilmiş içerik. Üçüncü taraf widget'ından ek içerik (ör. ayarlar iletişim kutusu, resim veya PDF) göstermek için bölümlendirilmiş pop-in'leri deneyin. Bu içerikler, genellikle pop-up'ta yüklenen diğer içerikler gibi daha büyük bir pencerede oluşturulur. Bu durumda, bölümlendirilmiş pop-in'ler, üçüncü taraf widget'ı ile siteniz arasındaki kullanıcı oturumu durumunu korumayı amaçlar.

Çözümlerinizde bu senaryolardan herhangi biri varsa, başka kullanım alanları düşünüyorsanız veya bu özelliğin geleceğini şekillendirmeye yardımcı olmak istiyorsanız özelliği deneyin ve bize bildirin:

• Herhangi bir sorunla karşılaştınız mı?
• Daha iyi bir kullanıcı deneyimi için önerileriniz var mı?
• Daha iyi bir kullanıcı arayüzü için önerileriniz var mı? Özellikle, açıcı ve pop-in'in ilişkili olduğu kullanıcı arayüzünde açıkça belirtiliyor mu?
• Bu özelliği ne kadar yararlı buldunuz?
• Bölümlendirilmiş pop-in'leri kullanmak istediğiniz başka kullanım alanları var mı?

Düşüncelerinizi paylaşmak için GitHub'da sorun bildirin.