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

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

Eiji Kitamura

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

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

पता लगाएं कि आपकी वेबसाइट पर SharedArrayBuffer का इस्तेमाल कहां किया गया है
Chrome 92 से, 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 का इस्तेमाल करने पर, DevTools Console से मिलने वाली चेतावनी
जब क्रॉस-ऑरिजिन आइसोलेशन के बिना 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. क्रॉस-ऑरिजिन रिसॉर्स, जैसे कि इमेज, स्क्रिप्ट, स्टाइलशीट, 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 दिखाता है या नहीं. इससे यह पुष्टि की जा सकती है कि आपका पेज क्रॉस-ऑरिजिन से अलग है.

संसाधन