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

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

अपडेट

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

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

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

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

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

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

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

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

इस लेख में, इन नए हेडर को इस्तेमाल करने का तरीका बताया गया है. इसके बाद के लेख में, हम इस बारे में ज़्यादा जानकारी देंगे.

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

COOP और COEP को इंटिग्रेट करना

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

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

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

ब्राउज़िंग कॉन्टेक्स्ट ग्रुप

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

2. पक्का करें कि संसाधनों में सीओआरपी या सीओआरएस की सुविधा चालू हो

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

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

  • अगर रिसॉर्स को सिर्फ़ एक ही ऑरिजिन से लोड किया जाना है, तो Cross-Origin-Resource-Policy: same-origin हेडर सेट करें.
  • अगर रिसॉर्स को सिर्फ़ एक ही साइट से, क्रॉस ऑरिजिन के तौर पर लोड किया जाना है, तो Cross-Origin-Resource-Policy: same-site हेडर सेट करें.
  • अगर रिसॉर्स आपके कंट्रोल में क्रॉस ऑरिजिन से लोड किया गया है, तो जहां तक हो सके Cross-Origin-Resource-Policy: cross-origin हेडर सेट करें.
  • ऐसे क्रॉस-ऑरिजिन रिसॉर्स के लिए जिन पर आपका कंट्रोल नहीं है:
    • अगर संसाधन को सीओआरएस के साथ दिखाया जाता है, तो लोड करने वाले एचटीएमएल टैग में crossorigin एट्रिब्यूट का इस्तेमाल करें. (उदाहरण के लिए, <img src="***" crossorigin>.)
    • रिसॉर्स के मालिक से CORS या CORP का इस्तेमाल करने के लिए कहें.
  • iframes के लिए, ऊपर दिए गए सिद्धांतों का पालन करें और 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> वगैरह पर लागू होता है.

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

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

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

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

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

यह पता लगाना कि self.crossOriginIsolated की मदद से आइसोलेशन किया जा सका या नहीं

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

Chrome DevTools का इस्तेमाल करके समस्याओं को डीबग करना

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

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

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

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

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

इससे आपको iframe की स्थिति के बारे में जानकारी मिलती है. जैसे, SharedArrayBuffer की उपलब्धता वगैरह के बारे में जानकारी मिलती है.

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

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

Chrome DevTools का पॉप-अप विंडो इंस्पेक्टर

Reporting API का इस्तेमाल करके समस्याओं को देखना

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

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

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

क्रॉस-ऑरिजिन रिसॉर्स के ब्लॉक होने पर, 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 report के पेलोड का उदाहरण ऐसा दिखता है:

[{
  "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"
}]

जब अलग-अलग ब्राउज़िंग कॉन्टेक्स्ट ग्रुप, एक-दूसरे को ऐक्सेस करने की कोशिश करते हैं (सिर्फ़ "सिर्फ़ रिपोर्ट" मोड में), तो सीओओपी भी एक रिपोर्ट भेजता है. उदाहरण के लिए, 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"
}]

नतीजा

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

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

संसाधन