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

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

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