Kısıtlama özellikleri ile güvenli pop-up etkileşimleri

Pop-up'larla etkileşim kurarken kökler arası erişime kapalı web siteleri ve siteler arası sızıntı koruması elde edin.

Arthur Hemery
GitHub
Maud Nalpas
Maud Nalpas
X GitHub

Çapraz Kaynak Açıcı Politikası (COOP) için yeni bir değer mevcut: restrict-properties. Güvenlik avantajları sunar ve sitenizin ödemeler, kimlik doğrulama veya diğer kullanım alanları için üçüncü taraf pop-up'larıyla etkileşim kurmasına izin verirken kaynaklar arası izolasyonu benimsemeyi kolaylaştırır.

restrict-properties ile denemeye başlamak için Chrome 116'dan itibaren kaynak denemesine katılın.

restrict-properties'ü kullanmanın avantajları

restrict-properties'ün iki temel kullanım alanı vardır:

Siteler arası sızıntıları kesinti olmadan önleme

Varsayılan olarak tüm web siteleri uygulamanızı bir pop-up'ta açıp bununla ilgili bir referans alabilir.

Kötü amaçlı bir web sitesi, siteler arası sızıntılar gibi saldırılar gerçekleştirmek için bu durumu kendi avantajına kullanabilir. Bu riski azaltmak için Cross-Origin-Opener-Policy (COOP) üstbilgisini kullanabilirsiniz.

Cross-Origin-Opener-Policy ile ilgili seçenekleriniz şimdiye kadar sınırlıydı. Aşağıdakilerden birini yapabilirsiniz:

  • Pop-up'larla kaynaktan kaynakta tüm etkileşimleri engelleyen same-origin, ayarını yapın.
  • Sitenizi pop-up'ta açan tüm kaynak dışı etkileşimleri engelleyen same-origin-allow-popups değerini ayarlayın.
  • Pop-up'larla kaynakta çapraz etkileşimlere izin veren unsafe-none değerini ayarlayın.

Bu durum, bir pop-up'ta açılması ve COOP'u zorunlu kılmak için açıcısıyla etkileşime geçmesi gereken web sitelerinin çalışmasını engelledi. Bu da tek oturum açma ve ödemeler gibi önemli kullanım alanlarını siteler arası sızıntılara karşı korunmuyordu.

Cross-Origin-Opener-Policy: restrict-properties bu sorunu çözer.

restrict-properties ile, çerçeve sayımı ve diğer siteler arası sızıntı saldırıları için kullanılabilecek özellikler kullanılamaz. Ancak postMessage ve closed üzerinden pencereler arasında temel iletişime izin verilir.

Bu sayede, temel kullanım alanları korunurken sitenin güvenliği de artar. Örneğin:

  • Pop-up'ta hizmet sağlıyorsanız Cross-Origin-Opener-Policy: restrict-properties politikasını ayarlamak, kendinizi bir dizi siteler arası sızıntı saldırılarına karşı korur. Daha önce açabildiğiniz tüm sayfaları açmaya devam edebilirsiniz.
  • Kaynaklar arası bir pop-up'a erişmeniz gerekiyorsa Cross-Origin-Opener-Policy: restrict-properties ayarını yapmak, sitenizi iframe sayımından benzer şekilde korur. Bugün açabildiğiniz pop-up'ları açabilirsiniz.
  • Hem açan hem de açılan sayfa başlığı ayarlarsa ve sayfalar farklı kaynaklardan geliyorsa başlık, bunlardan birinin ayarlamasına benzer şekilde davranır. Aynı kaynaktan geliyorlarsa tam erişim izni verilir.

Sitenizi kökler arası erişime kapalı hale getirme

Kökler arası erişime kapalılığa neden ihtiyacımız var?

Bazı web API'leri, Spectre gibi yan kanal saldırılarının riskini artırır. Tarayıcılarda, bu riski azaltmak için kökler arası izolasyon adı verilen etkinleştirmeye dayalı bir izole ortam sunulur. Kökler arası erişime kapalı durumda web sayfası, daha iyi çözünürlükle sunulan SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve yüksek hassasiyetli zamanlayıcılar gibi ayrıcalıklı özellikleri kullanabilir ve etkinleştirilmediği sürece kaynağı diğer kullanıcılardan izole edebilir.

Bu API'leri kullanmak için şimdiye kadar Cross-Origin-Opener-Policy: same-origin ayarını yapmanız gerekiyordu. Ancak bu durumda, tek oturum açma ve Payments gibi ihtiyaç duyabileceğiniz kaynakta çapraz pop-up akışı bozulur.

Kökler arası izolasyonu etkinleştirmek için artık Cross-Origin-Opener-Policy: same-origin yerine Cross-Origin-Opener-Policy: restrict-properties kullanılabilir. Başlangıç ilişkisini kesmek yerine yalnızca window.postMessage() ve window.closed öğelerinin minimum iletişim alt kümesiyle kısıtlar.

Kaynaklar arası izolasyonu aşağıdaki iki başlıkla etkinleştirebilirsiniz:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

veya

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

credentialless hakkında daha fazla bilgiyi COEP: credentialless kullanarak kaynakta çapraz kaynaklı kaynakları CORP başlıkları olmadan yükleme başlıklı makalede bulabilirsiniz.

Demo

Bu kaynak ayırma denemesinde çeşitli başlık seçeneklerini deneyin.

Kaynak denemesini deneyin

Cross-Origin-Opener-Policy: restrict-properties ile deneme yapmak için kaynak denemeyi etkinleştirin.

Tarayıcı desteği

Cross-Origin-Opener-Policy: restrict-properties şu anda yalnızca Chrome'da desteklenmektedir. Diğer tarayıcılar da standartlaştırma tartışmalarına etkin bir şekilde katılım gösterir.

SSS

Web sitemin aynı kaynaklı pop-up'larla iletişim kurması gerekiyor. Kökler arası erişime kapalı pop-up'ları etkinleştirmek için COOP: restrict-properties kullanmalı mıyım?

Hem pop-up'ta hem de ana sayfanızda COOP: restrict-properties ayarını yapmak kısıtlamalara neden olmaz. Bu ayarı yalnızca pop-up'ta veya yalnızca ana sayfada ayarlamak, aynı kaynakta olsalar bile postMessage ve closed dışındaki mülklere açıcı genelinde erişimi engeller.

İzin verilen özellikler grubu sabit mi?

Şu ana kadar aldığımız geri bildirimler doğrultusunda, window.postMessage ve window.closed'ün iş akışlarının çoğu için yeterli olacağı düşünülüyor ancak bu özelliği diğer mülklere de sunmayı düşünüyoruz. Yalnızca postMessage ve closed kullanılarak çözülemeyen bir kullanım alanınız varsa geri bildiriminizi Deneme Amacıyla İlgili Mesaj dizisinde bırakın.

Kaynaklar