COOP/COEP ile Wasm iş parçacıklarını (SharedArrayBuffer) etkinleştirin

Web oyununuz (veya oyun motoru çıktınız) WebAssembly iş parçacıkları kullanıyorsa çoğunlukla SharedArrayBuffer özelliğine ihtiyaç duyar. Modern tarayıcılar bunun için kaynaklar arası yalıtım gerektirir.

1) Hızlı kontrol: Yalıtılmış durumda mısınız?

Geliştirici Araçları’nı açın ve şunu çalıştırın:

self.crossOriginIsolated

Sonuç true ise SharedArrayBuffer için doğru güvenlik durumundasınız.

Resmî referans:

• https://developer.mozilla.org/docs/Web/API/Window/crossOriginIsolated

2) İhtiyacınız olan iki başlık

HTML yanıtınızda (ve genellikle uygulamanızın tamamında) şu yanıt başlıklarını sunun:

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

Resmî referanslar:

• https://web.dev/articles/why-coop-coep
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
• https://developer.chrome.com/blog/enabling-shared-array-buffer/

3) “Hâlâ çalışmamasının” bir numaralı nedeni: alt kaynaklar

COEP: require-corp kullanıldığında sayfanız artık farklı kaynaklardan gelen içerikleri serbestçe gömemez.

Farklı bir kaynaktan betik, görsel, worker, video vb. yüklüyorsanız bu kaynağın aşağıdakilerden biri aracılığıyla açıkça izin vermesi gerekir:

• CORS (Access-Control-Allow-Origin) veya
• CORP (Cross-Origin-Resource-Policy)

Resmî referans:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cross-Origin_Resource_Policy

4) Kopyala/yapıştır yapılandırmaları

Nginx

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

Node / Express

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

Cloudflare Pages (_headers)

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

5) Hata ayıklama kontrol listesi

• Ağ panelindeki belge yanıtında başlıkların bulunduğunu doğrulayın.
• self.crossOriginIsolated değerini kontrol edin.
• Engellenen istekleri arayın (Geliştirici Araçları’ndaki yaygın mesajlardan biri “blocked … by COEP” ifadesini içerir).
• CORS/CORP desteği sunmayan üçüncü taraf betiklerini kaldırın veya kendi sunucunuzda barındırın.

İlgili içerikler

• Hızlı yüklenen bir web oyunu yayınlayın
• 2026’da web oyunları için teknoloji yığını
• Oyun mantığı için Web Worker’lar — SharedArrayBuffer’dan yararlanan Worker’ları kullanma
• WebSocket ile çok oyunculu oyunların temelleri — kaynaklar arası yalıtıma ihtiyaç duyan çok oyunculu oyunlar
• Oyunları iframe ile gömme — COOP/COEP başlıklarının iframe ile gömülen içerikleri nasıl etkilediği

Harici kaynaklar

• MDN: Cross-Origin-Opener-Policy — COOP başlığı referansı
• MDN: Cross-Origin-Embedder-Policy — COEP başlığı referansı
• web.dev: Web sitenizi kaynaklar arası yalıtılmış hâle getirme — pratik dağıtım rehberi