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

COOP ve COEP'i kullanarak kökler arası erişime kapalı bir ortam oluşturun ve SharedArrayBuffer, performance.measureUserAgentSpecificMemory() gibi güçlü özellikleri ve daha iyi hassasiyetle yüksek çözünürlüklü zamanlayıcıyı etkinleştirin.

Eiji Kitamura

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

Bu belgede, COOP ve COEP'nin nasıl kullanılacağı açıklanmaktadır. 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ıları riskini artırır. Tarayıcılar, bu riski azaltmak için kökler arası erişime kapalı adlı, etkinleştirme tabanlı bir yalıtılmış ortam sunar. Kökler arası erişime kapalı durumda web sayfası aşağıdaki 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ştirme olanağı, aynı sitedeki belgeler arasında iletişime izin verdiğinden aynı kaynak politikasında bir boşluk olarak kabul edilmiştir.)

Kökler arası erişimi kapatmak 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 başlıklar, tarayıcıya kaynakların veya iFrame'lerin yüklenmesini engelleme talimatı verir. Bu kaynaklar veya iFrame'ler, kaynaklar arası dokümanlar tarafından yüklenmeyi etkinleştirmemiştir. Ayrıca, kaynaklar arası pencerelerin dokümanınızla doğrudan etkileşim kurmasını da engeller. Bu, çapraz kaynak yüklenen kaynakların da etkinleştirilmesi gerektiği anlamına gelir.

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

Sözlük

Bu belgede, benzer şekilde adlandırılmış ve kısaltılmış birçok terim kullanılmaktadır. Daha net bir şekilde açıklamak için mini bir sözlük hazırladık:

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

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

1. En üst düzey dokümanda Cross-Origin-Opener-Policy: same-origin ayarlayı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ı kaynakta aynı COOP ayarıyla olmadıkları sürece ayrı bir göz atma bağlamı grubuna sahip olur. Bu nedenle, açılan pencereler için izolasyon uygulanır ve iki pencere arasındaki karşılıklı iletişim devre dışı bırakılır.

