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

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

Eiji Kitamura

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

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

पता करें कि आपकी वेबसाइट में SharedArrayBuffer का इस्तेमाल कहां किया जाता है

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

मकसद:

• SharedArrayBuffer का इस्तेमाल जारी रखने के लिए, क्रॉस-ऑरिजिन आइसोलेशन चालू करें.
• अगर SharedArrayBuffer का इस्तेमाल करने वाले तीसरे पक्ष के कोड का इस्तेमाल किया जा रहा है, तो कार्रवाई करने के लिए तीसरे पक्ष की सेवा देने वाली कंपनी को सूचना दें.

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

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

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

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

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

1. जिस पेज पर आपको लगता है कि SharedArrayBuffer का इस्तेमाल किया जा रहा है उस पर Chrome DevTools खोलें.
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 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 को चालू करने से होने वाले असर को देखा जा सकता है. इससे, आपकी साइट के काम करने पर कोई असर नहीं पड़ता. इस हेडर को कॉन्फ़िगर करके, उसी रिपोर्टिंग सर्वर पर रिपोर्ट भेजी जा सकती हैं जिसे आपने पिछले चरण में सेट अप किया था.

ध्यान दें: Chrome DevTools के नेटवर्क पैनल में, डोमेन कॉलम को चालू करके भी यह देखा जा सकता है कि किन संसाधनों पर असर पड़ेगा.

चेतावनी: क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने पर, उन क्रॉस-ऑरिजिन संसाधनों को लोड होने से रोक दिया जाएगा जिनके लिए आपने साफ़ तौर पर ऑप्ट-इन नहीं किया है. साथ ही, यह आपके टॉप-लेवल दस्तावेज़ को पॉप-अप विंडो के साथ कम्यूनिकेट करने से भी रोक देगा. हम Cross-Origin-Resource-Policy को बड़े पैमाने पर डिप्लॉय करने के तरीके ढूंढ रहे हैं, क्योंकि क्रॉस-ऑरिजिन आइसोलेशन के लिए सभी सबरिसॉर्स को साफ़ तौर पर ऑप्ट-इन करना पड़ता है. इसलिए, हमने इसके उलट एक नया तरीका अपनाया है: एक नया सीओईपी "बिना क्रेडेंशियल वाला" मोड. इसकी मदद से, सभी क्रेडेंशियल हटाकर, सीओआरपी हेडर के बिना संसाधन लोड किए जा सकते हैं. हमें उम्मीद है कि इससे आपको यह पक्का करने में आसानी होगी कि सब-रिसॉर्स, Cross-Origin-Resource-Policy हेडर भेज रहे हैं या नहीं. हालांकि, credentialless मोड, Chrome के 96 वर्शन से उपलब्ध है, लेकिन यह फ़िलहाल किसी दूसरे ब्राउज़र पर काम नहीं करता. इस वजह से, हो सकता है कि कुछ डेवलपर को इस चरण में सीओओपी या सीओईपी को डिप्लॉय करने में समस्या आ रही हो. यह भी पता है कि Cross-Origin-Opener-Policy: same-origin हेडर, उन इंटिग्रेशन को बंद कर देगा जिनके लिए क्रॉस-ऑरिजिन विंडो इंटरैक्शन की ज़रूरत होती है. जैसे, OAuth और पेमेंट. इस समस्या को कम करने के लिए, हम Cross-Origin-Opener-Policy: same-origin-allow-popups के लिए क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने के लिए, शर्तों को आसान बनाने की कोशिश कर रहे हैं. इस तरह, अपने-आप खुलने वाली विंडो के साथ कम्यूनिकेशन किया जा सकेगा. अगर आपको क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करनी है, लेकिन इन समस्याओं की वजह से ऐसा नहीं हो पा रहा है, तो हमारा सुझाव है कि आप ऑरिजिन ट्रायल के लिए रजिस्टर करें और नए मोड उपलब्ध होने तक इंतज़ार करें. जब तक ये नए मोड उपलब्ध नहीं हो जाते, तब तक हम ऑरिजिन ट्रायल को बंद नहीं करेंगे.

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

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

1. क्रॉस-ऑरिजिन रिसॉर्स, जैसे कि इमेज, स्क्रिप्ट, स्टाइलशीट, iframes, और अन्य पर, Cross-Origin-Resource-Policy: cross-origin हेडर सेट करें. एक ही साइट के रिसॉर्स पर, Cross-Origin-Resource-Policy: same-site हेडर सेट करें.
2. CORS का इस्तेमाल करके लोड किए जा सकने वाले संसाधनों के लिए, पक्का करें कि यह चालू हो. इसके लिए, एचटीएमएल टैग (उदाहरण के लिए, <img src="example.jpg" crossorigin>) में 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 दिखाता है या नहीं.

किसी लोकल सर्वर पर क्रॉस-ऑरिजिन आइसोलेशन चालू करना मुश्किल हो सकता है, क्योंकि सामान्य सर्वर हेडर भेजने की सुविधा नहीं देते. क्रॉस-ऑरिजिन आइसोलेशन को चालू किए बिना, SharedArrayBuffer को चालू करने के लिए, कमांड लाइन फ़्लैग --enable-features=SharedArrayBuffer का इस्तेमाल करके Chrome को लॉन्च किया जा सकता है. अलग-अलग प्लैटफ़ॉर्म पर, कमांड-लाइन फ़्लैग की मदद से Chrome को चलाने का तरीका जानें.

संसाधन

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