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

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

Eiji Kitamura

अपडेट

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

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

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

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 से जुड़े सुधार किए जाएंगे.

संसाधन