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

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

पब्लिश होने की तारीख: 13 अप्रैल, 2020, पिछली बार अपडेट किए जाने की तारीख: 21 जून, 2022

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

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

एपीआई ब्यौरा
SharedArrayBuffer WebAssembly थ्रेड के लिए ज़रूरी है. यह सुविधा, Android Chrome 88 से उपलब्ध है. साइट आइसोलेशन की मदद से, डेस्कटॉप वर्शन डिफ़ॉल्ट रूप से चालू रहता है. हालांकि, इसके लिए क्रॉस-ऑरिजिन आइसोलेटेड स्टेटस की ज़रूरत होगी. साथ ही, Chrome 92 में यह डिफ़ॉल्ट रूप से बंद रहेगा.
performance.measureUserAgentSpecificMemory() Chrome 89 से उपलब्ध है.
performance.now(), performance.timeOrigin यह कई ब्राउज़र में उपलब्ध है. इसका रिज़ॉल्यूशन 100 माइक्रोसेकंड या इससे ज़्यादा तक सीमित है. क्रॉस-ऑरिजिन आइसोलेशन की मदद से, रिज़ॉल्यूशन पांच माइक्रोसेकंड या उससे ज़्यादा हो सकता है.
ऐसी सुविधाएं जो क्रॉस-ऑरिजिन आइसोलेटेड स्टेट में उपलब्ध होंगी.

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

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

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

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

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

शब्दावली

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

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

1. टॉप-लेवल दस्तावेज़ पर Cross-Origin-Opener-Policy: same-origin सेट करें

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

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

इलस्ट्रेशन में, ब्राउज़िंग कॉन्टेंट ग्रुप को दिखाया गया है. इसमें उपयोगकर्ता, पेज एलिमेंट के साथ इंटरैक्ट कर रहा है.

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

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

पक्का करें कि पेज पर मौजूद सभी रिसॉर्स, सीओआरपी या सीओआरएस एचटीटीपी हेडर के साथ लोड हों. चौथे चरण, सीओईपी को चालू करने के लिए, यह चरण ज़रूरी है.

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

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

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

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

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

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

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

4. सीओईपी चालू करें

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

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

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

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

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

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

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

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

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

नेटवर्क पैनल के स्टेटस कॉलम में सीओईपी से जुड़ी समस्याएं.

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

नेटवर्क पैनल में किसी नेटवर्क रिसॉर्स पर क्लिक करने के बाद, हेडर टैब में सीओईपी से जुड़ी समस्या की जानकारी दिखती है.

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

आपके पास iframe का स्टेटस देखने का विकल्प होता है. जैसे, SharedArrayBuffer की उपलब्धता वगैरह.

Chrome DevTools iframe इंस्पेक्टर.

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

Chrome DevTools डायलॉग विंडो इंस्पेक्टर

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

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

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

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

क्रॉस-ऑरिजिन रिसॉर्स ब्लॉक होने पर, सीओईपी रिपोर्ट का पेलोड कुछ ऐसा दिखता है:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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"
}]

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

जब किसी डायलॉग को अलग से खोला जाता है, तो सीओओपी रिपोर्ट का पेलोड कुछ ऐसा दिखता है:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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"
}]

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

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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 की जांच करके यह पता लगाया जा सकता है कि कोई वेब पेज, क्रॉस-ऑरिजिन आइसोलेटेड स्थिति में है या नहीं.

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

संसाधन

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

  • 21 जून, 2022: क्रॉस-ऑरिजिन आइसोलेशन चालू होने पर, वर्कर स्क्रिप्ट का भी ध्यान रखना ज़रूरी है. कुछ और जानकारी जोड़ी गई.
  • 5 अगस्त, 2021: JS सेल्फ़-प्रोफ़ाइलिंग एपीआई को उन एपीआई में से एक के तौर पर बताया गया है जिनके लिए क्रॉस-ऑरिजिन आइसोलेशन की ज़रूरत होती है. हालांकि, हाल ही में हुए बदलाव की वजह से, इसे हटा दिया गया है.
  • 6 मई, 2021: हमें मिले सुझाव, शिकायत या राय और रिपोर्ट की गई समस्याओं के आधार पर, हमने Chrome M92 में, क्रॉस-ऑरिजिन आइसोलेटेड न होने वाली साइटों पर SharedArrayBuffer के इस्तेमाल पर पाबंदी लगाने की समयसीमा में बदलाव करने का फ़ैसला लिया है.
  • 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 से उपलब्ध होगा.