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

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

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

Arthur Hemery

Maud Nalpas

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

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

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

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

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

बिना रुकावट के, क्रॉस-साइट लीक को रोकें

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

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

अब तक, 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 का इस्तेमाल करके हल नहीं किया जा सकता, तो एक्सपेरिमेंट थ्रेड के इंटेंट पर अपना सुझाव दें.