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

Pop-up'larla etkileşimde bulunurken kökler arası erişime kapalı web siteleri ve siteler arası sızıntı korumasından yararlanın.

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 açısından avantajlar sağlar ve sitenizin ödemeler, kimlik doğrulama veya diğer kullanım alanları için üçüncü taraf pop-up'larla etkileşim kurmasına izin verirken kaynaklar arası erişime kapalı tutulmasını kolaylaştırır.

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

Neden restrict-properties kullanmalısınız?

restrict-properties iki temel kullanım alanına sahiptir:

Bozulmadan siteler arası sızıntıları önleyin

Varsayılan olarak, herhangi bir web sitesi uygulamanızı bir pop-up pencerede açabilir ve uygulamanıza referans verebilir.

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

Şimdiye kadar Cross-Origin-Opener-Policy seçenekleriniz sınırlıydı. Şunlardan birini yapabilirsiniz:

  • Pop-up'larla kaynaklar arası tüm etkileşimleri engelleyen same-origin, ayarlayın.
  • Sitenizi bir pop-up'ta açan tüm çapraz kaynak etkileşimlerini engelleyen same-origin-allow-popups ayarını ayarlayın.
  • Pop-up'larla kaynaklar arası tüm etkileşimlere izin veren unsafe-none ayarını belirleyin.

Bu durum, web sitelerinin bir pop-up içinde açılması ve COOP'yi zorunlu kılmak için açıcıyla etkileşimde bulunmasını imkansız hale getiriyordu. Bu durum, tek oturum açma ve ödemeler gibi önemli kullanım alanlarını siteler arası sızıntılara karşı korumazdı.

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

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

Bu, temel kullanım alanlarını korurken sitenin güvenliğini artırır. Örneğin:

  • Pop-up pencerede hizmet sağlıyorsanız Cross-Origin-Opener-Policy: restrict-properties ayarını yapmak kendinizi siteler arası sızıntı saldırılarına karşı koruyacaktır. Daha önce açabildiğiniz tüm sayfaları açmaya devam edebilirsiniz.
  • Kaynaklar arası pop-up'a erişmeniz gerekirse Cross-Origin-Opener-Policy: restrict-properties ayarı da benzer şekilde sitenizi iframe sayımına karşı korur. Bugün açabildiğiniz aynı pop-up grubunu açabilirsiniz.
  • Hem açan hem de açacak kişi başlığı ayarladıysa ve sayfalar çapraz kaynaksa bu başlık, iki taraftan birinin başlığı ayarlamasına benzer şekilde davranır. Bunlar aynı kaynaksa tam erişim verilir.

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

Kökler arası erişime neden ihtiyacımız var?

Bazı web API'leri, Spectre gibi yan kanal saldırıları riskini artırır. Tarayıcılar bu riski azaltmak için kökler arası izolasyon adı verilen tercihe dayalı yalıtılmış bir ortam sunar. Kaynaklar arası erişime kapalı durumdayken web sayfası, daha iyi çözünürlüğe sahip SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve yüksek hassasiyetli zamanlayıcılar gibi ayrıcalıklı özellikleri kullanabilir. Aynı zamanda, etkinleştirilmedikleri sürece kaynağı diğerlerinden izole eder.

Şimdiye kadar bu API'leri kullanmak için Cross-Origin-Opener-Policy: same-origin ayarlarını yapmanız gerekiyordu. Ancak bu, tek oturum açma ve Ödemeler gibi ihtiyaç duyabileceğiniz tüm kaynaklar arası pop-up akışını kesintiye uğratır.

Kökler arası erişime izin vermek için artık Cross-Origin-Opener-Policy: same-origin yerine Cross-Origin-Opener-Policy: restrict-properties kullanılabilir. Açan ilişkisini kesmek yerine, bunu yalnızca window.postMessage() ve window.closed şeklindeki minimum iletişim alt kümesiyle kısıtlar.

Kökler arası izolasyonu aşağıdaki iki üst bilgiyle 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 bilgi için COEP: credentialless kullanarak CORP başlıkları olmadan kaynaklar arası kaynakları yükleme bölümüne bakın.

Demografi

Bu çapraz kaynak izolasyonu demosunda çeşitli başlık seçeneklerini deneyin.

Kaynak denemesi ile denemeler yapma

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

Tarayıcı desteği

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

SSS

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

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

İzin verilen özellik grubu sabit mi?

Şu ana kadarki geri bildirimlere göre, window.postMessage ve window.closed öğelerinin iş akışlarının büyük kısmı için yeterli olduğundan şüpheleniliyor, ancak bu ürünü başka mülklere de sunmayı düşünüyoruz. Yalnızca postMessage ve closed kullanılarak çözülemeyen bir kullanım alanınız varsa Deneme Amacı iş parçacığıyla ilgili geri bildirimde bulunun.

Kaynaklar