Kökler arası erişimi etkinleştirme rehberi

Kökler arası erişime kapalı web siteleri, web sayfalarının SharedArrayBuffer gibi güçlü özellikleri kullanmasına olanak tanır. Bu makalede, web sitenizde kaynakta izolasyonu nasıl etkinleştireceğiniz açıklanmaktadır.

Eiji Kitamura

Bu kılavuzda, kökler arası erişime kapalı web sitelerinin 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 kaynak ayırma gereklidir.

Kökler arası erişime kapalı web sitelerini etkinleştirmek istiyorsanız bunun web sitenizdeki reklam yerleşimleri gibi diğer çapraz kaynak kaynakları üzerindeki etkisini değerlendirin.

SharedArrayBuffer etiketinin web sitenizde nerede kullanıldığını belirleyin
Chrome 92'den itibaren, SharedArrayBuffer kullanan işlevler artık çapraz kaynak izolasyonu olmadan çalışmayacaktır. SharedArrayBuffer desteğinin sonlandırılmasıyla ilgili bir mesaj nedeniyle bu sayfaya geldiyseniz büyük olasılıkla web siteniz veya içine yerleştirilmiş kaynaklardan biri SharedArrayBuffer kullanıyordur. Desteği sonlandırılan API'ler nedeniyle web sitenizde herhangi bir sorun yaşanmaması için API'nin nerede kullanıldığını belirleyerek başlayın.

SharedArrayBuffer öğesinin sitenizde nerede kullanıldığından emin değilseniz bunu iki şekilde öğrenebilirsiniz:

  • Chrome Geliştirici Araçları'nı kullanma
  • (Gelişmiş) Kullanımdan Kaldırma Raporlarını Kullanma

SharedArrayBuffer'ü nerede kullandığınızı zaten biliyorsanız Kaynaklar arası izolasyonun etkisini analiz etme bölümüne atlayın.

Chrome Geliştirici Araçları'nı kullanma

