COOP ve COEP kullanarak web sitenizi "kökenler arası erişime kapalı" hale getirme

Kökler arası erişime kapalı bir ortam oluşturmak ve SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve yüksek çözünürlüklü zamanlayıcı gibi güçlü özellikleri daha hassas bir şekilde etkinleştirmek için COOP ve COEP'yi kullanın.

Eiji Kitamura

Güncellemeler

• 21 Haziran 2022: Kökenler arası yalıtım etkinleştirildiğinde işleyici komut dosyalarının da dikkatli kullanılması gerekir. Bazı açıklamalar eklendi.
• 5 Ağustos 2021: JS Self-Profiling API, kaynak ötesi izolasyon gerektiren API'lerden biri olarak belirtilmişti ancak yöndeki son değişikliği yansıtmak için kaldırıldı.
• 6 Mayıs 2021: Aldığımız geri bildirimler ve bildirilen sorunlar doğrultusunda, Chrome M92'de çapraz kaynak izolasyonu uygulanmayan sitelerde SharedArrayBuffer kullanımının kısıtlanacağı zaman çizelgesini düzenlemeye karar verdik.
• 16 Nisan 2021: Kaynaklar arası yalıtım için yeni bir COEP kimlik bilgisi gerektirmeyen mod ve COOP aynı kaynakta pop-up'lara izin verilecek şekilde gevşek bir koşul hakkında notlar eklendi.
• 5 Mart 2021: SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve hata ayıklama işlevleriyle ilgili sınırlamalar kaldırıldı. Bu işlevler artık Chrome 89'da tam olarak etkinleştirildi. Daha yüksek doğruluk sunacak performance.now() ve performance.timeOrigin özellikleri eklendi.
• 19 Şubat 2021: Geliştirici Araçları'ndaki özellik politikası ve hata ayıklama işlevi hakkında bir not eklendiallow="cross-origin-isolated".
• 15 Ekim 2020: self.crossOriginIsolated, Chrome 87'den itibaren kullanılabilir. Bu nedenle, self.crossOriginIsolated true döndürdüğünde document.domain değiştirilemez. performance.measureUserAgentSpecificMemory(), kaynak deneme sürümünü sonlandırıyor ve Chrome 89'da varsayılan olarak etkinleştiriliyor. Android Chrome'da paylaşılan dizi arabelleği, Chrome 88'den itibaren kullanılabilir.

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ı erişime kapalı olarak adlandırılan, etkinleştirmeye dayalı bir izole ortam sunulur. Kaynaklar arası yalıtılmış durumdayken web sayfası aşağıdakiler gibi ayrıcalıklı özellikleri kullanabilir:

Kökler arası erişime kapalı durum, document.domain öğesinin değiştirilmesini de engeller. (document.domain değerini değiştirmek, aynı sitedeki dokümanlar arasında iletişime izin verir ve aynı kaynak politikasında bir boşluk olarak kabul edilir.)

Kökler arası izole durumu etkinleştirmek için ana dokümanda aşağıdaki HTTP üst bilgilerini göndermeniz gerekir:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Bu üstbilgiler, tarayıcıya kaynak veya kaynak dışı dokümanlar tarafından yüklenmesi etkinleştirilmemiş iframe'lerin yüklenmesini engellemesini ve kaynak dışı pencerelerin dokümanınızla doğrudan etkileşim kurmasını önlemesini söyler. Bu, kökler arası yüklenen kaynakların etkinleştirilmesini gerektirdiği anlamına da gelir.

Bir web sayfasının kökler arası erişime kapalı durumda olup olmadığını self.crossOriginIsolated değerini inceleyerek belirleyebilirsiniz.

Bu makalede, bu yeni üstbilgilerin nasıl kullanılacağı gösterilmektedir. Sonraki bir makalede daha fazla arka plan bilgisi ve bağlam bilgisi vereceğim.

Web sitenizi kaynakta izole hale getirmek için COOP ve COEP'yi dağıtma

COOP ve COEP'yi entegre etme

1. Üst düzey belgede Cross-Origin-Opener-Policy: same-origin başlığını ayarlama

