क्रॉस-ऑरिजिन आइसोलेशन चालू करने के लिए गाइड

क्रॉस-ऑरिजिन आइसोलेशन की मदद से, वेब पेज में SharedArrayBuffer जैसी असरदार सुविधाओं का इस्तेमाल किया जा सकता है. इस लेख में, आपकी वेबसाइट पर क्रॉस-ऑरिजिन आइसोलेशन चालू करने का तरीका बताया गया है.

Eiji Kitamura

इस गाइड में, क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने का तरीका बताया गया है. SharedArrayBuffer performance.measureUserAgentSpecificMemory() या बेहतर सटीक जानकारी के लिए हाई रिज़ॉल्यूशन टाइमर का इस्तेमाल करने के लिए, क्रॉस-ऑरिजिन आइसोलेशन ज़रूरी है.

अगर आपको क्रॉस-ऑरिजिन आइसोलेशन चालू करना है, तो इसका आकलन करें कि इसका आपकी वेबसाइट के अन्य क्रॉस-ऑरिजिन रिसॉर्स पर क्या असर पड़ेगा, जैसे कि विज्ञापन प्लेसमेंट.

पता लगाएं कि आपकी वेबसाइट में SharedArrayBuffer का इस्तेमाल कहां किया जाता है
Chrome 92 से, SharedArrayBuffer का इस्तेमाल करने वाली सुविधाएं, क्रॉस-ऑरिजिन आइसोलेशन के बिना काम नहीं करेंगी. अगर आपको इस पेज पर SharedArrayBuffer के काम न करने का मैसेज मिला है, तो हो सकता है कि आपकी वेबसाइट या उस पर एम्बेड किए गए किसी रिसॉर्स में, SharedArrayBuffer का इस्तेमाल किया गया हो. यह पक्का करने के लिए कि किसी सुविधा को बंद किए जाने की वजह से आपकी वेबसाइट पर कोई रुकावट न आए, सबसे पहले यह पता लगाएं कि वेबसाइट का इस्तेमाल कहां किया गया है.

अगर आपको यह नहीं पता कि आपकी साइट में SharedArrayBuffer का इस्तेमाल कहां किया गया है, तो इसके दो तरीके हैं:

  • Chrome DevTools का इस्तेमाल करना
  • (बेहतर) माइग्रेशन रिपोर्टिंग का इस्तेमाल करना

अगर आपको पहले से ही पता है कि SharedArrayBuffer का इस्तेमाल कहां किया जा रहा है, तो सीधे क्रॉस-ऑरिजिन आइसोलेशन के असर का विश्लेषण करें पर जाएं.

Chrome DevTools का इस्तेमाल करना

Chrome DevTools की मदद से डेवलपर, वेबसाइटों की जांच कर सकते हैं.

  1. उस पेज पर Chrome DevTools खोलें जिस पर आपको लगता है कि SharedArrayBuffer का इस्तेमाल किया जा रहा है.
  2. कंसोल पैनल चुनें.
  3. अगर पेज SharedArrayBuffer का इस्तेमाल कर रहा है, तो यह मैसेज दिखेगा:
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. मैसेज के आखिर में मौजूद फ़ाइल का नाम और लाइन नंबर (जैसे, common-bundle.js:535) बताते हैं कि SharedArrayBuffer कहां से आ रहा है. अगर यह किसी तीसरे पक्ष की लाइब्रेरी है, तो समस्या को ठीक करने के लिए डेवलपर से संपर्क करें. अगर यह आपकी वेबसाइट के हिस्से के तौर पर लागू किया गया है, तो क्रॉस-ऑरिजिन आइसोलेशन चालू करने के लिए नीचे दी गई गाइड का पालन करें.
क्रॉस-ऑरिजिन आइसोलेशन के बिना SharedArrayBuffer का इस्तेमाल करने पर, DevToools कंसोल की चेतावनी
क्रॉस-ऑरिजिन आइसोलेशन के बिना, SharedArrayBuffer का इस्तेमाल करने पर, DevToools Console की चेतावनी.

(बेहतर) माइग्रेशन रिपोर्टिंग का इस्तेमाल करना

कुछ ब्राउज़र किसी खास एंडपॉइंट पर एपीआई को बंद करने की रिपोर्टिंग फ़ंक्शन होते हैं.

  1. रोक लगाने वाले रिपोर्ट सर्वर को सेट अप करें और रिपोर्टिंग यूआरएल पाएं. इसके लिए, आप किसी सार्वजनिक सेवा का इस्तेमाल कर सकते हैं या खुद सार्वजनिक सेवा बना सकते हैं.
  2. यूआरएल का इस्तेमाल करके, इस एचटीटीपी हेडर को उन पेजों पर सेट करें जिन पर SharedArrayBuffer दिखाया जा सकता है.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. हेडर का प्रसार शुरू होने के बाद, आपने जिस एंडपॉइंट को रजिस्टर किया है वह रोके जाने की रिपोर्ट इकट्ठा करना शुरू कर देगा.

लागू करने का एक उदाहरण यहां देखें: https://cross-origin-isolation.glitch.me.

क्रॉस-ऑरिजिन आइसोलेशन के असर का विश्लेषण करें

