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 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 dikkat edilmesi gerekiyor etkin olduğundan emin olun. Bazı açıklamalar eklendi.
• 5 Ağustos 2021: JS Self-Profil API'nin kullanıldığı API'lerden biri, kökler arası erişime kapalı olacak, ancak Google Etiket Yöneticisi'nde yönlendirme, kaldırılır.
• 6 Mayıs 2021: Bildirilen geri bildirimler ve sorunlar doğrultusunda, gerekli düzenlemeleri yapmaya karar verdik. Kökler arası erişime kapalı sitelerde SharedArrayBuffer kullanımı için zaman çizelgesi Chrome M92 sürümünde kısıtlanacak.
• 16 Nisan 2021: Kimlik bilgisi bulunmayan yeni bir COEP hakkında notlar eklendi mode ve COOP aynı-kaynak-izin-popup'larının rahat olmasını sağlayın kaynaklar arası için koşul izole ediliyor.
• 5 Mart 2021: SharedArrayBuffer, performance.measureUserAgentSpecificMemory() ve hata ayıklama işlevleri, Chrome 89'da artık tam olarak etkinleştirilmiştir. Yakında çıkacak özellikler eklendi. performance.now() ve performance.timeOrigin, daha yüksek olacak emin olun.
• 19 Şubat 2021: Özellik politikası hakkında not eklendi Geliştirici Araçları'nda allow="cross-origin-isolated" ve hata ayıklama işlevi.
• 15 Ekim 2020: self.crossOriginIsolated, Chrome 87'den kullanılabilir. Aynı şekilde, document.domain self.crossOriginIsolated, true değerini döndürür. performance.measureUserAgentSpecificMemory(), kaynak denemesini sonlandırıyor. Chrome 89 sürümünde varsayılan olarak etkindir. Android Chrome'daki Paylaşılan Dizi Arabelleği Chrome 88'den itibaren kullanılabilir.

Bazı web API'leri, Spectre gibi yan kanal saldırısı riskini artırır. Alıcı: tarayıcılar, Google Analytics 4'te tarama odaklı kökler arası erişime kapalıdır. Kökler arası erişime kapalı durumda web sayfası Ayrıcalıklı özellikleri kullanabilmek için:

Kökler arası erişime kapalı durum, document.domain (document.domain alanını değiştirmek, iletişime olanak tanır. arasında boşluk olarak değerlendirildiği için hem web sitesi hem de aynı kaynak politikasına sahip değil.)

Kökler arası erişime kapalı bir eyaleti etkinleştirmek için aşağıdaki bilgileri göndermeniz gerekir: Ana dokümandaki HTTP üstbilgileri:

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

Bu üst bilgiler, tarayıcıya kaynakların veya iframe'lerin yüklenmesini engelleme talimatı verir kaynaklar arası belgeler tarafından yüklenmeyi kabul etmeyen ve çapraz kaynak pencerelerinin dokümanınızla doğrudan etkileşime girmesini sağlayın. Bu ayrıca kaynaklar arası yüklenen bu kaynaklar için etkinleştirme gerektirir.

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

Bu makalede, bu yeni üstbilgilerin nasıl kullanılacağı gösterilmektedir. Bundan sonra makalesinde daha fazla arka plan ve bağlam bilgisi sağlayacağım.

Web sitenizi kaynaklar arası erişime kapalı hale getirmek için COOP ve COEP'yi dağıtın

COOP ve COEP'yi entegre etme

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

Üst düzey bir dokümanda COOP: same-origin etkinleştirildiğinde, aynı kaynakta ve dokümandan açılan pencerelerde ayrı bir göz atma deneyimi aynı COOP ayarına sahip aynı kaynakta olmadıkları sürece bağlam grubuna dahil edilir. Bu nedenle, açık pencerelerde izolasyon ve uygulamalar arasındaki karşılıklı iletişimde devre dışı bırakılır.

Göz atma bağlam grubu, birbirine referans verebilen bir pencere kümesidir. Örneğin, Ö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çılan pencere ile 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şimleri vardır.

Pencere açıcısının ve açılışının ayrı taramada olup olmadığını kontrol edebilirsiniz. Geliştirici Araçları'ndaki bağlam grupları

2. Kaynaklarda CORP veya CORS'un etkin olduğundan emin olun.

Sayfadaki tüm kaynakların CORP veya CORS HTTP ile yüklendiğinden emin olun. başlıklar. Bu adım, COEP'in etkinleştirildiği dördüncü adım için gereklidir.

Kaynağın niteliğine bağlı olarak şunları yapmanız gerekir:

• Kaynağın yalnızca aynı kaynaktan yüklenmesi bekleniyorsa Cross-Origin-Resource-Policy: same-origin üstbilgisi.
• Kaynağın yalnızca aynı siteden değil de aynı siteden yüklenmesi bekleniyorsa kaynak, Cross-Origin-Resource-Policy: same-site üstbilgisini ayarlayın.
• Kaynak, kontrolünüzdeki çapraz kaynaklardan yüklenirse Mümkünse Cross-Origin-Resource-Policy: cross-origin üstbilgisi.
• Kontrolünüz dışındaki kaynaklar arası kaynaklar için:
  • Kaynak aşağıdaki durumlarda yükleme HTML etiketinde crossorigin özelliğini kullanın: CORS ile sunulur. (Örneğin, <img src="***" crossorigin>.)
  • Kaynağın sahibinden CORS veya CORP'yi desteklemesini isteyin.