Üst düzey bir dokümanda COOP: same-origin etkinleştirildiğinde, aynı COOP ayarıyla aynı kaynakta olmadıkları sürece aynı kaynağa sahip pencereler ve dokümandan açılan pencereler ayrı bir tarama bağlamı grubuna sahip olur. Böylece, açık pencereler için yalıtım uygulanır ve her iki pencere arasındaki karşılıklı iletişim devre dışı bırakılır.

Tarama bağlamı grubu, birbirine referans verebilecek bir pencere grubudur. Örneğin, <iframe> aracılığıyla yerleştirilmiş bir üst düzey doküman ve alt dokümanları. Bir web sitesi (https://a.example) pop-up pencere (https://b.example) açarsa açan pencere ile pop-up pencere aynı tarama bağlamını paylaşır. Bu nedenle, window.opener gibi DOM API'leri aracılığıyla birbirlerine erişebilirler.

Pencereyi açan kullanıcının ve pencereyi açan kullanıcının ayrı tarama bağlamı gruplarında olup olmadığını Geliştirici Araçları'ndan kontrol edebilirsiniz.

2. Kaynaklarda CORP veya CORS'un etkinleştirildiğinden emin olun

Sayfadaki tüm kaynakların CORP veya CORS HTTP üstbilgileriyle yüklendiğinden emin olun. Bu adım, dördüncü adım olan COEP'yi etkinleştirme için gereklidir.

Kaynağın türüne bağlı olarak yapmanız gerekenler şunlardır:

• Kaynağın yalnızca aynı kaynaktan yüklenmesi bekleniyorsa Cross-Origin-Resource-Policy: same-origin üst bilgisini ayarlayın.
• Kaynağın yalnızca aynı siteden ancak farklı kaynaktan yüklenmesi bekleniyorsa Cross-Origin-Resource-Policy: same-site üst bilgisini ayarlayın.
• Kaynak kontrolünüz altındaki farklı kaynaklardan yükleniyorsa mümkünse Cross-Origin-Resource-Policy: cross-origin başlığını ayarlayın.
• Kontrolünüz dışındaki kaynakta bulunan kaynaklar için:
  • Kaynak CORS ile sunuluyorsa yükleme HTML etiketinde crossorigin özelliğini kullanın. (Örneğin, <img src="***" crossorigin>.)
  • Kaynağın sahibinden CORS veya CORP'u desteklemesini isteyin.
• iFrame'ler için yukarıdakilerle aynı ilkeleri uygulayın ve Cross-Origin-Resource-Policy: cross-origin (veya bağlama bağlı olarak same-site, same-origin) değerini ayarlayın.
• WebWorker ile yüklenen komut dosyaları aynı kaynaktan sunulmalıdır. Bu nedenle, CORP veya CORS başlıklarına ihtiyacınız yoktur.
• COEP: require-corp ile sunulan bir belge veya işleyici için CORS olmadan yüklenen merkezler arası alt kaynaklar, Cross-Origin-Resource-Policy: cross-origin başlığını yerleştirilmeyi etkinleştirecek şekilde ayarlamalıdır. Örneğin, bu durum <script>, importScripts, <link>, <video>, <iframe> vb. için geçerlidir.

3. Yerleşik kaynakları değerlendirmek için COEP Yalnızca Raporlama HTTP üst bilgisini kullanma

COEP'yi tam olarak etkinleştirmeden önce, politikanın gerçekten çalışıp çalışmadığını incelemek için Cross-Origin-Embedder-Policy-Report-Only üstbilgisini kullanarak kuru çalıştırma yapabilirsiniz. Yerleştirilmiş içeriği engellemeden rapor alırsınız.

Bunu üst düzey belge, iFrame'ler ve işleyici komut dosyaları dahil tüm belgelere yinelemeli olarak uygulayın. Yalnızca Raporlama HTTP başlığı hakkında bilgi edinmek için Reporting API'yi kullanarak sorunları gözlemleme başlıklı makaleyi inceleyin.

4. COEP'yi etkinleştirme

Her şeyin çalıştığından ve tüm kaynakların başarıyla yüklenebileceğinden emin olduktan sonra Cross-Origin-Embedder-Policy-Report-Only başlığını, iframe'ler ve işleyici komut dosyaları aracılığıyla yerleştirilenler de dahil olmak üzere tüm belgelerde aynı değere sahip Cross-Origin-Embedder-Policy başlığıyla değiştirin.

self.crossOriginIsolated ile izolasyonun başarılı olup olmadığını belirleme

Web sayfası kaynak ötesi izole durumdayken ve tüm kaynaklar ile pencereler aynı tarama bağlamı grubunda izole edildiğinde self.crossOriginIsolated mülkü true değerini döndürür. Tarama bağlamı grubunu başarıyla izole edip performance.measureUserAgentSpecificMemory() gibi güçlü özelliklere erişip erişmediğinizi belirlemek için bu API'yi kullanabilirsiniz.

Chrome Geliştirici Araçları'nı kullanarak sorunları ayıklama

Resimler gibi ekranda oluşturulan kaynaklarda istek engelleneceği ve sayfada eksik resim gösterileceği için COEP sorunlarını tespit etmek oldukça kolaydır. Ancak komut dosyaları veya stiller gibi görsel bir etkisi olmayan kaynaklarda COEP sorunları fark edilmeyebilir. Bu tür veriler için Geliştirici Araçları Ağ panelini kullanın. COEP ile ilgili bir sorun varsa Durum sütununda (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) görürsünüz.

Ardından, daha fazla ayrıntı görmek için girişi tıklayabilirsiniz.

Uygulama panelinden de iframe'lerin ve pop-up pencerelerin durumunu belirleyebilirsiniz. Kaynak yapısının dökümünü görmek için sol taraftaki "Çerçeveler" bölümüne gidin ve "üst"ü genişletin.

iframe'ın durumunu (ör. SharedArrayBuffer'ın kullanılabilirliği) kontrol edebilirsiniz.

