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

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.

Eiji Kitamura

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ı belirleyin
Chrome 92'den itibaren, SharedArrayBuffer 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.

  1. SharedArrayBuffer kullanıyor olabileceğinden şüphelendiğiniz sayfada Chrome Geliştirici Araçları'nı açın.
  2. Konsol panelini seçin.
  3. 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
  4. 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ı
SharedArrayBuffer, çapraz kaynak izolasyonu olmadan kullanıldığında DevToools Konsolu uyarısı.

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

  1. 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.
  2. 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"}]}
  3. 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.

  1. Ü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ızca COOP: 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.
  2. Raporlamayı ayarlayın ve raporları alıp kaydedecek bir web sunucusu yapılandırın.
  3. Ü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 etkilemeden COEP: 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:

  1. 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ında Cross-Origin-Resource-Policy: same-site üst bilgisini ayarlayın.
  2. 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çin request.mode öğesinin cors olarak ayarlandığından emin olun.
  3. Yüklü 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 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.
  5. 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).
  6. 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:

  1. Üst düzey dokümanınızda Cross-Origin-Opener-Policy: same-origin üstbilgisini ayarlayın. Daha önce Cross-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.
  2. Üst düzey dokümanınızda Cross-Origin-Embedder-Policy: require-corp üstbilgisini ayarlayın. Daha önce Cross-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.
  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üğünden emin olun.

Kaynaklar