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

क्रॉस-ऑरिजिन आइसोलेशन की मदद से, वेब पेज पर 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  for more details. common-bundle.js:535

4. मैसेज के आखिर में मौजूद फ़ाइल का नाम और लाइन नंबर (उदाहरण के लिए, common-bundle.js:535) से पता चलता है कि SharedArrayBuffer कहां से आ रहा है. अगर यह तीसरे पक्ष की लाइब्रेरी है, तो समस्या ठीक करने के लिए डेवलपर से संपर्क करें. अगर इसे आपकी वेबसाइट के हिस्से के तौर पर लागू किया गया है, तो क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने के लिए, यहां दिया गया तरीका अपनाएं.

(ऐडवांस) किसी एपीआई या सुविधा के बंद होने की रिपोर्ट भेजने की सुविधा का इस्तेमाल करना

कुछ ब्राउज़र में, किसी तय किए गए एंडपॉइंट पर एपीआई के बंद होने की सूचना देने की सुविधा होती है.

1. डेटा ट्रांसफ़र बंद होने की रिपोर्ट का सर्वर सेट अप करें और रिपोर्टिंग यूआरएल पाएं. इसके लिए, सार्वजनिक सेवा का इस्तेमाल किया जा सकता है या खुद ही कोई सेवा बनाई जा सकती है.
2. यूआरएल का इस्तेमाल करके, उन पेजों के लिए यहां दिया गया एचटीटीपी हेडर सेट करें जो SharedArrayBuffer दिखा सकते हैं.

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

3. हेडर के लागू होने के बाद, आपने जिस एंडपॉइंट को रजिस्टर किया है उसे डेप्रिकेशन रिपोर्ट इकट्ठा करना शुरू कर देना चाहिए.

लागू करने का उदाहरण देखें.

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

क्या यह बेहतर नहीं होगा कि क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने से, आपकी साइट पर पड़ने वाले असर का आकलन किया जा सके? इसके लिए, आपको अपनी साइट में कोई बदलाव करने की ज़रूरत नहीं होगी. 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. CORS का इस्तेमाल करके लोड किए जा सकने वाले संसाधनों के लिए, पक्का करें कि यह चालू हो. इसके लिए, एचटीएमएल टैग में crossorigin एट्रिब्यूट सेट करें. उदाहरण के लिए, <img src="example.jpg" crossorigin>. JavaScript फ़ेच अनुरोध के लिए, पक्का करें कि request.mode को cors पर सेट किया गया हो.
3. अगर आपको लोड किए गए iframe में SharedArrayBuffer जैसी बेहतरीन सुविधाओं का इस्तेमाल करना है, तो <iframe> में allow="cross-origin-isolated" जोड़ें.
4. अगर iframe या वर्कर स्क्रिप्ट में लोड किए गए क्रॉस-ऑरिजिन संसाधनों में, iframe या वर्कर स्क्रिप्ट की एक और लेयर शामिल है, तो आगे बढ़ने से पहले इस सेक्शन में बताए गए चरणों को बार-बार लागू करें.
5. जब आपको यह पुष्टि हो जाए कि सभी क्रॉस-ऑरिजिन रिसॉर्स के लिए ऑप्ट-इन किया गया है, तब iframe और वर्कर स्क्रिप्ट पर 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 के तौर पर दिखनी चाहिए.

संसाधन

• COOP और COEP का इस्तेमाल करके, अपनी वेबसाइट को "क्रॉस-ऑरिजिन आइसोलेटेड" बनाना
• Android Chrome 88 और Desktop Chrome 92 में SharedArrayBuffer से जुड़े अपडेट