Pop-up pencerelerin durumunu (ör. kaynak ayırma olup olmadığı) da kontrol edebilirsiniz.

Reporting API'yi kullanarak sorunları gözlemleme

Reporting API, çeşitli sorunları tespit edebileceğiniz başka bir mekanizmadır. Reporting API'yi, COEP bir kaynağın yüklenmesini engellediğinde veya COOP bir pop-up pencereyi izole ettiğinde kullanıcılarınızın tarayıcısına rapor göndermesini talimat verecek şekilde yapılandırabilirsiniz. Chrome, COEP ve COOP dahil olmak üzere çeşitli kullanımlar için 69 sürümünden beri Reporting API'yi desteklemektedir.

Reporting API'yi nasıl yapılandıracağınızı ve rapor alabilecek bir sunucu nasıl oluşturacağınızı öğrenmek için Reporting API'yi kullanma başlıklı makaleyi inceleyin.

Örnek COEP raporu

Kaynaklar arası kaynak engellendiğinde örnek bir COEP raporu yükü şöyle görünür:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Örnek COOP raporu

Bir pop-up pencere tek başına açıldığında örnek bir COOP raporu yükü şöyle görünür:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Farklı tarama bağlamı grupları birbirine erişmeye çalıştığında (yalnızca "yalnızca rapor" modunda) COOP da bir rapor gönderir. Örneğin, postMessage() girişiminde bulunulduğunda oluşturulan rapor aşağıdaki gibi görünür:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Sonuç

Bir web sayfasını özel bir kaynaktan kaynakta izole edilmiş duruma almak için COOP ve COEP HTTP üstbilgilerinin bir kombinasyonunu kullanın. Bir web sayfasının kaynaktan bağımsız izole durumda olup olmadığını belirlemek için self.crossOriginIsolated öğesini inceleyebilirsiniz.

Bu kaynaktan kaynaka yalıtılmış durumda yeni özellikler kullanıma sunulduğunda ve COOP ile COEP ile ilgili DevTools'ta daha fazla iyileştirme yapıldığında bu yayını güncellemeye devam edeceğiz.

Kaynaklar

• Güçlü özellikler için "kökler arası erişime kapalı" özelliğine neden ihtiyacınız var?
• Kaynaklar arası izolasyonu etkinleştirme kılavuzu
• Android Chrome 88 ve masaüstü Chrome 92'de SharedArrayBuffer güncellemeleri
• measureUserAgentSpecificMemory() ile web sayfanızın toplam bellek kullanımını izleme