अलग-अलग सेक्शन में बंटे पॉपिन: डेवलपर के लिए उपलब्ध ट्रायल वर्शन में, वेब पॉप-अप के लिए नया तरीका

Natalia Markoborodova

Chrome 132 से, डेवलपर वेब पॉप-अप के लिए नई सुविधा आज़मा सकते हैं. इस सुविधा का नाम है: पार्टिशन किए गए पॉप-इन. डेवलपर के लिए उपलब्ध यह सुविधा, सिर्फ़ डेस्कटॉप पर उपलब्ध है. यह सुविधा अभी Android पर उपलब्ध नहीं है.

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

• स्टोरेज को खोलने वाले के हिसाब से बांटा गया है
• मोडल जैसा यूज़र इंटरफ़ेस (यूआई)

हमें पार्टिशन किए गए पॉप-इन की ज़रूरत क्यों होती है?

पार्टिशन किए गए पॉप-इन को इस तरह से डिज़ाइन किया गया है कि वे पार्टिशन किए गए iframe की निजता से जुड़ी प्रॉपर्टी और पॉप-अप की सुरक्षा से जुड़ी प्रॉपर्टी को बनाए रख सकें.

ज़्यादा उपयोगकर्ता, तीसरे पक्ष की कुकी के बिना ब्राउज़ करने का विकल्प चुन रहे हैं. ऐसे में, उन फ़्लो में रुकावट आ सकती है जो तीसरे पक्ष के कॉन्टेक्स्ट में बाद में डेटा को वापस पाने के लिए, पॉप-अप में डेटा सेव करने पर निर्भर करते हैं. उदाहरण के लिए, सभी साइटों पर उपयोगकर्ता के सेशन को बनाए रखने के लिए. पार्टिशन किए गए पॉप-इन, इस समस्या को हल करने के लिए बनाए गए हैं.

पार्टिशन किए गए पॉप-इन कैसे काम करते हैं?

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

मान लें कि opener.example एक ऐसी वेबसाइट है जो third-party.example से कॉन्टेंट एम्बेड करती है. opener.example पर मनमुताबिक कॉन्टेंट दिखाने के लिए, उपयोगकर्ता को third-party.example पर साइन इन करना होगा. जब उपयोगकर्ता के ब्राउज़र में तीसरे पक्ष की कुकी ब्लॉक की जाती हैं, तो मौजूदा पॉप-अप फ़्लो इस तरह होता है:

1. उपयोगकर्ता, लॉगिन बटन पर क्लिक करता है.
2. एक डायलॉग बॉक्स खुलेगा.
3. उपयोगकर्ता, third-party.example के टॉप लेवल कॉन्टेक्स्ट से लॉग इन करता है. साथ ही, बिना बांटे गए पुष्टि करने वाले कुकी को लिखा जाता है.
4. third-party.example पर एम्बेड किए गए third-party.example कॉन्टेंट के पास, third-party.example पर लिखी गई अपनी टॉप-लेवल कुकी को ऐक्सेस करने का अधिकार नहीं है. ऐसा तब होता है, जब इसे पहले पक्ष के कॉन्टेक्स्ट में दिखाया गया था.opener.example ऐसा इसलिए होता है, क्योंकि पुष्टि करने वाली कुकी को बांटा नहीं जाता. इसलिए, यह तीसरे पक्ष की कुकी होती है.

पार्टिशन किए गए पॉप-इन का स्टोरेज, ओपनर के लिए पार्टिशन किया जाता है. इससे फ़्लो के तीसरे और चौथे चरण में ये बदलाव होते हैं:

1. उपयोगकर्ता, third-party.example के टॉप-लेवल कॉन्टेक्स्ट से लॉग इन करता है. यह पार्टिशन किए गए पॉप-इन में खुला है. इसलिए, स्टोरेज को opener.example के हिसाब से पार्टिशन किया गया है.

2. opener.example पर एम्बेड किए गए third-party.example कॉन्टेंट के पास अपनी कुकी का ऐक्सेस होता है. यह कुकी, पॉप-इन में सेट की गई थी. ऐसा इसलिए है, क्योंकि दोनों एक ही पार्टीशन किए गए स्टोरेज को शेयर करते हैं.

ओपनर टैब के हिसाब से, मोडल जैसा यूज़र इंटरफ़ेस (यूआई)

पार्टिशन किए गए पॉप-इन का मकसद, उपयोगकर्ता को यह समझने में मदद करना है कि ओपनर और पॉप-इन एक-दूसरे से जुड़े हुए हैं:

