इस पेज का अनुवाद Cloud Translation API से किया गया है.

पाबंदी-प्रॉपर्टी के साथ सुरक्षित पॉप-अप इंटरैक्शन

पॉप-अप के साथ इंटरैक्ट करते समय, क्रॉस-ऑरिजिन आइसोलेशन और क्रॉस-साइट लीक से सुरक्षा पाएं.

Arthur Hemery

Maud Nalpas

क्रॉस-ओरिजिन ओपनर पॉलिसी (COOP) के लिए एक नई वैल्यू उपलब्ध है: restrict-properties. इससे सुरक्षा से जुड़े फ़ायदे मिलते हैं. साथ ही, क्रॉस-ऑरिजिन आइसोलेशन को अपनाना आसान हो जाता है. साथ ही, आपकी साइट को पेमेंट, पुष्टि करने या अन्य इस्तेमाल के उदाहरणों के लिए, तीसरे पक्ष के पॉप-अप के साथ इंटरैक्ट करने की अनुमति मिलती है.

restrict-properties को आज़माने के लिए, Chrome 116 से शुरू होने वाले ऑरिजिन ट्रायल में हिस्सा लें.

`restrict-properties` का इस्तेमाल क्यों करें

restrict-properties के इस्तेमाल के दो मुख्य उदाहरण हैं:

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

बिना किसी रुकावट के, एक साइट से दूसरी साइट पर डेटा लीक होने से रोकना

डिफ़ॉल्ट रूप से, कोई भी वेबसाइट आपके ऐप्लिकेशन को पॉप-अप में खोल सकती है और उसका रेफ़रंस पा सकती है.

नुकसान पहुंचाने वाली कोई वेबसाइट, इसका फ़ायदा उठाकर क्रॉस-साइट लीक जैसे हमले कर सकती है. इस जोखिम को कम करने के लिए, Cross-Origin-Opener-Policy (COOP) हेडर का इस्तेमाल किया जा सकता है.

अब तक, Cross-Origin-Opener-Policy के लिए आपके विकल्प सीमित थे. आपके पास इनमें से कोई एक विकल्प है:

same-origin, सेट करें, जो पॉप-अप के साथ सभी क्रॉस-ऑरिजिन इंटरैक्शन को ब्लॉक करता है.
same-origin-allow-popups सेट करें. इससे, आपकी साइट को पॉप-अप में खोलने वाले सभी क्रॉस-ऑरिजिन इंटरैक्शन को ब्लॉक किया जाता है.
unsafe-none सेट करें. इससे पॉप-अप के साथ सभी क्रॉस-ओरिजिन इंटरैक्शन की अनुमति मिलती है.

इस वजह से, उन वेबसाइटों के लिए सीओओपी लागू करना मुश्किल हो गया था जिन्हें पॉप-अप में खोला जाना था और जिन्हें खोलने वाले उपयोगकर्ता के साथ इंटरैक्ट करना था. इस वजह से, एक बार साइन इन करने की सुविधा और पेमेंट जैसे मुख्य इस्तेमाल के उदाहरणों को क्रॉस-साइट लीक से सुरक्षित नहीं रखा जा सका.

Cross-Origin-Opener-Policy: restrict-properties से यह समस्या हल हो जाती है.

restrict-properties के साथ, ऐसी प्रॉपर्टी उपलब्ध नहीं हैं जिनका इस्तेमाल फ़्रेम की गिनती करने और दूसरी साइट पर लीक होने से जुड़े अन्य हमलों के लिए किया जा सकता है. हालांकि, postMessage और closed की मदद से विंडो के बीच बुनियादी कम्यूनिकेशन की अनुमति है.

इससे साइट की सुरक्षा बेहतर होती है. साथ ही, इस्तेमाल के मुख्य उदाहरणों को भी बनाए रखा जाता है. उदाहरण के लिए:

