Pemeriksa Isolasi Lintas-Origin

Masukkan URL situs apa pun untuk mengetahui apakah situs tersebut terisolasi lintas-origin, serta apakah SharedArrayBuffer dan WebAssembly multithread dapat berfungsi di sana. Pemeriksa ini membaca header respons Cross-Origin-Opener-Policy dan Cross-Origin-Embedder-Policy dari URL tersebut, lalu memberi tahu apa yang kurang. Alat ini hanya membaca header; tidak ada hal lain yang diambil atau disimpan.

Mengapa Isolasi Lintas-Origin Penting untuk Game Web

Beberapa kemampuan peramban yang paling berguna hanya tersedia dengan isolasi lintas-origin, dan yang paling penting untuk game adalah SharedArrayBuffer, yaitu memori bersama yang memungkinkan WebAssembly multithread. Jika engine Anda menyediakan build web multithread, build tersebut tidak akan berjalan tanpanya:

• Ekspor web Godot secara historis memerlukan SharedArrayBuffer (Godot 4.3+ menambahkan ekspor single-thread agar tidak memerlukan header tersebut).
• Build WebGL multithread Unity memerlukannya.
• pthread Emscripten, ffmpeg.wasm, serta banyak pustaka fisika dan codec juga memerlukannya.

Tanpa isolasi, peramban juga tidak menyediakan pewaktu beresolusi tinggi dan performance.measureUserAgentSpecificMemory(). Jadi, jika game multithread gagal dimuat tanpa pesan, atau performance.now() tampak memiliki presisi yang mencurigakan, pemeriksaan isolasi adalah hal pertama yang perlu dijalankan.

Cara Kerja Isolasi Lintas-Origin

Sebuah halaman menjadi terisolasi lintas-origin ketika dokumen HTML mengirimkan dua header respons berikut:

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

COOP: same-origin memisahkan halaman dari jendela lain yang tidak memiliki origin yang sama. COEP: require-corp menyatakan bahwa setiap subresource harus secara eksplisit mengizinkan dirinya untuk disematkan. Ketika keduanya ditetapkan, self.crossOriginIsolated menjadi true dan SharedArrayBuffer dapat digunakan.

Masalahnya terletak pada COEP: setelah diaktifkan, setiap resource lintas-origin (gambar CDN, font, skrip, iframe) harus mengirimkan Cross-Origin-Resource-Policy: cross-origin atau diambil menggunakan CORS; jika tidak, peramban akan memblokirnya. Bagian inilah yang biasanya merusak situs. Jika Anda tidak dapat mengendalikan resource pihak ketiga, gunakan Cross-Origin-Embedder-Policy: credentialless sebagai gantinya. Opsi ini memuat resource lintas-origin tanpa kredensial, alih-alih mengharuskan resource tersebut memberikan izin eksplisit.

Cara Mengaktifkannya

Cloudflare Pages (file _headers):

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

Server pengembangan Vite (vite.config.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: aktifkan "Dukungan SharedArrayBuffer" di opsi sematan game HTML Anda agar header tersebut ditetapkan secara otomatis.

Setelah melakukan deployment, muat ulang halaman dan jalankan kembali pemeriksa. crossOriginIsolated seharusnya berubah menjadi true.

Pertanyaan Umum

Bagaimana cara memeriksa apakah halaman saya terisolasi lintas-origin?

Masukkan URL situs Anda ke pemeriksa di atas. Alat ini membaca header Cross-Origin-Opener-Policy dan Cross-Origin-Embedder-Policy halaman dari sisi server, lalu memberi tahu apakah kombinasi tersebut membuat halaman terisolasi. Untuk pemeriksaan saat runtime di peramban Anda sendiri, buka halaman tersebut dan jalankan crossOriginIsolated di konsol. Nilainya akan menjadi true ketika isolasi aktif.

Mengapa SharedArrayBuffer tidak terdefinisi?

Peramban hanya menyediakan SharedArrayBuffer untuk halaman yang terisolasi lintas-origin. Jika nilainya undefined, halaman Anda tidak memiliki header Cross-Origin-Opener-Policy: same-origin dan Cross-Origin-Embedder-Policy: require-corp, atau ada resource lintas-origin yang menghambat isolasi berdasarkan COEP. Tetapkan header tersebut (lihat di atas), lalu uji kembali.

Apa itu COOP dan COEP?

Cross-Origin-Opener-Policy (COOP) mengendalikan cara sebuah halaman berinteraksi dengan jendela penjelajahan lain. Cross-Origin-Embedder-Policy (COEP) mengendalikan subresource mana yang dapat disematkan. Menetapkan COOP: same-origin dan COEP: require-corp secara bersamaan membuat halaman terisolasi lintas-origin, sehingga SharedArrayBuffer dan fitur canggih lainnya dapat digunakan.

Game WebAssembly saya tidak dapat dimuat di peramban. Apakah ini penyebabnya?

Sering kali, ya. Build WebAssembly multithread (sebagian ekspor web Godot dan Unity, pthread Emscripten, ffmpeg.wasm) memerlukan SharedArrayBuffer, yang membutuhkan isolasi lintas-origin. Jika pemeriksa di atas menampilkan "tidak terisolasi", tetapkan header COOP/COEP atau gunakan build single-thread dari engine jika tersedia.

Apakah saya memerlukan header Cross-Origin-Resource-Policy?

Tidak pada halaman yang Anda isolasi. COOP dan COEP-lah yang membuat dokumen terisolasi lintas-origin, dan keduanya diterapkan pada dokumen tersebut. Cross-Origin-Resource-Policy (CORP) adalah header berbeda dengan arah berlawanan: Anda menerapkannya pada resource lintas-origin (gambar, font, atau skrip) agar halaman yang menggunakan COEP: require-corp diizinkan menyematkannya. Jadi, jika pemeriksa menampilkan CORP "belum ditetapkan" pada halaman Anda, itu wajar dan tidak menjadi masalah. Anda hanya perlu menambahkan CORP ke aset yang perlu dimuat oleh halaman terisolasi lainnya.

Apakah mengaktifkan COEP akan merusak sematan pihak ketiga saya?

Bisa. Dengan COEP: require-corp, setiap resource lintas-origin harus mengirimkan Cross-Origin-Resource-Policy atau menggunakan CORS; jika tidak, resource tersebut akan diblokir. Jika Anda menyematkan aset CDN atau skrip pihak ketiga yang tidak Anda kendalikan, gunakan COEP: credentialless sebagai gantinya agar persyaratan tersebut tidak berlaku.

Terkait

• COOP/COEP dan SharedArrayBuffer — tutorial lengkap beserta kode
• Pemeriksa WebGL & WebGPU — uji kemampuan GPU peramban Anda
• Web Worker untuk logika game — memindahkan pekerjaan dari thread utama
• Engine Game Web Terbaik untuk 2026 — engine mana yang memerlukan thread
• Cinevva Engine — engine kami yang mengutamakan web