Göz atma 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 kutusu penceresi (https://b.example) açarsa, açıcı pencere ve iletişim kutusu penceresi aynı göz atma bağlamını paylaşır. Bu nedenle, window.opener gibi DOM API'leri ile birbirlerine erişebilirler.

Pencere açıcı 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'nin etkinleştirilmesi için gereklidir.

Kaynak 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 kaynaklar arası yüklenmesi bekleniyorsa Cross-Origin-Resource-Policy: same-site üst bilgisini ayarlayın.
• Kaynak kontrolünüzdeki kaynaklar arası kaynaklardan yükleniyorsa mümkünse Cross-Origin-Resource-Policy: cross-origin üstbilgisini ayarlayın.
• Kontrolünüz dışındaki kaynaklar arası 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'yi 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) 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 doküman veya çalışan için, CORS olmadan yüklenen çapraz kaynak alt kaynaklar, yerleştirilmeye izin vermek ü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.

iframe'lerde izolasyon

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

3. Yerleştirilmiş kaynakları değerlendirmek için COEP Report-Only HTTP üstbilgisini 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 deneme yapabilirsiniz. Yerleştirilmiş içerikleri engellemeden rapor alırsınız.

Bu ayarı, üst düzey belge, iFrame'ler ve Worker komut dosyaları dahil olmak üzere tüm belgelere 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 gerçekleştirilebilir.

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 başlığını, iFrame'ler ve worker komut dosyalarıyla yerleştirilmiş olanlar da dahil olmak üzere tüm belgelerde aynı değere sahip Cross-Origin-Embedder-Policy başlığıyla değiştirin.

İzolasyonun başarılı olup olmadığını belirleme

Web sayfası kökler arası erişime kapalı durumdayken ve tüm kaynaklar ile pencereler aynı tarama bağlamı grubu içinde yalıtılmışsa self.crossOriginIsolated özelliği true değerini döndürür. Bu API'yi, göz atma bağlamı grubunu başarıyla yalıtıp yalıtmadığınızı ve performance.measureUserAgentSpecificMemory() gibi özelliklere erişim kazanıp kazanmadığınızı belirlemek için kullanabilirsiniz.

Hataları ayıklama

COOP ve COEP ile ilgili sorunlar yaşayabilirsiniz. Hata ayıklama 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 kaynaklarda COEP sorunlarını tespit etmek oldukça kolaydır. Çünkü istek engellenir ve sayfada eksik bir resim olduğu belirtilir. Ancak komut dosyaları veya stiller gibi görsel etkisi olmayan kaynaklarda COEP sorunları gözden kaçabilir. Bu tür istekler için Geliştirici Araçları Ağ panelini kullanın.

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

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

Ayrıca, Uygulama panelinden iFrame'lerin ve iletişim kutularının durumunu da 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"ü genişletin.

SharedArrayBuffer gibi iframe'in durumunu kontrol edebilirsiniz.

Ayrıca, iletişim kutularının durumunu (ör. kaynaklar arası yalıtılmış 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. Raporlama API'sini, kullanıcılarınızın tarayıcısına COEP bir kaynağın yüklenmesini engellediğinde veya COOP bir iletişim penceresini yalıttığında rapor göndermesi talimatını verecek ş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.

Reporting API'yi nasıl yapılandıracağınızı ve raporları alacak bir sunucuyu nasıl ayarlayacağınızı öğrenin.

Örnek COEP raporu

Çapraz kaynaklı 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.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 iletişim kutusu yalıtılmış olarak açıldığında COOP raporu yükünün örneği aşağıdaki gibidir:

[{
  "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 bağlamı grupları birbirine erişmeye çalıştığında (yalnızca "yalnızca rapor" modunda) COOP de bir rapor gönderir. Örneğin, postMessage() denendiğinde 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"
}]

Çıkarımlar

Bir web sayfasını özel bir kökler arası erişime kapalı duruma dahil etmek için COOP ve COEP HTTP üstbilgilerinin bir kombinasyonunu kullanın. Bir web sayfasının kökler arası erişime kapalı durumda olup olmadığını belirlemek için self.crossOriginIsolated öğesini inceleyebilirsiniz.

Bu kökler arası erişime kapalı duruma yeni özellikler eklendikçe ve COOP ile COEP ile ilgili olarak Geliştirici Araçları'nda daha fazla iyileştirme yapıldıkça bu yayını güncelleyeceğiz.

Kaynaklar

• Güçlü özellikler için neden "kökler arası erişime kapalı" özelliğine ihtiyacınız var?
• Kaynaklar arası izolasyonu etkinleştirme kılavuzu
• Web sayfanızın toplam bellek kullanımını measureUserAgentSpecificMemory() ile izleme

Doküman güncellemeleri

• 21 Haziran 2022: Kaynaklar arası izolasyon etkinleştirildiğinde çalışan komut dosyaları da dikkatli bir şekilde ele alınmalıdır. Bazı açıklamalar eklendi.
• 5 Ağustos 2021: JS Self-Profiling API, kaynaklar arası izolasyon gerektiren API'lerden biri olarak belirtilmişti ancak yönle ilgili son değişiklik yansıtılarak kaldırıldı.
• 6 Mayıs 2021: Geri bildirimler ve bildirilen sorunlar doğrultusunda, Chrome M92'de kökler arası erişime kapalı olmayan sitelerde SharedArrayBuffer kullanımının kısıtlanması için zaman çizelgesini ayarlamaya karar verdik.
• 16 Nisan 2021: COEP kimlik bilgisi içermeyen modu ve COOP aynı kaynaklı pop-up'lara izin verme ile ilgili notlar, kaynaklar arası yalıtım için gevşek bir koşul olarak 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 etkin. Daha yüksek hassasiyete sahip olacak performance.now() ve performance.timeOrigin gibi yakında kullanıma sunulacak özellikler eklendi.
• 19 Şubat 2021: Özellik politikası allow="cross-origin-isolated" ve Geliştirici Araçları'ndaki hata ayıklama işleviyle ilgili bir not eklendi.
• 15 Ekim 2020: self.crossOriginIsolated, Chrome 87'den itibaren kullanılabilir. Bunu yansıtan document.domain, self.crossOriginIsolated true döndürdüğünde değişmez. performance.measureUserAgentSpecificMemory(), kaynak denemesini sonlandırıyor ve Chrome 89'da varsayılan olarak etkinleştiriliyor. Android Chrome'da Shared Array Buffer, Chrome 88'den itibaren kullanılabilecek.