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 kaynak ayırmayı 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.

Kaynaklar arası izolasyonu etkinleştirmeyi düşünüyorsanız bunun web sitenizdeki diğer kaynakta çapraz kaynaklar (reklam yerleşimleri gibi) üzerindeki etkisini değerlendirin.

SharedArrayBuffer nesnesinin web sitenizde nerede kullanıldığını belirleme
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.

Sitenizde SharedArrayBuffer'ün nerede 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 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 belirtir. Üçü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 kaynaka 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ı
SharedArrayBuffer, kökler arası erişime kapalı olmadan kullanıldığında DevTools Console uyarısı.

(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 bulunur.

  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 ihtimali olan sayfalara ayarlayın.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. Üstbilgi yayılmaya başladığında, kaydolduğunuz uç nokta desteği sonlandırılan raporları toplamaya başlamalıdır.

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

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

Kaynaklar arası yalıtımı etkinleştirmenin sitenizdeki etkisini herhangi bir şeyi bozmadan değerlendirebilseniz ne kadar iyi olurdu? Cross-Origin-Opener-Policy-Report-Only ve Cross-Origin-Embedder-Policy-Report-Only HTTP başlıkları tam da bunu yapmanıza olanak tanır.

  1. Üst düzey belgenizde Cross-Origin-Opener-Policy-Report-Only: same-origin seçeneğini belirleyin. 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 üstbilgi, sitenizin işleyişini henüz etkilemeden COEP: require-corp'ü etkinleştirmenin etkisini 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

Kaynakların hangilerinin kaynakta yalıtımdan etkileneceğini belirledikten sonra, bu kaynakta yalıtılmış kaynakları nasıl etkinleştireceğinizle ilgili genel yönergeler aşağıda verilmiştir:

  1. Resimler, komut dosyaları, stil sayfaları, iFrame'ler ve diğer kaynakta çapraz 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üklenen bir iframe içinde SharedArrayBuffer gibi güçlü özellikleri kullanmak istiyorsanız allow="cross-origin-isolated" öğesini <iframe> öğesine 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 kaynakta çapraz pop-up pencere olmadığından emin olun. Kaynaklar arası yalıtım etkinleştirildiğinde bu öğelerin çalışmasını sağlamanın bir yolu yoktur. İletişimi, kaynak ayırma uygulanmayan başka bir dokümana 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 belgeniz ile 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 ayarladıysanız değiştirin. Bu, etkinleştirilmemiş kaynakta çapraz kaynaklar yüklenmesini engeller.
  3. Sayfanızın kaynak ayrı olduğunu doğrulamak için konsolda self.crossOriginIsolated değerinin true döndürdüğünden emin olun.

Kaynaklar