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

Cross-Origin Opener Policy (COOP) için yeni bir değer kullanıma sunuldu: restrict-properties. Güvenlik avantajları sunar ve sitenizin ödeme, kimlik doğrulama veya diğer kullanım alanları için üçüncü taraf pop-up'larıyla etkileşim kurmasına olanak tanırken kaynaklar arası yalıtımı benimsemeyi kolaylaştırır.

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

restrict-properties neden kullanılmalı?

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

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

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

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

Şimdiye kadar Cross-Origin-Opener-Policy ile ilgili seçenekleriniz sınırlıydı. Aşağıdaki yöntemlerden birini uygulayabilirsiniz:

  • Pop-up'larla kaynaklar arası tüm etkileşimleri engelleyen same-origin, ayarını yapın.
  • Sitenizi pop-up'ta açan tüm kaynaklar arası etkileşimleri engelleyen same-origin-allow-popups'yı ayarlayın.
  • unsafe-none değerini ayarlayın. Bu değer, pop-up'larla kaynaklar arası tüm etkileşimlere izin verir.

Bu durum, pop-up pencerede açılması ve açan pencereyle etkileşimde bulunması gereken web sitelerinin COOP'u zorunlu kılmasını imkansız hale getiriyordu. Bu durum, tek oturum açma ve ödemeler gibi önemli kullanım alanlarının siteler arası sızıntılara karşı korunmamasına neden oldu.

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, temel kullanım alanlarını korurken sitenin güvenliğini artırır. Örneğin:

  • Pop-up pencerede hizmet sunuyorsanız Cross-Origin-Opener-Policy: restrict-properties ayarını yaparak kendinizi çeşitli siteler arası sızıntı saldırılarına karşı 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ı, sitenizi iframe sayımından benzer şekilde korur. Bugün açabildiğiniz pop-up'ları açmaya devam edebilirsiniz.
  • Hem açan hem de açılan, başlığı ayarlarsa ve sayfalar kaynaklar arasıysa bu durum, başlığı ayarlayanlardan birinin davranışına benzer. Aynı kaynaklıysa tam erişim verilir.

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

Neden kökler arası erişime kapalı olmamız gerekiyor?

Bazı web API'leri, Spectre gibi yan kanal saldırısı riskini artırır. Bu riski azaltmak için tarayıcılar, kökler arası erişimin kapatılması adı verilen, etkinleştirme tabanlı bir yalıtılmış ortam sunar. Kökler arası erişime kapalı durumda web sayfası, SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve yüksek hassasiyetli zamanlayıcılar gibi ayrıcalıklı özellikleri daha iyi çözünürlükle kullanabilir. Ayrıca, kaynak açıkça izin verilmediği sürece diğerlerinden izole edilir.

Şimdiye kadar bu API'leri kullanmak için Cross-Origin-Opener-Policy: same-origin ayarlamanız gerekiyordu. Ancak bu durumda, tek oturum açma ve ödemeler gibi ihtiyacınız olabilecek tüm kaynaklar arası pop-up akışları 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 kesmek yerine, yalnızca window.postMessage() ve window.closed'nin minimum iletişim alt kümesiyle kısıtlar.

Aşağıdaki iki başlığı kullanarak kaynaklar arası yalıtımı 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 edinmek için COEP: credentialless kullanarak CORP üstbilgileri olmadan kaynaklar arası kaynakları yükleme başlıklı makaleyi inceleyin.

Demo

Bu kaynaklar arası izolasyon demosunda çeşitli başlık seçeneklerini deneyin.

Kaynak denemesiyle denemeler yapın

Cross-Origin-Opener-Policy: restrict-properties ile deneme yapmak için kaynak denemesine kaydolun.

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ışmasına aktif olarak katılmaktadır.

SSS

Web sitemin aynı kaynaklı 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ı belirlemek kısıtlamalara neden olmaz. Bu ayarı yalnızca pop-up'ta veya yalnızca ana sayfada ayarlamak, aynı kaynaklı olsalar bile açıcıdaki postMessage ve closed dışındaki mülklere erişimi engeller.

İzin verilen özellikler grubu sabit mi?

Şu ana kadar alınan geri bildirimlere göre, iş akışlarının büyük çoğunluğu için window.postMessage ve window.closed yeterli olacak gibi görünüyor ancak bu özelliği diğer mülklere de açmayı değerlendirmeye devam ediyoruz. Yalnızca postMessage ve closed kullanılarak çözülemeyen bir kullanım alanınız varsa geri bildiriminizi Deneme Yapma Amacı başlıklı ileti dizisinde paylaşın.

Kaynaklar