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

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

Eiji Kitamura

Yayınlanma tarihi: 13 Nisan 2020, Son güncelleme tarihi: 21 Haziran 2022

Dikkat: Chrome 92'den itibaren Chrome masaüstünde SharedArrayBuffer için kökler arası erişime kapalı olma özelliği gerekir. Daha fazla bilgi için SharedArrayBuffer güncellemeleri başlıklı makaleyi inceleyin.

Bu dokümanda, COOP ve COEP'nin nasıl kullanılacağı gösterilmektedir. Bunun neden önemli olduğu hakkında daha fazla bilgiyi COOP ve COEP kullanarak web sitenizi "kökler arası erişime kapalı" hale getirme başlıklı makalede bulabilirsiniz.

Bazı web API'leri, Spectre gibi yan kanal saldırısı riskini artırır. Tarayıcılar, bu riski azaltmak için kökler arası erişime kapalı adı verilen, etkinleştirme tabanlı ve izole bir ortam sunar. Kökler arası erişime kapalı durumda web sayfası, aşağıdakiler gibi ayrıcalıklı özellikleri kullanabilir:

Kökler arası erişime kapalı durumda kullanılabilen özellikler

API	Açıklama
SharedArrayBuffer	WebAssembly iş parçacıkları için gereklidir. Bu özellik, Android Chrome 88'den itibaren kullanılabilir. Masaüstü sürümü, Site İzolasyonu yardımıyla varsayılan olarak etkinleştirilir ancak kökler arası erişime kapalı durum gerektirir ve Chrome 92'de varsayılan olarak devre dışı bırakılır.
performance.measureUserAgentSpecificMemory()	Chrome 89'dan itibaren kullanılabilir.
performance.now(), performance.timeOrigin	Birçok tarayıcıda kullanılabilir. Çözünürlük 100 mikrosaniye veya daha yüksek bir değerle sınırlıdır. Kökler arası erişime kapalı olduğunda çözünürlük 5 mikrosaniye veya daha yüksek olabilir.

Kökler arası erişime kapalı durum, document.domain üzerinde değişiklik yapılmasını da engeller. (document.domain değerini değiştirebilmek, aynı sitedeki belgeler arasında iletişime olanak tanır ve aynı kaynak politikasında bir boşluk olarak kabul edilir.)

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

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

Bu başlıklar, tarayıcıya, kaynaklar arası belgeler tarafından yüklenmeyi seçmeyen kaynakların veya iframe'lerin yüklenmesini engellemesini ve kaynaklar arası pencerelerin belgenizle doğrudan etkileşim kurmasını önlemesini söyler. Bu, çapraz kaynak olarak yüklenen kaynakların da etkinleştirilmesi gerektiği anlamına gelir.

self.crossOriginIsolated özelliğini inceleyerek bir web sayfasının kökler arası erişime kapalı durumda olup olmadığını belirleyebilirsiniz.

Not: Bu belge, web sitelerini SharedArrayBuffer, WebAssembly iş parçacıkları, performance.measureUserAgentSpecificMemory() veya yüksek çözünürlüklü zamanlayıcıyı tarayıcı platformlarında daha sağlam bir şekilde daha iyi hassasiyetle kullanmaya hazırlamak isteyenlere yöneliktir.

Sözlük

Bu belgede benzer şekilde adlandırılmış ve kısaltılmış birçok terim kullanılmaktadır. Konuyu netleştirmek için küçük bir sözlük hazırladık:

• COEP: Çapraz Kaynak Yerleştirme Politikası
• COOP: Çapraz Kaynak Açıcı Politikası
• CORP: Çapraz Kaynak Politikası
• CORS: Çapraz Kaynak Paylaşımı
• CORB: Çapraz Kaynak Okuma Engelleme

Web sitenizi kökler arası erişime kapalı hale getirme

İpucu: Kökler arası erişime kapalı olmayı etkinleştirmek için pratik adımları öğrenin.

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

Üst düzey bir dokümanda COOP: same-origin 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 tarama bağlamı grubuna sahip olur. Bu nedenle, açılan pencereler için yalıtım zorunlu kılınır ve her iki pencere arasındaki karşılıklı iletişim devre dışı bırakılır.

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

Pencere açıcının ve açılan pencerenin ayrı tarama bağlamı gruplarında olup olmadığını Geliştirici Araçları'ndan kontrol edebilirsiniz.

