क्रॉस-ऑरिजिन आइसोलेटेड एनवायरमेंट सेट अप करने के लिए, 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
की उपलब्धता वगैरह के बारे में जानकारी मिलती है.
पॉप-अप विंडो की स्थिति भी देखी जा सकती है. जैसे, यह क्रॉस-ऑरिजिन से अलग है या नहीं.
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 से जुड़े सुधार किए जाएंगे.
संसाधन
- बेहतर सुविधाओं के लिए, "अलग-अलग सोर्स से आने वाले अनुरोधों को अलग-अलग सेशन में रखना" सुविधा की ज़रूरत क्यों है
- क्रॉस-ऑरिजिन आइसोलेशन को चालू करने के लिए गाइड
- Android के लिए Chrome 88 और डेस्कटॉप के लिए Chrome 92 में, SharedArrayBuffer से जुड़े अपडेट
measureUserAgentSpecificMemory()
की मदद से, अपने वेब पेज के कुल मेमोरी इस्तेमाल पर नज़र रखना