Kaynaklar arası yalıtım, bir web sayfasının SharedArrayBuffer gibi güçlü özellikleri kullanabilmesini sağlar. Bu makalede, web sitenizde kaynaklar arası izolasyonu nasıl etkinleştireceğiniz açıklanmaktadır.
Bu kılavuzda, kökler arası erişime kapalı web sitesinin nasıl etkinleştirileceği gösterilmektedir. SharedArrayBuffer
performance.measureUserAgentSpecificMemory()
veya daha yüksek hassasiyete sahip yüksek çözünürlüklü zamanlayıcı kullanmak istiyorsanız kaynaklar arası izolasyon gereklidir.
Kökler arası erişime kapalı web sitesini etkinleştirmek istiyorsanız bunun web sitenizdeki diğer kökler arası kaynaklar (ör. reklam yerleşimleri) üzerindeki etkisini değerlendirin.
SharedArrayBuffer
öğesinin web sitenizin neresinde kullanıldığını belirleyinSharedArrayBuffer
kullanan işlevler artık çapraz kaynak izolasyonu olmadan çalışmayacaktır. Bu sayfaya SharedArrayBuffer
desteğinin sonlandırılması mesajı nedeniyle yönlendirildiyseniz web siteniz veya ona yerleştirilmiş kaynaklardan biri SharedArrayBuffer
kullanıyor olabilir. Web sitenizde desteğin sonlandırılması nedeniyle kesintiye uğramaması için öncelikle içeriğin nerede kullanıldığını tespit edin.SharedArrayBuffer
etiketinin sitenizin neresinde kullanıldığından emin değilseniz bunu öğrenmenin iki yolu vardır:
- Chrome Geliştirici Araçları'nı kullanma
- (Gelişmiş) Kullanımdan Kaldırma Raporunu Kullanma
SharedArrayBuffer
ürününü nerede kullandığınızı biliyorsanız Çapraz kaynak izolasyonunun etkisini analiz etme bölümüne geçin.
Chrome Geliştirici Araçları'nı kullanma
Chrome Geliştirici Araçları, geliştiricilerin web sitelerini incelemesini sağlar.
SharedArrayBuffer
kullanıyor olabileceğinden şüphelendiğiniz sayfada Chrome Geliştirici Araçları'nı açın.- Konsol panelini seçin.
- Sayfa,
SharedArrayBuffer
kullanıyorsa aşağıdaki mesaj görünür:[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
- Mesajın sonundaki dosya adı ve satır numarası (örneğin,
common-bundle.js:535
)SharedArrayBuffer
öğesinin nereden geldiğini belirtir. Üçüncü taraf kitaplığı söz konusuysa sorunu düzeltmek için geliştiriciyle iletişime geçin. Web sitenizin bir parçası olarak uygulandıysa kökler arası erişimi etkinleştirmek için aşağıdaki kılavuzu izleyin.
![SharedArrayBuffer çapraz kaynak izolasyonu olmadan kullanıldığında DevToools Konsolu uyarısı](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=5&hl=tr)
(Gelişmiş) Kullanımdan Kaldırma Raporunu Kullanma
Bazı tarayıcılarda API'leri belirli bir uç noktaya kullanımdan kaldırma özelliği bulunur.
- Desteği sonlandırma raporu sunucusu kurun ve raporlama URL'sini alın. Bunu, bir kamu hizmeti kullanarak veya kendiniz bir kamu hizmeti oluşturarak yapabilirsiniz.
- URL'yi kullanarak aşağıdaki HTTP üst bilgisini,
SharedArrayBuffer
sunma potansiyeli taşıyan sayfalara ayarlayın.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- Başlık yayılmaya başladıktan sonra, kaydolduğunuz uç noktanın kullanımdan kaldırma raporlarını toplamaya başlaması gerekir.
Örnek bir uygulamaya şuradan ulaşabilirsiniz: https://cross-origin-isolation.glitch.me.
Kökler arası erişime kapalı kalmanın etkisini analiz etme
Kökler arası izolasyonu sağlamanın, hiçbir şeyi bozmadan siteniz üzerindeki etkisini değerlendirebilseydiniz harika olmaz mıydı? Cross-Origin-Opener-Policy-Report-Only
ve Cross-Origin-Embedder-Policy-Report-Only
HTTP üst bilgileri tam olarak bunu yapmanızı sağlar.
- Üst düzey dokümanınızda
Cross-Origin-Opener-Policy-Report-Only: same-origin
öğesini ayarlayın. Adından da anlaşılacağı gibi bu başlık yalnızcaCOOP: same-origin
ürününün siteniz üzerinde olacağı etkiyle ilgili raporlar gönderir. Aslında pop-up pencerelerle iletişimi devre dışı bırakmaz. - Raporlamayı ayarlayın ve raporları alıp kaydedecek bir web sunucusu yapılandırın.
- Üst düzey dokümanınızda
Cross-Origin-Embedder-Policy-Report-Only: require-corp
öğesini ayarlayın. Bu üst bilgi, sitenizin işlevselliğini henüz etkilemedenCOEP: require-corp
etkinleştirmenin etkisini görmenizi sağlar. Bu başlığı, raporları bir önceki adımda oluşturduğunuz raporlama sunucusuna gönderecek şekilde yapılandırabilirsiniz.
Kökler arası erişime kapalı kalmanın etkisini azaltma
Kökler arası izolasyondan hangi kaynakların etkileneceğini belirledikten sonra, kökler arası kaynakları gerçekte nasıl etkinleştireceğinizle ilgili genel yönergeler aşağıda verilmiştir:
- Resimler, komut dosyaları, stil sayfaları, iframe'ler ve diğerleri gibi kaynaklar arası kaynaklarda
Cross-Origin-Resource-Policy: cross-origin
üst bilgisini ayarlayın. Aynı site kaynaklarındaCross-Origin-Resource-Policy: same-site
üst bilgisini ayarlayın. - CORS kullanılarak yüklenebilen kaynaklar için HTML etiketindeki
crossorigin
özelliğini (örneğin,<img src="example.jpg" crossorigin>
) ayarlayarak etkinleştirildiğinden emin olun. JavaScript getirme isteği içinrequest.mode
öğesinincors
olarak ayarlandığından emin olun. - Yüklü bir iframe içinde
SharedArrayBuffer
gibi güçlü özellikleri kullanmak istiyorsanızallow="cross-origin-isolated"
öğesini<iframe>
öğesine ekleyin. - iFrame'lere veya çalışan komut dosyalarına yüklenen kaynaklar arası kaynaklar başka bir iframe ya da çalışan komut dosyası katmanı içeriyorsa devam etmeden önce bu bölümde açıklanan adımları yinelemeli olarak uygulayın.
- Tüm çapraz kaynak kaynakların etkinleştirildiğini onayladıktan sonra iframe'ler ve çalışan komut dosyalarında
Cross-Origin-Embedder-Policy: require-corp
üstbilgisini ayarlayın (Aynı kaynak veya çapraz kaynak ne olursa olsun bu gereklidir). postMessage()
üzerinden iletişim gerektiren kaynaklar arası pop-up pencereleri olmadığından emin olun. Kökler arası erişime kapalı web siteleri etkinleştirildiğinde bunları çalışır durumda tutmanın bir yolu yoktur. İletişimi kökler arası erişime kapalı olmayan başka bir belgeye taşıyabilir veya farklı bir iletişim yöntemi (ör. HTTP istekleri) kullanabilirsiniz.
Kaynaklar arası izolasyonu etkinleştir
Kökler arası erişime kapalı web sitelerinin etkisini azalttıktan sonra kökler arası erişime kapalı web sitesini etkinleştirmeye yönelik genel kuralları aşağıda bulabilirsiniz:
- Üst düzey dokümanınızda
Cross-Origin-Opener-Policy: same-origin
üstbilgisini ayarlayın. Daha önceCross-Origin-Opener-Policy-Report-Only: same-origin
ayarladıysanız bunu değiştirin. Bu, üst düzey dokümanınız ile onun pop-up pencereleri arasındaki iletişimi engeller. - Üst düzey dokümanınızda
Cross-Origin-Embedder-Policy: require-corp
üstbilgisini ayarlayın. Daha önceCross-Origin-Embedder-Policy-Report-Only: require-corp
ayarladıysanız bunu değiştirin. Bu, etkinleştirilmemiş çapraz kaynak kaynaklarının yüklenmesini engeller. - Sayfanızın kökler arası erişime kapalı olduğunu doğrulamak için
self.crossOriginIsolated
ürününün konsoldatrue
değerini döndürdüğünden emin olun.