2. Kaynaklarda CORP veya CORS'u etkinleştirme

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 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 başlığını ayarlayın.
• Kaynağın yalnızca aynı siteden ancak çapraz kaynaklı olarak yüklenmesi bekleniyorsa Cross-Origin-Resource-Policy: same-site başlığını ayarlayın.
• Kaynak, kontrolünüz altındaki çapraz kaynaklardan yükleniyorsa mümkünse Cross-Origin-Resource-Policy: cross-origin başlığını ayarlayın.
• Kontrolünüz dışındaki çapraz 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 aynı ilkeleri uygulayın ve Cross-Origin-Resource-Policy: cross-origin (veya bağlama bağlı olarak same-site, same-origin) özelliğini 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 doküman veya çalışan için CORS olmadan yüklenen çapraz kaynak alt kaynakları, yerleştirilmeyi etkinleştirmek üzere Cross-Origin-Resource-Policy: cross-origin başlığını ayarlamalıdır. Örneğin, bu durum <script>, importScripts, <link>, <video>, <iframe> vb. için geçerlidir.

Önemli Terim: Aynı site, aynı şemaya ve aynı eTLD+1'e sahip web siteleridir. Aynı kaynak, şema, ana makine adı ve bağlantı noktası kombinasyonu aynı olan web siteleridir. Aynı site ve aynı kaynak arasındaki fark hakkında daha fazla bilgi edinin.

iframe'lerde izolasyon

<iframe> etiketine allow="cross-origin-isolated" izin politikasını uygulayarak ve bu koşulları karşılayarak bir iframe'e yerleştirilmiş dokümanda kökler arası erişime kapalı olmayı etkinleştirebilirsiniz. Üst çerçeveler ve alt çerçeveler de dahil olmak üzere tüm doküman zinciri de kökler arası erişime kapalı olmalıdır.

3. Yerleşik kaynakları değerlendirmek için COEP Report-Only HTTP üstbilgisini kullanma

COEP'yi tamamen etkinleştirmeden önce, politikanın gerçekten çalışıp çalışmadığını incelemek için Cross-Origin-Embedder-Policy-Report-Only başlığını kullanarak bir deneme yapabilirsiniz. Yerleştirilmiş içerikleri engellemeden rapor alırsınız.

Bunu, üst düzey doküman, iframe'ler ve çalışan komut dosyaları dahil tüm dokümanlara yinelemeli olarak uygulayın. Yalnızca Raporlama HTTP üstbilgisi hakkında bilgi edinmek için Reporting API'yi kullanarak sorunları gözlemleme başlıklı makaleyi inceleyin.

4. COEP'yi etkinleştirme

Bu adım yalnızca kaynaklarda CORP veya CORS'un etkinleştirildiğinden emin olduktan sonra yapılabilir.

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

Not: Bir resim optimizasyonu PWA'sı olan Squoosh, Android Chrome'da Wasm Threads'e (ve Shared Array Buffer'a) erişmek için COOP/COEP kullanır.

Dikkat: Kökler arası erişime kapalı olma durumu, tüm alt kaynakların açıkça etkinleştirilmesini gerektirdiğinden Cross-Origin-Resource-Policy özelliğini geniş ölçekte nasıl dağıtabileceğimizi araştırıyoruz. Seçeneklerden biri, tüm kimlik bilgilerini kaldırarak kaynakların CORP başlığı olmadan yüklenmesine olanak tanıyan COEP kimlik bilgisiz modudur. Kimlik bilgisiz mod, Chrome 96 ve Edge'de kullanılabilir ancak henüz diğer tarayıcılar tarafından desteklenmemektedir.

Yalıtımın başarılı olup olmadığını belirleme

self.crossOriginIsolated özelliği, web sayfası kökler arası erişime kapalı durumdayken ve tüm kaynaklar ile pencereler aynı tarama bağlamı grubunda izole edilmişken true değerini döndürür. Tarama bağlamı grubunu başarıyla izole edip etmediğinizi ve performance.measureUserAgentSpecificMemory() gibi özelliklere erişim elde edip etmediğinizi belirlemek için bu API'yi kullanabilirsiniz.

Hataları ayıklama

COOP ve COEP ile ilgili sorunlar yaşayabilirsiniz. Hata ayıklamak için tarayıcı geliştirici araçlarını veya raporlama API'sini kullanabilirsiniz.

Chrome Geliştirici Araçları ile hata ayıklama

Resimler gibi ekranda oluşturulan kaynaklar için COEP sorunlarını tespit etmek oldukça kolaydır. Çünkü istek engellenir ve sayfada eksik bir resim gösterilir. Ancak komut dosyaları veya stiller gibi görsel etkisi olmayan kaynaklarda COEP sorunları fark edilmeyebilir. Bunlar için Geliştirici Araçları Ağ panelini kullanın.

COEP ile ilgili bir sorun varsa Durum sütununda (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) ifadesini görürsünüz.