• जब उपयोगकर्ता किसी दूसरे टैब पर स्विच करता है, तो पॉप-इन अपने-आप अदृश्य हो जाता है और उसे ऐक्सेस नहीं किया जा सकता. इसी तरह, मॉडल सिर्फ़ तब दिखता है, जब ओपनर टैब चालू होता है.
• जब उपयोगकर्ता ओपनर टैब पर वापस आता है, तब पॉप-इन फिर से दिखता है.
• उपयोगकर्ता, पॉप-इन के ब्राउज़र के पता बार में बदलाव नहीं कर सकता.

इसे आज़माएं

Chrome 132 में, पार्टीशन किए गए पॉप-इन की सुविधा के लिए डेवलपर ट्रायल लॉन्च किया जा रहा है. इसका मतलब है कि यह सुविधा, फ़्लैग के पीछे उपलब्ध होगी. यहां पार्टिशन किए गए पॉप-इन आज़माने का तरीका बताया गया है:

1. पक्का करें कि Chrome 132 या उसके बाद के वर्शन का इस्तेमाल किया जा रहा हो.
2. chrome://flags#partitioned-popins पर जाएं और फ़ीचर फ़्लैग चालू करें.
3. Chrome को रीस्टार्ट करें.
4. हमारी डेमो आज़माएं.

अपनी वेबसाइट पर पार्टिशन किए गए पॉप-इन का इस्तेमाल करना

अपनी वेबसाइट पर पार्टिशन किया गया पॉप-इन इस्तेमाल करने के लिए, window.open() पैरामीटर पास करके window.open() तरीके को कॉल करें:popin

window.open("third-party-popin.example", "_blank", "popin");

सुझाव/राय दें या शिकायत करें

हम पार्टिशन किए गए पॉप-इन एक्सटेंशन की जांच कर रहे हैं. साथ ही, डेवलपर से इस बारे में सुझाव/राय मांग रहे हैं या शिकायतें सुन रहे हैं. यहां इस्तेमाल के कुछ संभावित उदाहरण दिए गए हैं:

• उपयोगकर्ता की पुष्टि करने का फ़्लो. अगर आपने कस्टम पुष्टि करने की प्रोसेस लागू की है और पुष्टि आपकी साइट के बजाय किसी दूसरे डोमेन पर होती है (उदाहरण के लिए, site.example उपयोगकर्ता auth-site.example पर साइन इन करते हैं), तो पुष्टि करने वाले पेज को पॉप-इन में खोलें. इससे ओपनर पेज पर सेशन कुकी का इस्तेमाल किया जा सकेगा.
• एम्बेड किया गया कॉन्टेंट. ज़्यादा कॉन्टेंट दिखाने के लिए, पार्टीशन किए गए पॉप-इन आज़माएं. जैसे, सेटिंग डायलॉग, इमेज या PDF (या पॉप-अप में लोड होने वाला अन्य कॉन्टेंट) जैसे तीसरे पक्ष के विजेट से मिला कॉन्टेंट, बड़ी विंडो में रेंडर किया गया. इस मामले में, पार्टिशन किए गए पॉप-इन का मकसद, तीसरे पक्ष के विजेट और आपकी साइट के बीच उपयोगकर्ता के सेशन की स्थिति को बनाए रखना है.

अगर आपके समाधानों में इनमें से कोई भी स्थिति है, आपके दिमाग़ में इस्तेमाल के अन्य उदाहरण हैं या आपको इस सुविधा को बेहतर बनाने में मदद करनी है, तो इसे आज़माएं और हमें बताएं:

• क्या आपको कोई समस्या आई?
• क्या आपके पास उपयोगकर्ताओं को बेहतर अनुभव देने के लिए कोई सुझाव है?
• क्या आपके पास बेहतर यूज़र इंटरफ़ेस (यूआई) के लिए कोई सुझाव है? खास तौर पर, क्या आपको लगता है कि यूज़र इंटरफ़ेस (यूआई) से साफ़ तौर पर पता चलता है कि ओपनर और पॉप-इन एक-दूसरे से जुड़े हैं?
• आपको यह सुविधा कितनी काम की लगी?
• क्या आपको पॉप-इन को हिस्सों में बांटकर इस्तेमाल करने के अन्य उदाहरणों के बारे में जानना है?

अपने विचार शेयर करने के लिए, GitHub पर समस्या दर्ज करें.