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 kullanıma sunuldu: 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, herhangi bir web sitesi uygulamanızı bir pop-up'ta açabilir ve uygulamaya 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çanlarıyla etkileşime geçmesi gereken web sitelerinin çalışmasını engelledi. Bu durum, tek oturum açma ve ödemeler gibi önemli kullanım alanlarını siteler arası sızıntılara karşı korumasız bıraktı.

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 aracılığıyla pencereler arasında temel iletişime izin verilir.

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

  • Bir pop-up'ta hizmet sunuyorsanız Cross-Origin-Opener-Policy: restrict-properties ayarını yaparak siteler arası sızıntı saldırılarına karşı kendinizi koruyabilirsiniz. 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 kaynak farklıysa 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ı durumdayken web sayfası, SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve yüksek hassasiyetli zamanlayıcılar gibi ayrıcalıklı özellikleri daha iyi çözünürlükte kullanabilir. Bu durumda, etkinleştirilmediği sürece kök diğerlerinden izole edilir.

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. Açıcı ilişkisini sonlandırmak yerine, yalnızca window.postMessage() ve window.closed'un minimum iletişim alt kümesiyle kısıtlar.

Kökler arası izolasyonu aşağıdaki iki üstbilgeyle 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 orijinal 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ırmayla ilgili tartışmalara aktif olarak katılıyor.

SSS

Web sitemin aynı kaynaktaki pop-up'larla iletişim kurması gerekiyor. Kökler arası erişimi kapatmak 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