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

Kökler arası erişime kapalı web siteleri, SharedArrayBuffer gibi güçlü özelliklerin web sayfalarında kullanılmasını sağlar. Bu makalede, web sitenizde kaynaklar arası izolasyonu nasıl etkinleştireceğiniz açıklanmaktadır.

Eiji Kitamura

Bu kılavuzda, kökler arası erişime kapalı web sitelerini nasıl etkinleştireceğiniz gösterilmektedir. SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), veya daha iyi hassasiyete sahip yüksek çözünürlüklü zamanlayıcı kullanmak istiyorsanız kaynaklar arası izolasyon gereklidir.

Çapraz kaynak yalıtımını etkinleştirmeyi planlıyorsanız bunun, web sitenizdeki reklam yerleşimleri gibi diğer çapraz kaynak kaynakları üzerindeki etkisini değerlendirin.

SharedArrayBuffer nesnesinin web sitenizde nerede kullanıldığını belirleme

Chrome 92'den itibaren SharedArrayBuffer kullanan işlevler, çapraz kaynak izolasyonu olmadan çalışmayacaktır. Bu sayfaya SharedArrayBuffer desteğinin sonlandırılması mesajı nedeniyle geldiyseniz büyük olasılıkla web siteniz veya web sitenize yerleştirilmiş kaynaklardan biri SharedArrayBuffer kullanıyordur. Kullanımdan kaldırılma nedeniyle web sitenizde hiçbir şeyin bozulmaması için öncelikle bu özelliğin nerede kullanıldığını belirleyin.

Sitenizin hangi bölümünde SharedArrayBuffer 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 Raporlama'yı kullanma

SharedArrayBuffer kullandığınız yerleri zaten biliyorsanız Kaynaklar arası izolasyonun 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 incelemesine olanak tanır.

  1. SharedArrayBuffer kullandığından şü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  for more details. common-bundle.js:535
  4. İletinin sonundaki dosya adı ve satır numarası (örneğin, common-bundle.js:535), SharedArrayBuffer öğesinin nereden geldiğini gösterir. Üçüncü taraf kitaplığıysa sorunu düzeltmek için geliştiriciyle iletişime geçin. Web sitenizin bir parçası olarak uygulanıyorsa kaynaklar arası izolasyonu etkinleştirmek için aşağıdaki kılavuzu inceleyin.
SharedArrayBuffer, kökler arası erişime kapalı olmadan kullanıldığında DevTools konsolunda uyarı gösterilir.
SharedArrayBuffer, kökler arası erişime kapalı olmadan kullanıldığında DevTools Konsolu uyarısı.

(Gelişmiş) Kullanımdan Kaldırma Raporlama'yı kullanma

Bazı tarayıcılarda, belirtilen bir uç noktaya API'lerin kullanımdan kaldırılmasıyla ilgili raporlama işlevi bulunur.

  1. Kullanımdan kaldırma raporu sunucusu oluşturma ve raporlama URL'sini alma. Bu işlemi, herkese açık bir hizmeti kullanarak veya kendiniz bir hizmet oluşturarak yapabilirsiniz.
  2. URL'yi kullanarak aşağıdaki HTTP üstbilgisini, SharedArrayBuffer yayınlıyor olabilecek sayfalara ayarlayın.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. Üstbilgi yayılmaya başladıktan sonra, kayıt olduğunuz uç nokta, desteği sonlandırılan özellik raporlarını toplamaya başlamalıdır.

Örnek bir uygulamaya göz atın.

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

Kaynaklar arası izolasyonu etkinleştirmenin siteniz üzerindeki etkisini hiçbir şeyi bozmadan değerlendirebilmek harika olmaz mıydı? 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. En üst düzey belgenizde Cross-Origin-Opener-Policy-Report-Only: same-origin ayarlayın. Adından da anlaşılacağı gibi bu başlık yalnızca COOP: same-origin olması durumunda siteniz üzerindeki etkisiyle ilgili raporlar gönderir. Pop-up pencerelerle iletişimi devre dışı bırakmaz.
  2. Raporlamayı ayarlayın ve raporları alıp kaydetmek için bir web sunucusu yapılandırın.
  3. En üst düzey belgenizde Cross-Origin-Embedder-Policy-Report-Only: require-corp ayarlayın. Bu üstbilgi, COEP: require-corp özelliğini etkinleştirmenin etkisini sitenizin işleyişini henüz etkilemeden 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

Hangi kaynakların kaynaklar arası izolasyondan etkileneceğini belirledikten sonra, bu kaynaklar arası kaynakları nasıl etkinleştireceğinize dair genel yönergeleri aşağıda bulabilirsiniz:

  1. Resimler, komut dosyaları, stil sayfaları, iFrame'ler ve diğerleri gibi kaynaklar arası kaynaklarda Cross-Origin-Resource-Policy:cross-origin başlığını ayarlayın. Aynı site kaynaklarında Cross-Origin-Resource-Policy:same-site üst bilgisini ayarlayın.
  2. CORS kullanılarak yüklenebilen kaynaklar için HTML etiketinde crossorigin özelliğini ayarlayarak (örneğin, <img src="example.jpg" crossorigin>) CORS'un etkinleştirildiğinden emin olun. JavaScript getirme isteği için request.mode özelliğinin cors olarak ayarlandığından emin olun.
  3. Yüklü bir iframe'de SharedArrayBuffer gibi güçlü özellikleri kullanmak istiyorsanız allow="cross-origin-isolated" öğesini <iframe> öğesine ekleyin.
  4. Kaynaklar arası iframe'lere veya çalışan komut dosyalarına yüklenen kaynaklar başka bir iframe veya çalışan komut dosyası katmanı içeriyorsa devam etmeden önce bu bölümde açıklanan adımları yinelemeli olarak uygulayın.
  5. Tüm kaynaklar arası kaynakların etkinleştirildiğini onayladıktan sonra iframe'lerde ve worker komut dosyalarında Cross-Origin-Embedder-Policy: require-corp üstbilgisini ayarlayın (Bu, aynı kaynak veya kaynaklar arası olmasına bakılmaksızın gereklidir).
  6. postMessage() üzerinden iletişim gerektiren çapraz kaynak pop-up pencerelerin olmadığından emin olun. Kaynaklar arası izolasyon etkinleştirildiğinde bunların çalışmaya devam etmesini sağlamanın bir yolu yoktur. İletişimi, kökler arası erişime kapalı olmayan başka bir dokümana taşıyabilir veya farklı bir iletişim yöntemi (ör. HTTP istekleri) kullanabilirsiniz.

Kaynaklar arası yalıtımı etkinleştirme

Çapraz kaynak izolasyonu ile etkiyi azaltmanızın ardından, çapraz kaynak izolasyonunu etkinleştirmek için genel yönergeler aşağıda verilmiştir:

  1. En ü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 bu ayarı değiştirin. Bu, üst düzey dokümanınız ile pop-up pencereleri arasındaki iletişimi engeller.
  2. En ü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 bu ayarı değiştirin. Bu işlem, etkinleştirilmemiş çapraz kaynak kaynaklarının yüklenmesini engeller.
  3. Sayfanızın kökler arası erişime kapalı olduğunu doğrulamak için konsolda self.crossOriginIsolated değerinin true döndürdüğünü kontrol edin.

Kaynaklar