Chrome Geliştirici Araçları, geliştiricilerin web sitelerini incelemesine olanak tanır.

  1. SharedArrayBuffer kullanabileceğinden şüphelendiğiniz sayfada Chrome Geliştirici Araçları'nı açın.
  2. Konsol panelini seçin.
  3. Sayfada SharedArrayBuffer kullanılıyorsa aşağıdaki mesaj gösterilir:
    [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
  4. İletinin sonundaki dosya adı ve satır numarası (örneğin, common-bundle.js:535), SharedArrayBuffer değerinin nereden geldiğini gösterir. Üçüncü taraf kitaplık kullanıyorsanız sorunu düzeltmek için geliştiriciyle iletişime geçin. Web sitenizin bir parçası olarak uygulandıysa kaynaktan kaynakta izolasyonu etkinleştirmek için aşağıdaki kılavuzu uygulayın.
SharedArrayBuffer, kökler arası erişime kapalı olmadan kullanıldığında DevTools Console uyarısı
Kökler arası kaynak izolasyonu olmadan SharedArrayBuffer kullanıldığında DevToools Konsolu uyarısı oluştu.

(Gelişmiş) Kullanımdan Kaldırma Raporlarını Kullanma

Bazı tarayıcılarda, belirli bir uç noktaya API'lerin kullanımdan kaldırılmasını bildirme işlevi vardır.

  1. Destek sonu rapor sunucusu oluşturun ve raporlama URL'sini alın. Bunu, herkese açık bir hizmet kullanarak veya kendiniz oluşturarak yapabilirsiniz.
  2. URL'yi kullanarak aşağıdaki HTTP üst bilgisini SharedArrayBuffer sunma potansiyeli olan sayfalara ayarlayın.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. Üst bilgi yayılmaya başladığında, kaydolduğunuz uç noktanın kullanımdan kaldırma raporlarını toplamaya başlaması gerekir.

Örnek bir uygulamayı burada bulabilirsiniz: https://cross-origin-isolation.glitch.me.

Kökler arası erişimin kapatılmasının etkisini analiz etme

Kökler arası izolasyonu etkinleştirmenin, hiçbir şeyi bozmadan sitenizde oluşturacağı etkiyi değerlendirebilseydiniz güzel olmaz mıydı? Cross-Origin-Opener-Policy-Report-Only ve Cross-Origin-Embedder-Policy-Report-Only HTTP üst bilgileri tam da bunu yapmanızı sağlar.

  1. Üst düzey belgenizde Cross-Origin-Opener-Policy-Report-Only: same-origin ayarını yapın. Adından da anlaşılacağı gibi bu başlık yalnızca COOP: same-origin'ün siteniz üzerinde olası etkisiyle ilgili raporlar gönderir. Pop-up pencerelerle iletişimi devre dışı bırakmaz.
  2. Raporlamayı ayarlayın ve raporları alıp kaydedecek bir web sunucusu yapılandırın.
  3. Üst düzey belgenizde Cross-Origin-Embedder-Policy-Report-Only: require-corp seçeneğini belirleyin. Bu başlık, sitenizin işlevselliğini henüz etkilemeden COEP: require-corp özelliğini etkinleştirmenin etkisini tekrar görmenizi sağlar. Bu üstbilgiyi, raporları önceki adımda ayarladığınız raporlama sunucusuna gönderecek şekilde yapılandırabilirsiniz.

Kökler arası erişime kapalı web sitelerinin etkisini azaltma

Çapraz kaynak izolasyonundan hangi kaynakların etkileneceğini belirledikten sonra, bu çapraz kökenli kaynakları nasıl etkinleştireceğinize dair genel yönergeleri burada bulabilirsiniz:

  1. Resimler, komut dosyaları, stil sayfaları, iframe'ler ve diğer kaynaklar gibi kaynaklar arası kaynaklarda Cross-Origin-Resource-Policy: cross-origin başlığını ayarlayın. Aynı sitedeki kaynaklarda Cross-Origin-Resource-Policy: same-site başlığını ayarlayın.
  2. CORS kullanılarak yüklenebilen kaynaklar için HTML etiketinde crossorigin özelliğini (örneğin, <img src="example.jpg" crossorigin>) ayarlayarak kaynağın etkinleştirildiğinden emin olun. JavaScript getirme isteği için request.mode özelliğinin cors olarak ayarlandığından emin olun.
  3. Yüklenmiş bir iframe içinde SharedArrayBuffer gibi güçlü özellikler kullanmak istiyorsanız <iframe> öğesine allow="cross-origin-isolated" ekleyin.
  4. Iframe'lere veya çalışan komut dosyalarına yüklenen kaynakta başka bir iframe veya çalışan komut dosyası katmanı varsa devam etmeden önce bu bölümde açıklanan adımları yinelemeli olarak uygulayın.
  5. Tüm kaynak dışı kaynakların etkinleştirildiğini onayladıktan sonra, iframe'lerde ve işleyici komut dosyalarında Cross-Origin-Embedder-Policy: require-corp üstbilgisini ayarlayın (Bu, aynı kaynaktan veya kaynak dışı kaynaktan bağımsız olarak gereklidir).
  6. postMessage() üzerinden iletişim gerektiren kaynaklar arası pop-up pencerelerin bulunmadığından emin olun. Kaynaklar arası yalıtım etkinleştirildiğinde bu öğelerin çalışmasını sağlamanı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ştirme

Kökler arası erişime kapalı web siteleri özelliğiyle etkiyi azalttıktan sonra, kökler arası erişime kapalı web sitelerini etkinleştirmeyle ilgili genel yönergeleri aşağıda bulabilirsiniz:

  1. Üst düzey belgenizde Cross-Origin-Opener-Policy: same-origin başlığını ayarlayın. Cross-Origin-Opener-Policy-Report-Only: same-origin ayarladıysanız değiştirin. Bu işlem, üst düzey dokümanınızla pop-up pencereleri arasındaki iletişimi engeller.
  2. Üst düzey belgenizde Cross-Origin-Embedder-Policy: require-corp başlığını ayarlayın. Cross-Origin-Embedder-Policy-Report-Only: require-corp ayarını yaptıysanız değiştirin. Bu, etkinleştirilmemiş kaynakta çapraz kaynaklar yüklenmesini engeller.
  3. Sayfanızın kökler arası erişime kapalı olduğunu doğrulamak için self.crossOriginIsolated ürününün konsolda true değerini döndürdüğünü kontrol edin.

Kaynaklar