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

Kaynaklar 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 yüksek hassasiyetle etkinleştirmek için COOP ve COEP'yi kullanın.

Eiji Kitamura

Güncellemeler

• 21 Haziran 2022: Kökler arası erişime kapalı olduğunda çalışan komut dosyalarının da dikkatli olması gerekir. Bazı açıklamalar eklendi.
• 5 Ağustos 2021: JS Kendi Kendine Profil Oluşturma API'sinin, çapraz kaynak izolasyonu gerektiren ancak yönte yakın zamanda yapılan değişikliği yansıtan API'lerden biri olduğu söylenerek kaldırıldı.
• 6 Mayıs 2021: Bildirilen geri bildirimlere ve bildirilen sorunlara dayanarak, kökler arası erişime kapalı hiçbir sitedeki SharedArrayBuffer kullanımıyla ilgili zaman çizelgesini Chrome M92'de kısıtlanmayacak şekilde düzenlemeye karar verdik.
• 16 Nisan 2021: Kaynaklar arası izolasyon için yeni bir COEP kimlik bilgisi içermeyen modu ve COOPsame-origin-allow-popups'ın rahat bir koşul olması hakkında notlar eklendi.
• 5 Mart 2021: SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve hata ayıklama işlevleri için sınırlamalar kaldırıldı. Bunlar artık Chrome 89'da tamamen etkin durumdadır. Yakında daha yüksek doğruluk sağlayacak performance.now() ve performance.timeOrigin özellikleri eklendi.
• 19 Şubat 2021: Geliştirici Araçları'na özellik politikası allow="cross-origin-isolated" ve hata ayıklama işlevi hakkında not eklendi.
• 15 Ekim 2020: self.crossOriginIsolated, Chrome 87'de kullanılabilir. Buna göre, self.crossOriginIsolated true değerini döndürdüğünde document.domain sabittir. performance.measureUserAgentSpecificMemory(), kaynak denemesini sona erdiriyor ve Chrome 89'da varsayılan olarak etkin. 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ı riskini artırır. Tarayıcılar bu riski azaltmak için kökler arası erişime kapalı olarak adlandırılan, tercihe dayalı yalıtılmış bir ortam sunar. Kökler arası erişime kapalı web sayfası, aşağıdakiler de dahil olmak üzere ayrıcalıklı özellikleri kullanabilir:

Kökler arası erişime kapalı durum, document.domain üzerinde değişiklik yapılmasını da engeller. (document.domain değiştirebilme olanağı, aynı site belgeleri arasında iletişime olanak tanır ve aynı kaynak politikasında güvenlik açığı olarak kabul edilir.)

Kökler arası erişime kapalı durumu etkinleştirmek için ana belgede aşağıdaki HTTP üst bilgilerini göndermeniz gerekir:

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

Bu üst bilgiler, tarayıcıya, kaynaklar arası belgeler tarafından yüklenmeyi etkinleştirmemiş kaynak veya iframe'lerin yüklenmesini engelleme talimatı verir ve kaynaklar arası pencerelerin dokümanınızla doğrudan etkileşim kurmasını engeller. Bu aynı zamanda, kaynaklar arası yüklenen kaynaklar için etkinleştirme yapılması gerektiği anlamına gelir.

self.crossOriginIsolated bölümünü inceleyerek bir web sayfasının kökler arası erişime kapalı durumda olup olmadığını belirleyebilirsiniz.

Bu makalede, söz konusu yeni başlıkların nasıl kullanılacağı gösterilmektedir. Takip eden makalede bu konu hakkında daha fazla bilgi ve bağlam sunacağım.

Web sitenizi kökler arası erişime kapalı hale getirmek için COOP ve COEP dağıtın

COOP ve COEP'yi entegre edin

1. Üst düzey dokümanda Cross-Origin-Opener-Policy: same-origin üstbilgisini ayarlayın

COOP: same-origin üst düzey bir dokümanda etkinleştirildiğinde aynı kaynağa sahip pencereler ve dokümandan açılan pencereler, aynı COOP ayarına sahip aynı kaynakta olmadıkları sürece ayrı bir göz atma içerik grubuna sahip olur. Bu nedenle, açık pencerelerde izolasyon uygulanır ve iki pencere arasındaki karşılıklı iletişim devre dışı bırakılır.

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

Pencere açıcının ve onu açan kişinin ayrı göz atma bağlam gruplarında olup olmadığını Geliştirici Araçları'ndan kontrol edebilirsiniz.

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

Sayfadaki tüm kaynakların CORP veya CORS HTTP üst bilgileri ile yüklendiğinden emin olun. Bu adım, 4. adım olan COEP'nin etkinleştirilmesi için gereklidir.

Kaynağın niteliğine 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 çapraz kaynak üzerinden yüklenmesi bekleniyorsa Cross-Origin-Resource-Policy: same-site üst bilgisini ayarlayın.
• Kaynak, kontrolünüz altındaki çapraz kaynaklardan yüklendiyse mümkünse Cross-Origin-Resource-Policy: cross-origin başlığını ayarlayın.
• Kontrolünüz dışındaki kaynaklar arası kaynaklar için:
  • Kaynak, CORS ile yayınlanıyorsa yükleme HTML etiketinde crossorigin özelliğini kullanın. (Örneğin, <img src="***" crossorigin>.)
  • Kaynağın sahibinden CORS veya CORP'yi desteklemesini isteyin.
