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() gibi güçlü özellikleri daha iyi hassasiyetle yüksek çözünürlüklü zamanlayıcıyı etkinleştirmek için COOP ve COEP'yi kullanın.

Eiji Kitamura

Güncellemeler

  • 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, SharedArrayBuffer kullanımının Chrome M92'de kısıtlanması için zaman çizelgesini ayarlamaya karar verdik.
  • 16 Nisan 2021: Yeni bir COEP kimlik bilgisi içermeyen modu ve COOP'un, kaynaklar arası izolasyon için aynı kaynaklı pop-up'lara izin verme koşulunu gevşetme 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 tamamen etkin. Daha yüksek hassasiyete sahip olacak performance.now() ve performance.timeOrigin gibi yeni özellikler eklendi.
  • 19 Şubat 2021: Özellik politikası allow="cross-origin-isolated" ve Geliştirici Araçları'ndaki hata ayıklama işlevi hakkında bir not eklendi.
  • 15 Ekim 2020: self.crossOriginIsolated, Chrome 87'den itibaren kullanılabilir. Bunu yansıtacak şekilde, document.domain, self.crossOriginIsolated true değerini 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.

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, etkinleştirme tabanlı bir yalıtılmış ortam sunar. Merkezler arası kaynak yalıtılmış durumda web sayfası aşağıdaki ayrıcalıklı özellikleri kullanabilir:

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ü şu anda Site İzolasyonu yardımıyla varsayılan olarak etkinleştirilmiştir ancak çapraz kaynak izolasyonu durumunu gerektirecek ve Chrome 92'de varsayılan olarak devre dışı bırakılacaktır.
performance.measureUserAgentSpecificMemory() Chrome 89 sürümünden itibaren kullanılabilir.
performance.now(), performance.timeOrigin Şu anda 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. Kaynaklar arası izolasyon ile çözünürlük 5 mikrosaniye veya daha yüksek olabilir.
Kökler arası erişime kapalı durumun arkasında kullanılabilecek özellikler

Kökler arası erişime kapalı durum, document.domain öğesinin değiştirilmesini de engeller. (document.domain değerini değiştirme, aynı sitedeki dokümanlar arasında iletişime olanak tanır ve aynı kaynak politikasında bir boşluk olarak kabul edilmiştir.)

Kökler arası erişimi kapatmak 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 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, kökler arası yüklenen kaynaklar için de izin verilmesi gerektiği anlamına gelir.

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

Bu makalede, yeni başlıkların nasıl kullanılacağı açıklanmaktadır. Bir sonraki makalede daha fazla arka plan bilgisi ve bağlam sunacağım.

Web sitenizi kaynaklar arası izole etmek için COOP ve COEP'yi dağıtma

COOP ve COEP'i entegre etme

1. En üst düzey dokümanda Cross-Origin-Opener-Policy: same-origin başlığını 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ı kaynağa aynı COOP ayarıyla sahip 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> aracılığıyla yerleştirilmiş alt dokümanları. Bir web sitesi (https://a.example) pop-up pencere (https://b.example) açarsa açan pencere ve pop-up pencere aynı göz atma bağlamını paylaşır. Bu nedenle, window.opener gibi DOM API'leri aracılığıyla birbirlerine erişebilirler.

Göz atma bağlamı grubu

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

Kaynak türüne bağlı olarak yapmanız gerekenler aşağıda açıklanmıştı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 farklı 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'u desteklemesini isteyin.
  • iFrame'ler için yukarıdaki ilkeleri uygulayın ve Cross-Origin-Resource-Policy: cross-origin (veya bağlama göre same-site, same-origin) öğesini 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 merkezler arası 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.

3. Yerleştirilmiş kaynakları değerlendirmek için COEP Report-Only HTTP üstbilgisini kullanın

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çeriği engellemeden rapor alırsınız.

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

4. COEP'yi etkinleştirme

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ı aracılığıyla yerleştirilenler de dahil olmak üzere tüm belgelerde aynı değere sahip olan Cross-Origin-Embedder-Policy başlığıyla değiştirin.

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

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

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

Ekranda oluşturulan kaynaklar (ör. resimler) için 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ı fark edilmeyebilir. 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.

Ağ panelinin Durum sütunundaki COEP sorunları.

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

COEP sorununun ayrıntıları, Ağ panelinde bir ağ kaynağı tıklandıktan sonra Başlıklar sekmesinde gösterilir.

Ayrıca, Uygulama paneli aracılığıyla iFrame'lerin ve pop-up pencerelerin 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.

Chrome Geliştirici Araçları iframe denetleyicisi

Ayrıca, pop-up pencerelerin durumunu (ör. kaynaklar arası yalıtılmış olup olmadığını) da kontrol edebilirsiniz.

Chrome Geliştirici Araçları pop-up pencere denetleyicisi

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 pop-up pencereyi yalıttığında rapor göndermesini söyleyecek ş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ı öğrenmek için Using the Reporting API (Reporting API'yi kullanma) başlıklı makaleyi inceleyin.

Örnek COEP raporu

Kaynaklar arası kaynak engellendiğinde COEP raporu yükünün bir örneği ş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

Yalıtılmış bir pop-up pencere açıldığında COOP raporu yükünün bir örneği:

[{
  "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() 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"
}]

Sonuç

Bir web sayfasını özel bir kaynaklar arası yalıtılmış duruma dahil etmek için COOP ve COEP HTTP üstbilgilerinin bir kombinasyonunu kullanın. Bir web sayfasının kaynaklar arası yalıtılmış durumda olup olmadığını belirlemek için self.crossOriginIsolated öğesini inceleyebilirsiniz.

Bu yayını, bu kaynaklar arası yalıtılmış durumda yeni özellikler kullanıma sunuldukça ve COOP ile COEP ile ilgili olarak Geliştirici Araçları'nda daha fazla iyileştirme yapıldıkça güncelleyeceğiz.

Kaynaklar