• iframe'ler için yukarıdaki aynı ilkeleri izleyin ve Cross-Origin-Resource-Policy: cross-origin (veya same-site, same-origin göre değişiklik gösterir).
• 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 kaynaklar arası CORS olmadan yüklenen alt kaynaklar, Cross-Origin-Resource-Policy: cross-origin başlığını yerleştirmeyi etkinleştirecek şekilde ayarlamalıdır. Örneğin bu, <script>, importScripts, <link>, <video>, <iframe> vb.

3. Yerleştirilmiş kaynakları değerlendirmek için COEP Salt Rapor HTTP başlığını kullanma

COEP'yi tam olarak etkinleştirmeden önce, Cross-Origin-Embedder-Policy-Report-Only başlığını kullanarak politikanın işe yarıyor. Raporları, yerleştirilmiş içerikleri engellemeden alırsınız.

Bu işlemi, en üst düzey belge dahil tüm dokümanlara, iframe'ler ve çalışan komut dosyaları. Salt Rapor HTTP üstbilgisi hakkında bilgi için bkz. Raporlamayı kullanarak sorunları gözlemleme API.

4. COEP'yi etkinleştir

Her şeyin çalıştığını ve tüm kaynakların kullanılabilir olduğunu teyit ettikten sonra, başarıyla yüklendi, Cross-Origin-Embedder-Policy-Report-Only ayarını değiştirin Cross-Origin-Embedder-Policy başlığına, hepsi için aynı değere sahip olacak şekilde iframe'ler ve çalışan komut dosyaları aracılığıyla yerleştirilenler de dahil olmak üzere dokümanlar.

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

Web sayfası şunun içinde olduğunda self.crossOriginIsolated özelliği true değerini döndürür: kökler arası erişime kapalı durumda ve tüm kaynaklar ile pencereler aynı tarama bağlam grubunu içeriyor. Bu API'yi kullanarak erişim sahibi olduğunuz bağlam grubunu başarıyla ayırmış ve performance.measureUserAgentSpecificMemory() gibi daha güçlü özellikler sunar.

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

Ekranda oluşturulan resimler gibi kaynaklar için kullanarak COEP sorunlarını tespit edebilir. Çünkü istek engellenecek ve sayfa, eksik bir resim olduğunu gösterir. Ancak bu hedefe ulaşmayan kaynaklar için yazılar veya stiller gibi görsel bir etkisi varsa COEP sorunları fark edebilirsiniz. Bunlar için Geliştirici Araçları Ağ panelini kullanın. Eğer COEP ile ilgili bir sorun olduğunda Durum'da (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) sütununa girin.

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

Ayrıca iframe'lerin ve pop-up pencerelerin durumunu Uygulama paneli. "Çerçeveler"e gidin ve sol taraftaki bölüme "üst"ü genişlet görebilirsiniz.

iframe'in durumunu; SharedArrayBuffer, vb.

Pop-up pencerelerin durumunu, örneğin çapraz kaynak olup olmadığını da kontrol edebilirsiniz izole. 'nı inceleyin.

Reporting API'yi kullanarak sorunları gözlemleme

Reporting API, raporlama amacıyla tespit edebilirsiniz. Reporting API'yi kendi izleme verilerinize kullanıcıların COEP bir kaynağın yüklenmesini engellediğinde rapor göndermek için tarayıcı bir pop-up pencereyi izole eder. Chrome, o zamandan beri Reporting API'yi destekliyor COEP ve COOP gibi çeşitli kullanımlara yönelik sürüm 69'dur.

Reporting API'yi nasıl yapılandıracağınızı ve alan verilerini almak için bir sunucu Raporları Kullanma API.

Örnek COEP raporu

Örnek COEP rapor kaynaklar arası kaynak engellendiğinde 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

Örnek bir COOP report yük bir pop-up pencere açıldığında aşağıdaki gibi 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 bağlam grupları birbirine erişmeye çalıştığında (yalnızca "yalnızca rapor" modunda), COOP bir rapor da gönderir. Örneğin, bir raporda postMessage() denemesi ş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.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 URL'ye dönüştürmek için COOP ve COEP HTTP üstbilgilerinin bir kombinasyonunu kullanın kökler arası erişime kapalı duruma getirilebilir. Bu bilgileri inceleyebilirsiniz: Bir web sayfasının çapraz kaynakta olup olmadığını belirlemek için self.crossOriginIsolated izole durumunda.

Bu platforma yeni özellikler eklendikçe bu gönderiyi güncelleyeceğiz kökler arası erişime kapalı durum ve Geliştirici Araçları'nda daha fazla iyileştirme yapıldı COOP ve COEP gibi.

Kaynaklar

• "Kökler arası erişime kapalı" neden gerekiyor?
• Kaynaklar arası izolasyonu etkinleştirme rehberi
• Android Chrome 88 ve Masaüstü Chrome'da SharedArrayBuffer güncellemeleri 92
• Web sayfanızın toplam bellek kullanımını measureUserAgentSpecificMemory()