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
Natalia Markoborodova

Chrome 132'den itibaren geliştiriciler, web pop-up'larına yönelik yeni bir yaklaşım olan Bölünmüş Pop-up'lar için Geliştirici Deneme sürümüne 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-up, girişler veya hızlı onaylar gibi kısa süreli etkileşimler için tasarlanmış yeni bir pop-up türüdür. Web içeriğini iki benzersiz özellikle yükler:

Bölünmüş pop-up'lara neden ihtiyacımız var?

Bölünmüş pop-up'lar, bölünmüş bir iFrame'in gizlilik özelliklerini ve pop-up'ların güvenlik özelliklerini korumak için tasarlanmıştır.

Daha fazla kullanıcı üçüncü taraf çerezleri olmadan tarama özelliğini etkinleştirdikçe, daha sonra üçüncü taraf bağlamında almak için verileri bir pop-up'ta depolamaya dayanan akışlar (ör. siteler arasında kullanıcı oturumunu sürdürmek için) kesintiye uğrayabilir. Bölünmüş pop-up'lar bu sorunu gidermeyi amaçlar.

Bölünmüş pop-up'ların işleyiş şekli

Bölümlendirilmiş pop-up'ların depolama alanı, pop-up'ı açan kullanıcıya göre bölümlendirilir. Depolama alanı bölümlendirmesi, siteler arası verilere erişimi sınırlayarak izleme risklerini ve komut dosyası ekleme saldırılarını azaltır. Depolama alanı bölümlendirmenin işleyiş şeklini belgelerimizde bulabilirsiniz.

third-party.example web sitesinden içerik yerleştiren bir opener.example web sitesini düşünün. opener.example'te kişiselleştirilmiş içerik göstermek için kullanıcının third-party.example'te oturum açması gerekir. Kullanıcının tarayıcısında üçüncü taraf çerezleri engellendiğinde geçerli pop-up akışı aşağıdaki gibidir:

  1. Kullanıcı bir giriş düğmesini tıklar.
  2. Bir iletişim kutusu açılır.
  3. Kullanıcı, third-party.example üst düzey bağlamından giriş yapar ve bölünmemiş bir kimlik doğrulama çerezi yazılır.
  4. opener.example'a yerleştirilmiş third-party.example içeriği, birinci taraf bağlamında sunulduğunda third-party.example'te yazılmış kendi üst düzey çerezlerine erişemez. Bunun nedeni, kimlik doğrulama çerezinin bölümlendirilmemiş olması ve bu nedenle üçüncü taraf çerezi olmasıdır.
"third-party.example" adresindeki bir iFrame'in "opener.example" adresine yerleştirildiği ve "third-party.example" adresinin bir pop-up'ta açıldığı pop-up kullanıcı kimlik doğrulama akışı. Çerez, "third-party.example" pop-up'ının üst düzey bağlamında ayarlandığından iframe, kendi bölümlenmemiş çerezine erişemez.
Pop-up akışı: opener.example'e yerleştirilmiş third-party.example iframe'i, third-party.example pop-up'ının üst düzey bağlamında bulunan kendi bölümlenmemiş çerez grubuna erişemez.

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

  1. Kullanıcı, third-party.example üst düzey bağlamından oturum açar. Bölünmüş bir pop-up'ta açıldığı için depolama alanı opener.example tarafından bölünür.

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

Bölünmüş pop-up kullanıcı kimlik doğrulama akışı. "opener.example" üzerinde "third-party.example" kaynaklı bir pop-in penceresi açılır. Bu pop-up'taki bir iFrame, "third-party.example" üst düzey bağlamı tarafından ayarlanan çerezlere erişebilir.
Bölümlendirilmiş pop-up akışı: opener.example'e yerleştirilmiş third-party.example iFrame'i, çerez opener.example tarafından bölümlendirildiği için third-party.example pop-up'ının üst düzey bağlamında ayarlanan kendi bölümlendirilmiş çerezine erişebilir.

Bölünmüş pop-up'lar, kullanıcının açan sayfa ile pop-up'ın birbiriyle alakalı olduğunu anlamasına yardımcı olmayı amaçlar:

  • Kullanıcı başka bir sekmeye geçtiğinde pop-up otomatik olarak görünmez ve erişilemez hale gelir. Bu durum, modal pencerelerin yalnızca açan sekme etkinken görünmesi gibidir.
  • Kullanıcı, açan sekmeye geri döndüğünde pop-up tekrar gösterilir.
  • Kullanıcı, pop-in'in tarayıcı adres çubuğunda değişiklik yapamaz.
Bölümlendirilmiş pop-up'larla depolama alanı bölümlendirme: Açıcı sayfaya yerleştirilmiş bir iFrame, pop-up'ta ayarlanan depolama alanına erişebilir.

Deneyin

Chrome 132, Bölünmüş Pop-up'lar özelliği için bir Geliştirici Deneme Sürümü kullanıma sunuyor. Bu, özelliğin bir işaretin arkasından kullanılabileceği anlamına gelir. Bölünmüş pop-up'ları şu şekilde deneyebilirsiniz:

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

Web sitenizde bölümlendirilmiş pop-up'ları kullanma

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

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

Görüşlerinizi paylaşın

Bölünmüş pop-up'ları araştırıyor 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ışınız varsa ve kimlik doğrulama sitenizden farklı bir alanda gerçekleşiyorsa (örneğin, site.example kullanıcıları auth-site.example'da oturum açıyorsa) kimlik doğrulama sayfasını bir pop-up'ta açarak açıcı sayfasındaki oturum çerezini kullanmayı deneyin.
  • Yerleştirilmiş içerikler. Üçüncü taraf widget'larından ek içerik (ör. ayarlar iletişim kutusu, resim veya PDF (veya genellikle pop-up'ta yüklenen diğer içerikler)) görüntülemek için bölünmüş pop-up'ları deneyin. Bu içerikler daha büyük bir pencerede oluşturulur. Bu durumda, bölümlendirilmiş pop-up'lar üçüncü taraf widget'ı ile siteniz arasındaki kullanıcı oturum durumunu korumayı amaçlar.

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

  • Herhangi bir sorunla karşılaştınız mı?
  • Daha iyi bir kullanıcı deneyimi için öneriniz var mı?
  • Daha iyi bir kullanıcı arayüzü için öneriniz var mı? Daha açık belirtmek gerekirse, kullanıcı arayüzünde açan sayfa ile pop-in'in ilişkili olduğu açıkça belirtiliyor mu?
  • Bu özelliği ne kadar yararlı buldunuz?
  • Bölünmüş pop-up'ları kullanmak istediğiniz başka kullanım alanları var mı?

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