Cinevva

Türkçe

English
简体中文
한국어
हिन्दी
Português (Brasil)
Español
Français
Bahasa Indonesia

Türkçe

English
简体中文
한국어
हिन्दी
Português (Brasil)
Español
Français
Bahasa Indonesia

Tema

Çapraz Kaynak Yalıtımı Denetleyicisi ​

Herhangi bir sitenin URL'sini girerek sitenin çapraz kaynak yalıtımına sahip olup olmadığını ve SharedArrayBuffer ile çok iş parçacıklı WebAssembly'nin orada çalışıp çalışmayacağını öğrenin. Denetleyici, URL'nin Cross-Origin-Opener-Policy ve Cross-Origin-Embedder-Policy yanıt başlıklarını okuyarak nelerin eksik olduğunu bildirir. Yalnızca başlıkları okur; başka hiçbir şey alınmaz veya depolanmaz.

Çapraz Kaynak Yalıtımı Web Oyunları İçin Neden Önemlidir? ​

En kullanışlı tarayıcı özelliklerinden bazıları yalnızca çapraz kaynak yalıtımıyla kullanılabilir. Oyunlar için bunların en önemlisi, çok iş parçacıklı WebAssembly'yi mümkün kılan paylaşımlı bellek özelliği SharedArrayBuffer'dır. Oyun motorunuz iş parçacıklı bir web derlemesi sunuyorsa bu özellik olmadan çalışmaz:

  • Godot web dışa aktarımları geçmişte SharedArrayBuffer gerektiriyordu (Godot 4.3+, bu başlıklara gerek kalmaması için tek iş parçacıklı dışa aktarma seçeneği ekledi).
  • Unity çok iş parçacıklı WebGL derlemeleri buna ihtiyaç duyar.
  • Emscripten pthreads, ffmpeg.wasm ve birçok fizik ile codec kütüphanesi de buna ihtiyaç duyar.

Yalıtım olmadan tarayıcı, yüksek çözünürlüklü zamanlayıcıları ve performance.measureUserAgentSpecificMemory() işlevini de kullanıma sunmaz. Dolayısıyla iş parçacıklı bir oyun herhangi bir hata göstermeden yüklenemiyorsa veya performance.now() şüpheli derecede düşük hassasiyetli görünüyorsa ilk olarak yalıtım denetimi yapmalısınız.

Çapraz Kaynak Yalıtımı Nasıl Çalışır? ​

Bir sayfa, HTML belgesinde şu iki yanıt başlığını gönderdiğinde çapraz kaynak yalıtımına sahip olur:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

COOP: same-origin, sayfanın aynı kaynaktan olmayan diğer pencerelerle bağlantısını keser. COEP: require-corp, her alt kaynağın gömülmeye açık olduğunu açıkça belirtmesini zorunlu kılar. Her ikisi de ayarlandığında self.crossOriginIsolated, true olur ve SharedArrayBuffer kullanıma açılır.

Ancak COEP'in önemli bir koşulu vardır: etkinleştirildiğinde her çapraz kaynak kaynağı (CDN görselleri, yazı tipleri, betikler ve iframe'ler) Cross-Origin-Resource-Policy: cross-origin göndermeli veya CORS ile alınmalıdır; aksi takdirde tarayıcı kaynağı engeller. Siteleri genellikle bozan kısım budur. Üçüncü taraf kaynaklarınızı kontrol edemiyorsanız bunun yerine Cross-Origin-Embedder-Policy: credentialless kullanın. Bu seçenek, çapraz kaynakların açıkça izin vermesini zorunlu kılmak yerine onları kimlik bilgileri olmadan yükler.

Nasıl Etkinleştirilir? ​

Cloudflare Pages (bir _headers dosyası):

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

Vite geliştirme sunucusu (vite.config.js):

js
export default {
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
}

nginx:

add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;

itch.io: HTML oyununuzun gömme seçeneklerinde "SharedArrayBuffer support" seçeneğini etkinleştirin; gerekli başlıklar sizin için ayarlanır.