अगर आपने पॉप-अप में कोई सेवा दी है, तो Cross-Origin-Opener-Policy: restrict-properties सेट करने पर, आपको क्रॉस-साइट लीक के कई तरह के हमलों से सुरक्षा मिलेगी. अब भी वे सभी पेज खोले जा सकते हैं जो पहले खोले जा सकते थे.
अगर आपको किसी क्रॉस-ऑरिजिन पॉप-अप को ऐक्सेस करना है, तो Cross-Origin-Opener-Policy: restrict-properties सेटिंग से आपकी साइट को iframe की गिनती से बचाया जा सकता है. आपको वही पॉप-अप दिखेंगे जो आज दिख रहे हैं.
अगर पेज को खोलने वाला और खोला गया, दोनों ने हेडर सेट किया है और पेज क्रॉस-ऑरिजिन हैं, तो यह उसी तरह काम करता है जैसे कि हेडर सेट करने वाले किसी एक ने किया हो. अगर वे एक ही ऑरिजिन के हैं, तो उन्हें पूरा ऐक्सेस दिया जाता है.

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

हमें क्रॉस-ऑरिजिन आइसोलेशन की ज़रूरत क्यों है

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

अब तक, इन एपीआई का इस्तेमाल करने के लिए, आपको Cross-Origin-Opener-Policy: same-origin सेट करना पड़ता था. हालांकि, इससे किसी भी क्रॉस-ऑरिजिन पॉप-अप फ़्लो में रुकावट आएगी. जैसे, सिंगल साइन-ऑन और पेमेंट.

क्रॉस-ऑरिजिन आइसोलेशन चालू करने के लिए, अब Cross-Origin-Opener-Policy: same-origin के बजाय Cross-Origin-Opener-Policy: restrict-properties का इस्तेमाल किया जा सकता है. यह ओपनर के साथ संबंध को खत्म करने के बजाय, उसे window.postMessage() और window.closed के कम से कम कम्यूनिकेशन सबसेट तक सीमित कर देता है.

इन दो हेडर की मदद से, क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू की जा सकती है:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

या

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

credentialless के बारे में ज़्यादा जानने के लिए, COEP: credentialless का इस्तेमाल करके, सीओआरपी हेडर के बिना क्रॉस-ऑरिजिन संसाधन लोड करें लेख पढ़ें.

डेमो

क्रॉस-ऑरिजिन आइसोलेशन डेमो में, हेडर के अलग-अलग विकल्प आज़माएं.

ऑरिजिन ट्रायल को आज़माना

Cross-Origin-Opener-Policy: restrict-properties को आज़माने के लिए, ओरिजिन ट्रायल के लिए ऑप्ट इन करें.

ब्राउज़र समर्थन

फ़िलहाल, Cross-Origin-Opener-Policy: restrict-properties की सुविधा सिर्फ़ Chrome पर काम करती है. अन्य ब्राउज़र, स्टैंडर्ड बनाने के लिए चर्चा में सक्रिय रूप से शामिल हैं.

अक्सर पूछे जाने वाले सवाल

मेरी वेबसाइट को एक ही ऑरिजिन के पॉप-अप के साथ कम्यूनिकेट करना है. क्या मुझे क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने के लिए, `COOP: restrict-properties` का इस्तेमाल करना चाहिए?

पॉप-अप और मुख्य पेज, दोनों पर COOP: restrict-properties सेट करने से पाबंदियां नहीं लगेंगी. इसे सिर्फ़ पॉप-अप पर या सिर्फ़ मुख्य पेज पर सेट करने से, ओपनर में postMessage और closed के अलावा किसी भी प्रॉपर्टी को ऐक्सेस नहीं किया जा सकेगा. भले ही, वे एक ही सोर्स से हों.

क्या अनुमति वाली प्रॉपर्टी का सेट तय है?

अब तक मिले सुझावों के आधार पर, हमें लगता है कि window.postMessage और window.closed, ज़्यादातर वर्कफ़्लो के लिए काफ़ी हैं. हालांकि, हम इसे अन्य प्रॉपर्टी के लिए भी उपलब्ध कराने पर विचार कर रहे हैं. अगर आपके पास ऐसा इस्तेमाल का उदाहरण है जिसे सिर्फ़ postMessage और closed का इस्तेमाल करके हल नहीं किया जा सकता, तो प्रयोग करने के इंटेंट वाली थ्रेड पर अपना सुझाव/राय दें या शिकायत करें.