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

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

Eiji Kitamura

पब्लिश किया गया: 13 अप्रैल, 2020, पिछली बार अपडेट किया गया: 21 जून, 2022

इस दस्तावेज़ में, COOP और COEP का इस्तेमाल करने का तरीका बताया गया है. COOP और COEP का इस्तेमाल करके, अपनी वेबसाइट को "क्रॉस-ऑरिजिन आइसोलेटेड" बनाएं लेख में, इस बारे में ज़्यादा जानकारी दी गई है कि यह क्यों ज़रूरी है.

कुछ वेब एपीआई, साइड-चैनल हमलों का खतरा बढ़ाते हैं. जैसे, Spectre. इस जोखिम को कम करने के लिए, ब्राउज़र एक अलग एनवायरमेंट उपलब्ध कराते हैं. इसे क्रॉस-ओरिजिन आइसोलेटेड कहा जाता है. इसमें ऑप्ट-इन करना होता है. क्रॉस-ऑरिजिन आइसोलेटेड स्टेट में, वेबपेज इन खास सुविधाओं का इस्तेमाल कर पाएगा:

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

क्रॉस-ऑरिजिन आइसोलेटेड स्टेट के लिए ऑप्ट इन करने के लिए, आपको मुख्य दस्तावेज़ पर ये एचटीटीपी हेडर भेजने होंगे:

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

ये हेडर, ब्राउज़र को उन संसाधनों या iframe को लोड करने से रोकते हैं जिन्होंने क्रॉस-ऑरिजिन दस्तावेज़ों से लोड होने का विकल्प नहीं चुना है. साथ ही, क्रॉस-ऑरिजिन विंडो को आपके दस्तावेज़ के साथ सीधे तौर पर इंटरैक्ट करने से रोकते हैं. इसका यह भी मतलब है कि क्रॉस-ऑरिजिन से लोड किए जा रहे संसाधनों के लिए, ऑप्ट-इन करना ज़रूरी है.

self.crossOriginIsolated की जांच करके, यह पता लगाया जा सकता है कि कोई वेब पेज क्रॉस-ऑरिजिन आइसोलेटेड स्थिति में है या नहीं.

शब्दावली

इस दस्तावेज़ में, एक जैसे नाम वाली और संक्षिप्त शब्दावली का इस्तेमाल किया गया है. ज़्यादा जानकारी के लिए, हमने एक छोटी सी शब्दावली तैयार की है:

• COEP: क्रॉस ओरिजिन एम्बेडर नीति
• COOP: क्रॉस ओरिजन ओपनर पॉलिसी
• CORP: Cross Origin Resource Policy
• सीओआरएस: क्रॉस ऑरिजिन रिसॉर्स शेयरिंग
• CORB: क्रॉस ओरिजिन रीड ब्लॉकिंग

अपनी वेबसाइट को क्रॉस-ऑरिजिन आइसोलेटेड बनाना

1. सबसे ऊपर के दस्तावेज़ पर Cross-Origin-Opener-Policy: same-origin सेट करना

टॉप-लेवल के किसी दस्तावेज़ पर COOP: same-origin चालू करने पर, एक ही ऑरिजिन वाली विंडो और दस्तावेज़ से खोली गई विंडो का ब्राउज़िंग कॉन्टेक्स्ट ग्रुप अलग होता है. हालांकि, अगर वे एक ही ऑरिजिन में हैं और उनकी COOP सेटिंग एक जैसी है, तो उनका ब्राउज़िंग कॉन्टेक्स्ट ग्रुप एक ही होगा. इसलिए, खुली हुई विंडो के लिए आइसोलेशन लागू किया जाता है. साथ ही, दोनों विंडो के बीच आपसी बातचीत करने की सुविधा बंद कर दी जाती है.