क्या यह बेहतर नहीं होगा कि आप इस बात का आकलन कर सकें कि क्रॉस-ऑरिजिन आइसोलेशन की सुविधा को चालू करने से आपकी साइट पर पड़ने वाले असर के बिना, साइट पर कोई गड़बड़ी नहीं होगी? Cross-Origin-Opener-Policy-Report-Only और Cross-Origin-Embedder-Policy-Report-Only एचटीटीपी हेडर की मदद से ऐसा किया जा सकता है.

  1. Cross-Origin-Opener-Policy-Report-Only: same-origin को अपने टॉप लेवल दस्तावेज़ पर सेट करें. जैसा कि नाम से पता चलता है, यह हेडर सिर्फ़ इस बारे में रिपोर्ट भेजता है कि COOP: same-origin का आपकी साइट पर क्या हो सकता है. इसका मतलब है कि यह पॉप-अप विंडो से कम्यूनिकेशन की सुविधा बंद नहीं करेगा.
  2. रिपोर्टिंग सेट अप करें और रिपोर्ट पाने और सेव करने के लिए, वेब सर्वर कॉन्फ़िगर करें.
  3. Cross-Origin-Embedder-Policy-Report-Only: require-corp को अपने टॉप लेवल दस्तावेज़ पर सेट करें. फिर से बता दें कि इस हेडर की मदद से यह देखा जा सकता है कि COEP: require-corp को चालू करने पर, उसकी साइट के काम करने के तरीके पर क्या असर पड़ा. इस हेडर को कॉन्फ़िगर करके, पिछले चरण में सेट अप किए गए रिपोर्टिंग सर्वर पर रिपोर्ट भेजी जा सकती है.

क्रॉस-ऑरिजिन आइसोलेशन के असर को कम करें

यह तय करने के बाद कि क्रॉस-ऑरिजिन आइसोलेशन का असर किन संसाधनों पर पड़ेगा, यहां उन क्रॉस-ऑरिजिन संसाधनों को ऑप्ट-इन करने के तरीके के बारे में सामान्य दिशा-निर्देश दिए गए हैं:

  1. इमेज, स्क्रिप्ट, स्टाइलशीट, iframe, और अन्य जैसे क्रॉस-ऑरिजिन रिसॉर्स पर, Cross-Origin-Resource-Policy: cross-origin हेडर सेट करें. एक ही साइट के रिसॉर्स पर, Cross-Origin-Resource-Policy: same-site हेडर सेट करें.
  2. सीओआरएस का इस्तेमाल करके लोड किए जा सकने वाले रिसॉर्स के लिए, पक्का करें कि यह चालू है. इसके लिए, इसके एचटीएमएल टैग में crossorigin एट्रिब्यूट की वैल्यू सेट करें (उदाहरण के लिए, <img src="example.jpg" crossorigin>). JavaScript फ़ेच करने के अनुरोध के लिए, पक्का करें कि request.mode को cors पर सेट किया गया हो.
  3. अगर आपको लोड किए गए iframe में SharedArrayBuffer जैसी बेहतरीन सुविधाओं का इस्तेमाल करना है, तो allow="cross-origin-isolated" को <iframe> में जोड़ें.
  4. अगर iframes या वर्कर स्क्रिप्ट में लोड किए गए क्रॉस-ऑरिजिन रिसॉर्स, iframe या वर्कर स्क्रिप्ट की एक और लेयर शामिल करते हैं, तो आगे बढ़ने से पहले इस सेक्शन में बताए गए निर्देशों को बार-बार लागू करें.
  5. यह पुष्टि करने के बाद कि सभी क्रॉस-ऑरिजिन रिसॉर्स ऑप्ट-इन किए गए हैं, iframes और वर्कर स्क्रिप्ट पर Cross-Origin-Embedder-Policy: require-corp हेडर सेट करें (यह एक जैसे ऑरिजिन या क्रॉस-ऑरिजिन पर ध्यान दिए बिना ज़रूरी है).
  6. पक्का करें कि कोई भी क्रॉस-ऑरिजिन पॉप-अप विंडो न हो, जिसके लिए postMessage() से संपर्क करने की ज़रूरत न हो. क्रॉस-ऑरिजिन आइसोलेशन चालू होने पर, इन्हें काम करते रहने का कोई तरीका नहीं है. कम्यूनिकेशन को किसी ऐसे दस्तावेज़ में ले जाया जा सकता है जो क्रॉस-ऑरिजिन आइसोलेटेड न हो या कम्यूनिकेशन का कोई दूसरा तरीका इस्तेमाल किया जा रहा हो, जैसे कि एचटीटीपी अनुरोध.

क्रॉस-ऑरिजिन आइसोलेशन चालू करें

क्रॉस-ऑरिजिन आइसोलेशन की मदद से होने वाले असर को कम करने के बाद, क्रॉस-ऑरिजिन आइसोलेशन चालू करने के कुछ सामान्य दिशा-निर्देश यहां दिए गए हैं:

  1. अपने टॉप-लेवल के दस्तावेज़ पर Cross-Origin-Opener-Policy: same-origin हेडर सेट करें. अगर आपने Cross-Origin-Opener-Policy-Report-Only: same-origin को सेट किया था, तो इसे बदलें. इससे आपके टॉप-लेवल के दस्तावेज़ और उसकी पॉप-अप विंडो के बीच कम्यूनिकेशन ब्लॉक हो जाता है.
  2. अपने टॉप-लेवल के दस्तावेज़ पर Cross-Origin-Embedder-Policy: require-corp हेडर सेट करें. अगर आपने Cross-Origin-Embedder-Policy-Report-Only: require-corp को सेट किया था, तो इसे बदलें. इससे उन क्रॉस-ऑरिजिन रिसॉर्स को लोड होने से रोक दिया जाएगा जिन्हें ऑप्ट-इन नहीं किया गया है.
  3. देखें कि self.crossOriginIsolated, कंसोल में true दिखाता है या नहीं. इससे यह पुष्टि की जा सकेगी कि आपका पेज क्रॉस-ऑरिजिन आइसोलेटेड है.

रिसॉर्स