• iframe'ler için yukarıdaki aynı ilkeleri uygulayın ve Cross-Origin-Resource-Policy: cross-origin (veya bağlama göre same-site, same-origin) ayarlayın.
• WebWorker ile yüklenen komut dosyaları aynı kaynaktan sunulmalıdır. Bu nedenle CORP veya CORS başlıkları gerekmez.
• COEP: require-corp ile yayınlanan bir doküman veya çalışan söz konusu olduğunda, CORS olmadan yüklenen kaynaklar arası alt kaynaklar, Cross-Origin-Resource-Policy: cross-origin üst bilgisini yerleştirmeyi etkinleştirecek şekilde ayarlamalıdır. Örneğin bu, <script>, importScripts, <link>, <video>, <iframe> vb. için geçerlidir.

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

COEP'i tamamen etkinleştirmeden önce, politikanın gerçekten işe yarayıp yaramadığını incelemek için Cross-Origin-Embedder-Policy-Report-Only başlığını kullanarak bir prova yapabilirsiniz. Raporlarınızı, yerleştirilmiş içeriği engellemeden alırsınız.

Bunu üst düzey doküman, iframe'ler ve çalışan komut dosyaları da dahil olmak üzere tüm dokümanlara yinelenen şekilde uygulayın. Yalnızca Rapor HTTP başlığı hakkında bilgi için Raporlama API'sini kullanarak sorunları gözlemleme bölümüne bakın.

4. COEP'yi etkinleştir

Her şeyin çalıştığını ve tüm kaynakların başarıyla yüklenebildiğini onayladıktan sonra Cross-Origin-Embedder-Policy-Report-Only üstbilgisini, iframe'ler ve çalışan komut dosyaları aracılığıyla yerleştirilmiş olanlar da dahil olmak üzere tüm belgelerde aynı değere sahip Cross-Origin-Embedder-Policy üst bilgisine geçirin.

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

self.crossOriginIsolated özelliği, web sayfası kökler arası erişime kapalı durumda olduğunda ve tüm kaynaklar ile pencereler aynı tarama bağlam grubu içinde izole edildiğinde true sonucunu döndürür. Tarama içerik grubunu başarılı bir şekilde izole edip etmediğinizi ve performance.measureUserAgentSpecificMemory() gibi güçlü özelliklere erişim elde edip etmediğinizi belirlemek için bu API'yi kullanabilirsiniz.

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

Ekranda oluşturulan resimler gibi kaynaklar için, istek engelleneceği ve sayfada eksik bir resmi belirteceği için COEP sorunlarını tespit etmek oldukça kolaydır. Ancak komut dosyaları veya stiller gibi görsel bir etkiye sahip olmayan kaynaklar için COEP sorunları fark edilemeyebilir. Bunlar için DevTools Network (Ağ) panelini kullanın. COEP ile ilgili sorun varsa Durum sütununda (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) değerini görürsünüz.

Daha fazla ayrıntı görmek için girişi tıklayabilirsiniz.

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

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

Ayrıca, pop-up pencerelerin durumunu, merkezler arası erişime kapalı olup olmadığı gibi 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, kullanıcılarınızın tarayıcısına, COEP bir kaynağın yüklenmesini engellediğinde veya COOP bir pop-up pencereyi ayırdığında rapor göndermesini bildirecek şekilde yapılandırabilirsiniz. Chrome, 69 sürümünden beri Reporting API'yi COEP ve COOP gibi çeşitli amaçlarla desteklemektedir.

Reporting API'yi nasıl yapılandıracağınızı ve raporları alacak bir sunucu ayarlamayı öğrenmek için Reporting API'yi kullanma bölümüne gidin.

Örnek COEP raporu

Kaynaklar arası kaynak engellendiğinde alınan örnek COEP raporu yükü şu şekilde 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

İzole edilmiş bir pop-up pencere açıldığında gösterilen 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ı göz atma içerik grupları birbirine erişmeye çalıştığında (yalnızca "yalnızca rapor" modunda) COOP bir rapor gönderir. Örneğin, postMessage() girişiminde bulunulan bir 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ı kökler arası özel bir duruma sokmak için COOP ve COEP HTTP üst bilgilerinin bir kombinasyonunu kullanın. Bir web sayfasının kaynaklar arası erişime kapalı durumda olup olmadığını belirlemek için self.crossOriginIsolated uygulamasını inceleyebilirsiniz.

Kökler arası erişime kapalı bu durumda yeni özellikler kullanıma sunuldukça ve Geliştirici Araçları'nda COOP ve COEP ile ilgili ek iyileştirmeler yapıldıkça bu yayını güncellemeye devam edeceğiz.

Kaynaklar

• Güçlü özellikler için neden "kaynaklar arası erişime" ihtiyacınız var?
• Çapraz kaynak izolasyonunu etkinleştirme kılavuzu
• Android Chrome 88 ve masaüstü Chrome 92'de SharedArrayBuffer güncellemeleri
• Web sayfanızın toplam bellek kullanımını measureUserAgentSpecificMemory() ile izleyin