Ardından, girişi tıklayarak daha fazla ayrıntı görebilirsiniz.

iframe'lerin ve iletişim kutusu pencerelerinin durumunu Uygulama panelinden de belirleyebilirsiniz. Sol taraftaki "Frames" (Çerçeveler) bölümüne gidin ve kaynak yapısının dökümünü görmek için "top" (üst) bölümünü genişletin.

SharedArrayBuffer gibi iframe'lerin kullanılabilirlik durumunu kontrol edebilirsiniz.

İletişim kutusu penceresinin durumunu (ör. kökler arası erişime kapalı olup olmadığını) 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 iletişim kutusu penceresini izole ettiğinde kullanıcılarınızın tarayıcısına rapor göndermesini sağlayacak şekilde yapılandırabilirsiniz. Chrome, COEP ve COOP dahil olmak üzere çeşitli kullanımlar için 69. sürümden beri Reporting API'yi desteklemektedir.

Not: Reporting API'yi Report-To başlığıyla zaten kullanıyor musunuz? Chrome, Reporting API'nin yeni bir sürümüne geçiyor. Bu sürümde Report-To, Reporting-Endpoints ile değiştiriliyor. Yeni sürüme geçmenizi öneririz. Ayrıntılar için Reporting API v1'e geçiş başlıklı makaleyi inceleyin.

Reporting API'yi nasıl yapılandıracağınızı ve raporları almak için nasıl sunucu oluşturacağınızı öğrenin.

Örnek COEP raporu

Çapraz kaynak engellendiğinde örnek bir COEP raporu yükü aşağıdaki gibi görünür:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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"
}]

Dikkat: blocked-url yalnızca geriye dönük uyumluluk için mevcuttur ve kaldırılacaktır.

Örnek COOP raporu

Bir iletişim kutusu izole olarak açıldığında örnek bir COOP raporu yükü aşağıdaki gibi görünür:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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 da (yalnızca "yalnızca raporlama" modunda) COOP bir rapor gönderir. Örneğin, postMessage() işlemi denendiğinde rapor şu şekilde görünür:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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"
}]

Çıkarımlar

Bir web sayfasını özel bir kökler arası erişime kapalı duruma geçirmek için COOP ve COEP HTTP üstbilgilerini birlikte kullanın. Bir web sayfasının kökler arası erişime kapalı durumda olup olmadığını belirlemek için self.crossOriginIsolated özelliğini inceleyebilirsiniz.

Bu kökler arası erişime kapalı durum için yeni özellikler kullanıma sunuldukça ve Geliştirici Araçları'nda COOP ve COEP ile ilgili daha fazla iyileştirme yapıldıkça bu yayını güncel tutacağız.

Kaynaklar

• Güçlü özellikler için neden "kökler arası erişime kapalı" olmanız gerekir?
• Kökler arası erişimi kapatma kılavuzu
• measureUserAgentSpecificMemory() ile web sayfanızın toplam bellek kullanımını izleme

Doküman güncellemeleri

• 21 Haziran 2022: Kökler arası erişime kapalı olma durumu etkinleştirildiğinde çalışan komut dosyalarına da dikkat edilmesi gerekir. Bazı açıklamalar eklendi.
• 5 Ağustos 2021: JS Self-Profiling API, kökler arası erişime kapalı olmayı 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: Geri bildirimler ve bildirilen sorunlar doğrultusunda, kökler arası erişime kapalı olmayan sitelerde SharedArrayBuffer kullanımının Chrome M92'de kısıtlanmasıyla ilgili zaman çizelgesini düzenlemeye karar verdik.
• 16 Nisan 2021: Çıkış noktaları arası izolasyon için COEP kimlik bilgisiz modu ve COOP same-origin-allow-popups'ın esnek bir koşul olması ile ilgili 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 tamamen etkinleştirildi. Daha yüksek hassasiyete sahip olacak, yakında kullanıma sunulacak performance.now() ve performance.timeOrigin özellikleri eklendi.
• 19 Şubat 2021: Özellik politikası ve Geliştirici Araçları'ndaki hata ayıklama işlevi hakkında bir not eklendi. allow="cross-origin-isolated"
• 15 Ekim 2020: self.crossOriginIsolated, Chrome 87'den itibaren kullanılabilir. Bunu yansıtacak şekilde, self.crossOriginIsolated true değerini döndürdüğünde document.domain sabittir. performance.measureUserAgentSpecificMemory() kaynak denemesi sona eriyor ve Chrome 89'da varsayılan olarak etkinleştiriliyor. Android Chrome'da Shared Array Buffer, Chrome 88'den itibaren kullanılabilir.