Dağıtımdan sonra sayfayı yeniden yükleyip denetleyiciyi tekrar çalıştırın. crossOriginIsolated değeri true olarak değişmelidir.

Sık Sorulan Sorular ​

Sayfamın çapraz kaynak yalıtımına sahip olup olmadığını nasıl denetlerim? ​

Yukarıdaki denetleyiciye sitenizin URL'sini girin. Araç, sayfanın Cross-Origin-Opener-Policy ve Cross-Origin-Embedder-Policy başlıklarını sunucu tarafında okur ve bu birleşimin sayfayı yalıtıp yalıtmadığını bildirir. Kendi tarayıcınızda çalışma zamanı denetimi yapmak için sayfayı açıp konsolda crossOriginIsolated komutunu çalıştırın. Yalıtım etkin olduğunda bu komut true döndürür.

SharedArrayBuffer neden tanımsız? ​

Tarayıcılar SharedArrayBuffer'ı yalnızca çapraz kaynak yalıtımına sahip sayfalara sunar. Değeri undefined ise sayfanızda Cross-Origin-Opener-Policy: same-origin ve Cross-Origin-Embedder-Policy: require-corp başlıkları eksiktir ya da çapraz kaynaklardan biri COEP kapsamında yalıtımı engelliyordur. Başlıkları ayarlayın (yukarıya bakın) ve yeniden test edin.

COOP ve COEP nedir? ​

Cross-Origin-Opener-Policy (COOP), bir sayfanın diğer tarayıcı pencereleriyle nasıl etkileşime gireceğini kontrol eder. Cross-Origin-Embedder-Policy (COEP), hangi alt kaynakların gömülebileceğini kontrol eder. COOP: same-origin ile COEP: require-corp ayarlarının birlikte kullanılması, sayfaya çapraz kaynak yalıtımı kazandırarak SharedArrayBuffer ve diğer gelişmiş özellikleri kullanıma açar.

WebAssembly oyunum tarayıcıda yüklenmiyor. Nedeni bu olabilir mi? ​

Çoğu zaman evet. İş parçacıklı WebAssembly derlemeleri (bazı Godot ve Unity web dışa aktarımları, Emscripten pthreads ve ffmpeg.wasm) SharedArrayBuffer'a ihtiyaç duyar; bunun için de çapraz kaynak yalıtımı gerekir. Yukarıdaki denetleyici "yalıtılmamış" sonucu gösteriyorsa COOP/COEP başlıklarını ayarlayın veya varsa oyun motorunun tek iş parçacıklı derlemesini kullanın.

Cross-Origin-Resource-Policy başlığına ihtiyacım var mı? ​

Yalıttığınız sayfada gerekmez. Bir belgeye çapraz kaynak yalıtımı kazandıran başlıklar COOP ve COEP'tir ve bunlar belgeye eklenir. Cross-Origin-Resource-Policy (CORP) ise farklı ve ters yönde çalışan bir başlıktır: COEP: require-corp kullanan bir sayfanın çapraz kaynak kaynağını (görsel, yazı tipi veya betik) gömebilmesi için bu başlığı ilgili kaynağa eklersiniz. Bu nedenle denetleyici sayfanızda CORP için "ayarlanmamış" sonucunu gösteriyorsa bu beklenen ve normal bir durumdur. CORP'yi yalnızca diğer yalıtılmış sayfaların yüklemesi gereken varlıklara eklemelisiniz.

COEP'i etkinleştirmek üçüncü taraf gömmelerimi bozar mı? ​

Bozabilir. COEP: require-corp kullanıldığında her çapraz kaynak Cross-Origin-Resource-Policy başlığını göndermeli veya CORS kullanmalıdır; aksi takdirde engellenir. Kontrolünüzde olmayan CDN varlıkları ya da üçüncü taraf betikleri gömüyorsanız bu gereksinimi ortadan kaldıran COEP: credentialless seçeneğini kullanın.

İlgili İçerikler ​