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.
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ğlayacakperformance.now()
veperformance.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üğündedocument.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:
API | Açıklama |
---|---|
SharedArrayBuffer
|
WebAssembly iş parçacıkları için gereklidir. Bu özellik, Android Chrome 88 sürümünde kullanılabilir. Masaüstü sürümü şu anda Site İzolasyonu yardımıyla varsayılan olarak etkindir ancak kökler arası erişime kapalı durumu gerektirir ve Chrome 92'de varsayılan olarak devre dışı bırakılır. |
performance.measureUserAgentSpecificMemory()
|
Chrome 89 sürümünde kullanılabilir. |
performance.now() , performance.timeOrigin
|
Şu anda birçok tarayıcıda 100 mikrosaniye veya üzeri çözünürlükte kullanılabilir. 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ğ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.
- Kaynak, CORS ile yayınlanıyorsa yükleme HTML etiketinde
- iframe'ler için yukarıdaki aynı ilkeleri uygulayın ve
Cross-Origin-Resource-Policy: cross-origin
(veya bağlama göresame-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.
![Ağ panelinin Durum sütunundaki COEP sorunları.](https://web.dev/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=6&hl=tr)
Daha fazla ayrıntı görmek için girişi tıklayabilirsiniz.
![COEP sorununun ayrıntıları, Ağ panelindeki bir ağ kaynağı tıklandıktan sonra Başlıklar sekmesinde gösterilir.](https://web.dev/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=6&hl=tr)
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.
![Chrome Geliştirici Araçları iframe denetleyicisi](https://web.dev/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=6&hl=tr)
Ayrıca, pop-up pencerelerin durumunu, merkezler arası erişime kapalı olup olmadığı gibi kontrol edebilirsiniz.
![Chrome Geliştirici Araçları pop-up pencere denetleyicisi](https://web.dev/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=6&hl=tr)
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.