ब्राउज़िंग कॉन्टेक्स्ट ग्रुप, विंडो का एक ऐसा सेट होता है जो एक-दूसरे को रेफ़रंस कर सकती हैं. उदाहरण के लिए, टॉप-लेवल का दस्तावेज़ और उसके चाइल्ड दस्तावेज़, जिनमें <iframe> एम्बेड किया गया है. अगर कोई वेबसाइट (https://a.example) डायलॉग विंडो (https://b.example) खोलती है, तो ओपनर विंडो और डायलॉग विंडो, एक ही ब्राउज़िंग कॉन्टेक्स्ट शेयर करती हैं. इसलिए, उनके पास window.opener जैसे DOM एपीआई की मदद से एक-दूसरे को ऐक्सेस करने की अनुमति होती है.

DevTools से यह देखा जा सकता है कि विंडो खोलने वाला और उसे खोलने वाला, अलग-अलग ब्राउज़िंग कॉन्टेक्स्ट ग्रुप में हैं या नहीं.

2. संसाधनों पर सीओआरपी या सीओआरएस चालू करना

पक्का करें कि पेज में मौजूद सभी संसाधन, CORP या CORS HTTP हेडर के साथ लोड किए गए हों. यह चरण, चौथे चरण, यानी COEP चालू करने के लिए ज़रूरी है.

संसाधन के टाइप के आधार पर, आपको यह तरीका अपनाना होगा:

• अगर रिसॉर्स को सिर्फ़ एक ही ऑरिजिन से लोड किया जाना है, तो Cross-Origin-Resource-Policy: same-origin हेडर सेट करें.
• अगर रिसॉर्स को सिर्फ़ एक ही साइट से लोड किया जाना है, लेकिन क्रॉस ऑरिजिन से, तो Cross-Origin-Resource-Policy: same-site हेडर सेट करें.
• अगर संसाधन को आपके कंट्रोल में मौजूद एक से ज़्यादा ऑरिजिन से लोड किया जाता है, तो हो सके, तो Cross-Origin-Resource-Policy: cross-origin हेडर सेट करें.
• अलग-अलग ऑरिजिन के उन संसाधनों के लिए जिन पर आपका कोई कंट्रोल नहीं है:
  • अगर रिसॉर्स को सीओआरएस के साथ दिखाया जाता है, तो लोडिंग एचटीएमएल टैग में crossorigin एट्रिब्यूट का इस्तेमाल करें. (उदाहरण के लिए, <img src="***" crossorigin>.)
  • संसाधन के मालिक से, CORS या CORP में से किसी एक को इस्तेमाल करने के लिए कहें.
• आईफ़्रेम के लिए, इन्हीं सिद्धांतों का पालन करें और कॉन्टेक्स्ट के हिसाब से Cross-Origin-Resource-Policy: cross-origin (या same-site, same-origin) सेट करें.
• WebWorker के साथ लोड की गई स्क्रिप्ट को एक ही ऑरिजिन से दिखाया जाना चाहिए. इसलिए, आपको CORP या सीओआरएस हेडर की ज़रूरत नहीं होती.
• COEP: require-corp के साथ दिखाए गए किसी दस्तावेज़ या वर्कर के लिए, सीओआरएस के बिना लोड किए गए क्रॉस-ऑरिजिन सब-रिसोर्स को Cross-Origin-Resource-Policy: cross-origin हेडर सेट करना होगा, ताकि उन्हें एम्बेड किया जा सके. उदाहरण के लिए, यह <script>, importScripts, <link>, <video>, <iframe> वगैरह पर लागू होता है.

iframes में आइसोलेशन

<iframe> टैग पर allow="cross-origin-isolated" अनुमतियों की नीति लागू करके, iframe में एम्बेड किए गए किसी दस्तावेज़ पर क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू की जा सकती है. इसके लिए, इन शर्तों को पूरा करना ज़रूरी है. दस्तावेज़ों की पूरी चेन, जिसमें पैरंट फ़्रेम और चाइल्ड फ़्रेम शामिल हैं, को भी क्रॉस-ऑरिजिन आइसोलेट किया जाना चाहिए.

3. एम्बेड किए गए संसाधनों का आकलन करने के लिए, COEP Report-Only एचटीटीपी हेडर का इस्तेमाल करें

COEP को पूरी तरह से चालू करने से पहले, Cross-Origin-Embedder-Policy-Report-Only हेडर का इस्तेमाल करके ड्राई रन किया जा सकता है. इससे यह पता लगाया जा सकता है कि नीति सही तरीके से काम कर रही है या नहीं. आपको एम्बेड किए गए कॉन्टेंट को ब्लॉक किए बिना रिपोर्ट मिलेंगी.

इसे सभी दस्तावेज़ों पर बार-बार लागू करें. इनमें टॉप-लेवल का दस्तावेज़, iframe, और वर्कर स्क्रिप्ट शामिल हैं. Report-Only एचटीटीपी हेडर के बारे में जानकारी पाने के लिए, Reporting API का इस्तेमाल करके समस्याओं का पता लगाना लेख पढ़ें.

4. COEP चालू करना

यह चरण सिर्फ़ तब पूरा किया जा सकता है, जब आपने यह पक्का कर लिया हो कि संसाधनों के लिए सीओआरपी या सीओआरएस चालू है.

जब आपको यह पुष्टि हो जाए कि सब कुछ ठीक से काम कर रहा है और सभी संसाधन लोड किए जा सकते हैं, तो Cross-Origin-Embedder-Policy-Report-Only हेडर को उसी वैल्यू वाले Cross-Origin-Embedder-Policy हेडर पर स्विच करें. ऐसा सभी दस्तावेज़ों के लिए करें. इनमें वे दस्तावेज़ भी शामिल हैं जो iframe और वर्कर स्क्रिप्ट के साथ एम्बेड किए गए हैं.

यह पता लगाना कि आइसोलेशन की प्रोसेस पूरी हुई या नहीं

जब वेब पेज, क्रॉस-ऑरिजिन आइसोलेटेड स्टेट में होता है और सभी संसाधन और विंडो, एक ही ब्राउज़िंग कॉन्टेक्स्ट ग्रुप में आइसोलेट किए जाते हैं, तब self.crossOriginIsolated प्रॉपर्टी, true वैल्यू दिखाती है. इस एपीआई का इस्तेमाल करके, यह पता लगाया जा सकता है कि आपने ब्राउज़िंग कॉन्टेक्स्ट ग्रुप को अलग किया है या नहीं. साथ ही, यह भी पता लगाया जा सकता है कि आपको performance.measureUserAgentSpecificMemory() जैसी सुविधाओं का ऐक्सेस मिला है या नहीं.

गड़बड़ियाँ ठीक करने के लिए

आपको COOP और COEP से जुड़ी समस्याएं आ सकती हैं. डीबग करने के लिए, ब्राउज़र डेवलपर टूल या Reporting API का इस्तेमाल किया जा सकता है.

Chrome DevTools की मदद से डीबग करना

स्क्रीन पर रेंडर किए गए संसाधनों, जैसे कि इमेज के लिए, COEP से जुड़ी समस्याओं का पता लगाना काफ़ी आसान होता है. ऐसा इसलिए, क्योंकि अनुरोध ब्लॉक कर दिया जाता है और पेज पर यह दिखना चाहिए कि इमेज मौजूद नहीं है. हालांकि, जिन रिसॉर्स पर विज़ुअल असर नहीं पड़ता है उनके लिए COEP से जुड़ी समस्याएं शायद नज़र न आएं. जैसे, स्क्रिप्ट या स्टाइल. इसके लिए, DevTools के नेटवर्क पैनल का इस्तेमाल करें.

अगर COEP से जुड़ी कोई समस्या है, तो आपको स्थिति कॉलम में (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) दिखेगा.

इसके बाद, ज़्यादा जानकारी देखने के लिए एंट्री पर क्लिक करें.

ऐप्लिकेशन पैनल की मदद से, iframe और डायलॉग विंडो की स्थिति भी तय की जा सकती है. बाईं ओर मौजूद "फ़्रेम" सेक्शन पर जाएं. इसके बाद, रिसोर्स स्ट्रक्चर का ब्यौरा देखने के लिए, "सबसे ऊपर" को बड़ा करें.

आईफ़्रेम का स्टेटस देखा जा सकता है. जैसे, SharedArrayBuffer की उपलब्धता वगैरह.

डायलॉग विंडो की स्थिति भी देखी जा सकती है. जैसे, यह क्रॉस-ऑरिजिन आइसोलेटेड है या नहीं.

Reporting API का इस्तेमाल करके समस्याओं का पता लगाना

Reporting API एक और तरीका है. इसकी मदद से, अलग-अलग समस्याओं का पता लगाया जा सकता है. Reporting API को कॉन्फ़िगर किया जा सकता है. इससे आपके उपयोगकर्ताओं के ब्राउज़र को यह निर्देश दिया जा सकता है कि जब भी COEP किसी संसाधन को लोड होने से रोकता है या COOP किसी डायलॉग विंडो को अलग करता है, तब एक रिपोर्ट भेजी जाए. Chrome, Reporting API का इस्तेमाल कई कामों के लिए करता है. जैसे, COEP और COOP. Chrome के वर्शन 69 से यह सुविधा उपलब्ध है.

Reporting API को कॉन्फ़िगर करने और रिपोर्ट पाने के लिए सर्वर सेट अप करने का तरीका जानें.

COEP रिपोर्ट का उदाहरण

जब क्रॉस-ऑरिजिन रिसॉर्स को ब्लॉक किया जाता है, तब COEP रिपोर्ट का पेलोड इस तरह दिखता है:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

सीओओपी रिपोर्ट का उदाहरण

डायलॉग बॉक्स को अलग से खोलने पर, COOP रिपोर्ट का पेलोड इस तरह दिखता है:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

जब अलग-अलग ब्राउज़िंग कॉन्टेक्स्ट ग्रुप एक-दूसरे को ऐक्सेस करने की कोशिश करते हैं, तब COOP भी एक रिपोर्ट भेजता है. ऐसा सिर्फ़ "report-only" मोड पर होता है. उदाहरण के लिए, postMessage() की कोशिश करने पर रिपोर्ट इस तरह दिखेगी:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

सीखने वाली अहम बातें

किसी वेब पेज को खास क्रॉस-ऑरिजिन आइसोलेटेड स्टेट में ऑप्ट-इन करने के लिए, सीओओपी और सीओईपी एचटीटीपी हेडर के कॉम्बिनेशन का इस्तेमाल करें. self.crossOriginIsolated की जांच करके, यह पता लगाया जा सकता है कि कोई वेब पेज क्रॉस-ऑरिजिन आइसोलेटेड स्थिति में है या नहीं.

हम इस पोस्ट को अपडेट करते रहेंगे, ताकि आपको क्रॉस-ऑरिजिन आइसोलेटेड स्टेट के लिए उपलब्ध कराई जाने वाली नई सुविधाओं के बारे में पता चलता रहे. साथ ही, COOP और COEP से जुड़े DevTools में किए गए सुधारों के बारे में भी जानकारी मिलती रहे.

संसाधन

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

दस्तावेज़ से जुड़े अपडेट

• 21 जून, 2022: क्रॉस-ऑरिजिन आइसोलेशन चालू होने पर, वर्कर स्क्रिप्ट का भी ध्यान रखना ज़रूरी है. कुछ एक्सप्लेनेशन जोड़े गए.
• 5 अगस्त, 2021: JS Self-Profiling API को उन एपीआई में से एक के तौर पर बताया गया था जिनके लिए क्रॉस-ऑरिजिन आइसोलेशन ज़रूरी है. हालांकि, हाल ही में हुए बदलाव के मुताबिक, इसे हटा दिया गया है.
• 6 मई, 2021: हमें मिले सुझाव, शिकायत या राय और रिपोर्ट की गई समस्याओं के आधार पर, हमने क्रॉस-ऑरिजिन आइसोलेटेड साइटों में SharedArrayBuffer के इस्तेमाल की समयसीमा में बदलाव करने का फ़ैसला किया है. Chrome M92 में इस पर पाबंदी लगाई जाएगी.
• 16 अप्रैल, 2021: क्रॉस-ऑरिजिन आइसोलेशन के लिए, COEP क्रेडेंशियललेस मोड और COOP same-origin-allow-popups को एक आसान शर्त के तौर पर जोड़ा गया.
• 5 मार्च, 2021: SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), और डीबग करने की सुविधाओं से जुड़ी पाबंदियां हटा दी गई हैं. ये सुविधाएं अब Chrome 89 में पूरी तरह से चालू हैं. आने वाली नई सुविधाएं जोड़ी गईं. जैसे, performance.now() और performance.timeOrigin. ये सुविधाएं ज़्यादा सटीक होंगी.
• 19 फ़रवरी, 2021: DevTools पर सुविधा से जुड़ी नीति allow="cross-origin-isolated" और डीबग करने की सुविधा के बारे में एक नोट जोड़ा गया.
• 15 अक्टूबर, 2020: self.crossOriginIsolated Chrome 87 से उपलब्ध है. इससे पता चलता है कि document.domain में बदलाव नहीं किया जा सकता, जब self.crossOriginIsolated, true दिखाता है. performance.measureUserAgentSpecificMemory() का ऑरिजिन ट्रायल खत्म हो रहा है. साथ ही, यह Chrome 89 में डिफ़ॉल्ट रूप से चालू है. Android Chrome पर Shared Array Buffer, Chrome 88 से उपलब्ध होगा.