Aktifkan thread Wasm (SharedArrayBuffer) dengan COOP/COEP

Jika game web Anda (atau hasil ekspor engine) menggunakan thread WebAssembly, biasanya game tersebut bergantung pada SharedArrayBuffer. Browser modern memerlukan isolasi lintas asal untuk itu.

1) Pemeriksaan cepat: apakah halaman Anda sudah terisolasi?

Buka DevTools dan jalankan:

self.crossOriginIsolated

Jika nilainya true, Anda berada dalam status keamanan yang tepat untuk SharedArrayBuffer.

Referensi resmi:

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

2) Dua header yang Anda perlukan

Sajikan header respons berikut pada HTML Anda (dan biasanya di seluruh aplikasi Anda):

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

Referensi resmi:

• 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) Alasan utama mengapa ini “masih tidak berfungsi”: sub-sumber daya

Dengan COEP: require-corp, halaman Anda tidak lagi dapat menyematkan sumber daya lintas asal secara bebas.

Jika Anda memuat skrip/gambar/worker/video/dll. dari lintas asal, sumber daya tersebut harus memberikan izin melalui:

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

Referensi resmi:

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

4) Konfigurasi siap salin-tempel

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) Daftar periksa debugging

• Pastikan header tersedia pada respons dokumen di panel Network.
• Periksa self.crossOriginIsolated.
• Cari permintaan yang diblokir (pesan DevTools yang umum mencantumkan “blocked … by COEP”).
• Hapus atau hosting sendiri skrip pihak ketiga yang tidak mendukung CORS/CORP.

Terkait

• Rilis game web yang dimuat dengan cepat
• Stack teknologi game web pada 2026
• Web Worker untuk logika game — menggunakan Worker yang mendapatkan manfaat dari SharedArrayBuffer
• Dasar-dasar multipemain WebSocket — game multipemain yang memerlukan isolasi lintas asal
• Menyematkan game dengan iframe — pengaruh header COOP/COEP terhadap penyematan iframe

Sumber Daya Eksternal

• MDN: Cross-Origin-Opener-Policy — referensi header COOP
• MDN: Cross-Origin-Embedder-Policy — referensi header COEP
• web.dev: Membuat situs web Anda terisolasi lintas asal — panduan penerapan praktis