Skip to content

COOP/COEP के साथ Wasm threads (SharedArrayBuffer) चालू करें

अगर आपका web game (या engine export) WebAssembly threads का इस्तेमाल करता है, तो यह अक्सर SharedArrayBuffer पर निर्भर रहता है। आधुनिक browsers इसके लिए cross-origin isolation ज़रूरी मानते हैं।

Diagram: cross-origin isolation headers

1) झटपट जाँच: क्या आप isolated हैं?

DevTools खोलें और यह चलाएँ:

js
self.crossOriginIsolated

अगर यह true है, तो आप SharedArrayBuffer के लिए सही security state में हैं।

आधिकारिक संदर्भ:

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

2) आपको जिन दो headers की ज़रूरत है

ये response headers अपने HTML पर (और आम तौर पर पूरे app पर) भेजें:

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

आधिकारिक संदर्भ:

  • 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) "अब भी काम नहीं कर रहा" की सबसे बड़ी वजह: subresources

COEP: require-corp के साथ आपका page अब cross-origin resources को आज़ादी से embed नहीं कर सकता।

अगर आप कोई cross-origin script/image/worker/video वगैरह load करते हैं, तो उस resource को इनमें से किसी एक तरीके से opt in करना होगा:

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

आधिकारिक संदर्भ:

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

4) कॉपी/पेस्ट configs

Nginx

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

Node / Express

js
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)

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

5) Debugging चेकलिस्ट

  • Network panel में पुष्टि करें कि document response पर ये headers मौजूद हैं।
  • self.crossOriginIsolated जाँचें।
  • blocked requests देखें (DevTools का आम message होता है "blocked … by COEP")।
  • ऐसे किसी भी third-party script को हटाएँ या खुद host करें जो CORS/CORP को support नहीं करता।

संबंधित

बाहरी संसाधन