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

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

Eiji Kitamura

अपडेट

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

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

क्रॉस-ऑरिजिन आइसोलेटेड स्टेट, 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 को चालू करने से, एक जैसी विंडो पर ऑरिजिन और दस्तावेज़ से खुली हुई विंडो में, अलग-अलग ब्राउज़िंग होगी कॉन्टेक्स्ट ग्रुप न बनाएं, जब तक कि वे एक ही COOP सेटिंग वाले ऑरिजिन में न हों. इस तरह, खुली हुई विंडो और इनके बीच के आपसी संचार के लिए आइसोलेशन लागू किया जाता है दोनों विंडो बंद हो.

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

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

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

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

यहां बताया गया है कि संसाधन किस तरह का है, इसके आधार पर आपको क्या करना होगा:

• अगर संसाधन को सिर्फ़ उसी ऑरिजिन से लोड किए जाने की उम्मीद हो, तो सेट करें 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 के साथ लोड की गई स्क्रिप्ट, एक ही ऑरिजिन से इस्तेमाल की जानी चाहिए, इसलिए, आपको CORP या CORS हेडर की ज़रूरत नहीं पड़ती.
• COEP: require-corp के साथ काम करने वाले दस्तावेज़ या कर्मचारी के लिए, क्रॉस-ऑरिजिन सीओआरएस के बिना लोड किए गए सबरिसॉर्स को एम्बेड किए जाने के लिए, Cross-Origin-Resource-Policy: cross-origin हेडर को सेट करना होगा. उदाहरण के लिए, यह इन पर लागू होता है <script>, importScripts, <link>, <video>, <iframe> वगैरह

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

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

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

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

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

देखें कि self.crossOriginIsolated का इस्तेमाल करके, आइसोलेशन की प्रोसेस पूरी हुई या नहीं

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

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

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

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

आप iframe और पॉप-अप विंडो के लिए, ऐप्लिकेशन पैनल. "फ़्रेम" पर जाएं सेक्शन पर जाएं और "top" को बड़ा करें वे यहां क��लिक करके संसाधन के स्ट्रक्चर का ब्रेकडाउन देख सकते हैं.

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

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

Reporting API का इस्तेमाल करके समस्याओं की जांच करना

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

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 रिपोर्ट पेलोड जब अलग से कोई पॉप-अप विंडो खोली जाती है, तो वह कुछ इस तरह दिखती है:

[{
  "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 भी रिपोर्ट भेजता है. उदाहरण के लिए, जब रिपोर्ट में 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 कि कोई वेब पेज, क्रॉस-ऑरिजिन में है या नहीं आइसोलेटेड स्थिति.

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

संसाधन

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