जब कोई उपयोगकर्ता किसी वेबसाइट से साइन आउट करता है, तो इसका मतलब है कि वह अपनी दिलचस्पी के हिसाब से मिले अनुभव से पूरी तरह बाहर निकलना चाहता है. इसलिए, यह ज़रूरी है कि आप उपयोगकर्ता के मेंटल मॉडल के हिसाब से ही काम करें. उदाहरण के लिए, साइन आउट करने की सुविधा में यह भी ध्यान रखना चाहिए कि उपयोगकर्ता ने साइन आउट करने से पहले कौनसे टैब खोले थे.
साइन आउट करने का बेहतर अनुभव देने के लिए, यह ज़रूरी है कि उपयोगकर्ता अनुभव के विज़ुअल और स्टेट से जुड़े पहलुओं में एकरूपता हो. इस गाइड में, साइन आउट करने के दौरान किन बातों का ध्यान रखना चाहिए और साइन आउट करने का अच्छा अनुभव कैसे पाएं, इस बारे में सलाह दी गई है.
ध्यान देने वाली मुख्य बातें
अपनी वेबसाइट पर साइन आउट करने की सुविधा लागू करते समय, इन बातों का ध्यान रखें. इससे यह पक्का किया जा सकेगा कि साइन आउट करने की प्रोसेस आसान, सुरक्षित, और सहज हो:
- साफ़ तौर पर दिखने वाला और एक जैसा साइन-आउट यूज़र एक्सपीरियंस: साफ़ तौर पर दिखने वाला और एक जैसा साइन आउट बटन या लिंक उपलब्ध कराएं. यह बटन या लिंक, पूरी वेबसाइट पर आसानी से पहचाना जा सके और ऐक्सेस किया जा सके. ऐसे लेबल इस्तेमाल न करें जिनका मतलब साफ़ तौर पर समझ न आए. साथ ही, साइन आउट करने की सुविधा को ऐसे मेन्यू, सबपेज या अन्य जगहों पर न छिपाएं जहां इसे ढूंढना मुश्किल हो.
- पुष्टि करने का प्रॉम्प्ट: साइन आउट करने की प्रोसेस पूरी करने से पहले, पुष्टि करने का प्रॉम्प्ट लागू करें. इससे उपयोगकर्ताओं को गलती से साइन आउट होने से बचाया जा सकता है. साथ ही, इससे उपयोगकर्ताओं को यह तय करने का मौका मिलता है कि उन्हें वाकई साइन आउट करना है या नहीं. उदाहरण के लिए, अगर वे अपने डिवाइस को मज़बूत पासवर्ड या पुष्टि करने के किसी अन्य तरीके से लॉक करते हैं, तो उन्हें साइन आउट करने की ज़रूरत नहीं होती.
- एक से ज़्यादा टैब मैनेज करना: अगर किसी व्यक्ति ने एक ही वेबसाइट के कई पेज अलग-अलग टैब में खोले हैं, तो पक्का करें कि एक टैब से साइन आउट करने पर, उस वेबसाइट के खुले हुए सभी टैब भी अपडेट हो जाएं.
- सुरक्षित लैंडिंग पेज पर रीडायरेक्ट करना: साइन आउट करने के बाद, उपयोगकर्ता को ऐसे सुरक्षित लैंडिंग पेज पर रीडायरेक्ट करें जिस पर यह साफ़ तौर पर बताया गया हो कि अब वह साइन इन नहीं है. उपयोगकर्ताओं को ऐसे पेजों पर रीडायरेक्ट न करें जिनमें लोगों के हिसाब से कोई जानकारी दी गई हो. इसी तरह, यह भी पक्का करें कि अन्य टैब में भी अब साइन इन की स्थिति न दिख रही हो. यह भी पक्का करें कि आपने ऐसा ओपन रीडायरेक्ट न बनाया हो जिसका फ़ायदा हमलावर उठा सकें.
- सेशन का डेटा मिटाना: जब कोई उपयोगकर्ता साइन आउट कर लेता है, तो उसके सेशन से जुड़े संवेदनशील डेटा, कुकी या अस्थायी फ़ाइलों को पूरी तरह से मिटा दें. इससे उपयोगकर्ता की जानकारी या खाते की गतिविधि को अनधिकृत तरीके से ऐक्सेस नहीं किया जा सकेगा. साथ ही, ब्राउज़र को अपनी अलग-अलग कैश मेमोरी से संवेदनशील जानकारी वाले पेजों को वापस लाने से भी रोका जा सकेगा. खास तौर पर, बैक/फ़ॉरवर्ड कैश मेमोरी से.
- गड़बड़ी ठीक करना और सुझाव/राय देना या शिकायत करना: अगर साइन आउट करते समय कोई समस्या आती है, तो उपयोगकर्ताओं को गड़बड़ी के बारे में साफ़ तौर पर बताएं या उनसे सुझाव/राय लें या शिकायत करें. अगर साइन आउट करने की प्रोसेस पूरी नहीं होती है, तो उन्हें सुरक्षा से जुड़े किसी भी संभावित जोखिम या डेटा लीक के बारे में बताएं.
- सुलभता से जुड़ी बातें: पक्का करें कि साइन आउट करने की सुविधा, दिव्यांग लोगों के लिए सुलभ हो. इनमें वे लोग भी शामिल हैं जो स्क्रीन रीडर या कीबोर्ड नेविगेशन जैसी सहायक टेक्नोलॉजी का इस्तेमाल करते हैं.
- अलग-अलग ब्राउज़र पर काम करना: अलग-अलग ब्राउज़र और डिवाइसों पर साइन आउट करने की सुविधा को टेस्ट करें. इससे यह पक्का किया जा सकेगा कि यह सुविधा लगातार और भरोसेमंद तरीके से काम कर रही है.
- लगातार निगरानी और अपडेट: साइन-आउट करने की प्रोसेस पर लगातार नज़र रखें. इससे आपको सुरक्षा से जुड़ी संभावित कमियों या खामियों का पता चल पाएगा. पहचानी गई समस्याओं को ठीक करने के लिए, समय-समय पर अपडेट और पैच लागू करें.
- पहचान फ़ेडरेशन: अगर उपयोगकर्ता ने फ़ेडरेटेड आइडेंटिटी का इस्तेमाल करके साइन इन किया है, तो देखें कि क्या आइडेंटिटी प्रोवाइडर से भी साइन आउट करना ज़रूरी है और क्या ऐसा किया जा सकता है. अगर पहचान की पुष्टि करने वाली कंपनी, अपने-आप साइन इन होने की सुविधा देती है, तो इसे बंद करना न भूलें.
DOs
- अगर साइन-आउट फ़्लो (या ऐक्सेस रद्द करने वाले अन्य फ़्लो) के तहत, सर्वर पर किसी कुकी को अमान्य किया जाता है, तो पक्का करें कि उपयोगकर्ता के डिवाइस पर भी उस कुकी को मिटा दिया गया हो.
- उपयोगकर्ता के डिवाइस पर सेव किए गए किसी भी संवेदनशील डेटा को मिटाएं: कुकी, localStorage, sessionStorage, indexedDB, CacheStorage, और अन्य लोकल डेटा स्टोर.
- पक्का करें कि संवेदनशील डेटा वाले सभी संसाधन, खास तौर पर एचटीएमएल दस्तावेज़,
Cache-control: no-storeएचटीटीपी हेडर के साथ दिखाए जाएं. इससे ब्राउज़र इन संसाधनों को परमानेंट स्टोरेज (उदाहरण के लिए, डिस्क पर) में सेव नहीं करेगा. इसी तरह, संवेदनशील डेटा दिखाने वाले XHR/fetchकॉल को भीCache-Control: no-storeएचटीटीपी हेडर सेट करना चाहिए, ताकि कैश मेमोरी में सेव होने से रोका जा सके. - पक्का करें कि उपयोगकर्ता के डिवाइस पर खुले हुए सभी टैब, सर्वर-साइड से ऐक्सेस रद्द होने की जानकारी के साथ अप-टू-डेट हों.
साइन आउट करने पर संवेदनशील डेटा मिटाना
साइन आउट करने के बाद, अल्पकालिक और स्थानीय तौर पर सेव किए गए संवेदनशील डेटा को मिटा दें. संवेदनशील डेटा पर फ़ोकस करने की वजह यह है कि सभी डेटा मिटाने से उपयोगकर्ता अनुभव काफ़ी खराब हो जाएगा. ऐसा इसलिए, क्योंकि यह उपयोगकर्ता वापस आ सकता है. उदाहरण के लिए, अगर आपको स्थानीय तौर पर सेव किया गया सभी डेटा मिटाना है, तो आपके उपयोगकर्ताओं को कुकी के लिए सहमति लेने वाले प्रॉम्प्ट को फिर से स्वीकार करना होगा. साथ ही, उन्हें अन्य प्रोसेस से गुज़रना होगा. ऐसा लगेगा कि उन्होंने आपकी वेबसाइट पर पहले कभी विज़िट नहीं किया है.
कुकी मिटाने का तरीका
साइन आउट की पुष्टि करने वाले पेज के रिस्पॉन्स पर, Set-Cookie एचटीटीपी हेडर अटैच करें. इससे संवेदनशील डेटा से जुड़ी या उसे शामिल करने वाली हर कुकी मिट जाएगी. expires की वैल्यू को बहुत पहले की किसी तारीख पर सेट करें. साथ ही, कुकी की वैल्यू को खाली स्ट्रिंग पर सेट करें.
Set-Cookie: sensitivecookie1=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure
Set-Cookie: sensitivecookie2=; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure
...
ऑफ़लाइन होने पर
ऊपर बताया गया तरीका, सामान्य इस्तेमाल के मामलों के लिए काफ़ी है. हालांकि, अगर उपयोगकर्ता ऑफ़लाइन काम कर रहा है, तो यह तरीका काम नहीं करता. साइन इन की स्थिति को ट्रैक करने के लिए, आपको दो कुकी की ज़रूरत पड़ सकती है: एक सुरक्षित एचटीटीपीएस-ओनली कुकी और एक सामान्य कुकी, जिसे JavaScript के ज़रिए ऐक्सेस किया जा सकता है. अगर कोई उपयोगकर्ता ऑफ़लाइन होने पर साइन आउट करने की कोशिश कर रहा है, तो JavaScript कुकी मिटाई जा सकती है. साथ ही, अगर हो सके, तो अन्य क्लीन-अप ऑपरेशन किए जा सकते हैं. अगर आपके पास कोई सर्विस वर्कर है, तो Background Fetch API का इस्तेमाल करके, सर्वर पर स्थिति को मिटाने के अनुरोध को फिर से आज़माया जा सकता है. ऐसा तब किया जा सकता है, जब उपयोगकर्ता बाद में ऑनलाइन हो.
स्टोरेज खाली करने का तरीका
साइन आउट की पुष्टि करने वाले पेज के जवाब में, अलग-अलग डेटा स्टोर से संवेदनशील डेटा को मिटा दें:
sessionStorage: जब उपयोगकर्ता आपकी वेबसाइट पर अपना सेशन खत्म करता है, तब यह कुकी मिट जाती है. हालांकि, जब उपयोगकर्ता साइन आउट करता है, तब संवेदनशील डेटा को मिटा दें. ऐसा इसलिए, ताकि अगर वह आपकी वेबसाइट पर खुले हुए सभी टैब बंद करना भूल जाए, तो भी डेटा सुरक्षित रहे.
// Remove sensitive data from sessionStorage sessionStorage.removeItem('sensitiveSessionData1'); // ... // Or if everything in sessionStorage is sensitive, clear it all sessionStorage.clear();localStorage, indexedDB, Cache/Service Worker एपीआई: जब उपयोगकर्ता साइन आउट करता है, तो इन एपीआई का इस्तेमाल करके सेव किए गए किसी भी संवेदनशील डेटा को मिटा दें. ऐसा इसलिए, क्योंकि यह डेटा सभी सेशन में बना रहता है.
// Remove sensitive data from localStorage: localStorage.removeItem('sensitiveData1'); // ... // Or if everything in localStorage is sensitive, clear it all: localStorage.clear();// Delete sensitive object stores in indexedDB: const name = 'exampleDB'; const version = 1; const request = indexedDB.open(name, version); request.onsuccess = (event) => { const db = request.result; db.deleteObjectStore('sensitiveStore1'); db.deleteObjectStore('sensitiveStore2'); // ... db.close(); }// Delete sensitive resources stored with the Cache API: caches.open('cacheV1').then((cache) => { await cache.delete("/personal/profile.png"); // ... } // Or better yet, clear a cache bucket that contains sensitive resources: caches.delete('personalizedV1');
कैश मेमोरी को कैसे साफ़ करें
- एचटीटीपी कैश मेमोरी: जब तक संवेदनशील डेटा वाले संसाधनों पर
Cache-control: no-storeसेट किया जाता है, तब तक एचटीटीपी कैश मेमोरी में कोई भी संवेदनशील जानकारी सेव नहीं होती. - बैक/फ़ॉरवर्ड कैश मेमोरी: इसी तरह, अगर आपने
Cache-control: no-storeऔर संवेदनशील कुकी (जैसे, सिर्फ़ एचटीटीपीएस के लिए सुरक्षित, पुष्टि से जुड़ी कुकी) को हटाने के बारे में दिए गए सुझावों का पालन किया है, तो आपको बैक/फ़ॉरवर्ड कैश मेमोरी में संवेदनशील डेटा के बने रहने के बारे में चिंता करने की ज़रूरत नहीं है. बैक/फ़ॉरवर्ड कैश मेमोरी की सुविधा, एक ही ऑरिजिन से दिखाए गए उन पेजों को हटा देगी जिन्हेंCache-control: no-storeएचटीटीपी हेडर के साथ दिखाया गया है. ऐसा तब होगा, जब उसे इनमें से एक या उससे ज़्यादा सिग्नल मिलेंगे:- एचटीटीपीएस-ओनली कुकी में बदलाव किया गया है या उन्हें मिटाया गया है.
- पेज से जारी किए गए XHR/
fetchकॉल के लिए, एक या उससे ज़्यादा रिस्पॉन्स मेंCache-control: no-storeएचटीटीपी हेडर शामिल था.
सभी टैब पर एक जैसा उपयोगकर्ता अनुभव
ऐसा हो सकता है कि उपयोगकर्ताओं ने साइन आउट करने से पहले, आपकी वेबसाइट के कई टैब खोले हों. ऐसा हो सकता है कि तब तक वे अन्य टैब या ब्राउज़र विंडो के बारे में भूल गए हों. इसलिए, यह सबसे सही तरीका है कि आप उपयोगकर्ताओं पर, सभी काम के टैब और विंडो बंद करने के लिए भरोसा न करें. इसके बजाय, यह पक्का करें कि उपयोगकर्ता की लॉगिन स्थिति सभी टैब में एक जैसी हो.
कैसे करें
सभी टैब में एक जैसा साइन-इन स्टेटस बनाए रखने के लिए, pageshow/pagehide इवेंट और Broadcast Channel API का एक साथ इस्तेमाल करें.
pageshowइवेंट:pageshowके बने रहने पर, उपयोगकर्ता के लॉग इन स्टेटस की जांच करें. अगर उपयोगकर्ता अब लॉग इन नहीं है, तो संवेदनशील डेटा या पूरे पेज को मिटा दें. बैक/फ़ॉरवर्ड नेविगेशन से पेज को वापस लाने पर,pageshowइवेंट पहले ट्रिगर होगा. इससे पेज को पहली बार रेंडर किया जा सकेगा. इससे लॉगिन की स्थिति की जांच की जा सकेगी. साथ ही, पेज को ऐसी स्थिति में रीसेट किया जा सकेगा जिसमें संवेदनशील जानकारी न हो.window.addEventListener('pageshow', (event) => { if (event.persisted && !document.cookie.match(/my-cookie)) { // The user has logged out. // Force a reload, or otherwise clear sensitive information right away. body.innerHTML = ''; location.reload(); } });Broadcast Channel API: इस एपीआई का इस्तेमाल, अलग-अलग टैब और विंडो में लॉगिन की स्थिति में हुए बदलावों के बारे में बताने के लिए करें. अगर उपयोगकर्ता साइन आउट है, तो सभी संवेदनशील डेटा को मिटा दें. इसके अलावा, संवेदनशील डेटा वाली सभी टैब और विंडो पर, उपयोगकर्ता को साइन-आउट पेज पर रीडायरेक्ट करें.
// Upon logout, broadcast new login state so that other tabs can clean up too: const bc = new BroadcastChannel('login-state'); bc.postMessage('logged out'); // [...] const bc = new BroadcastChannel('login-state'); bc.onMessage = (msgevt) => { if (msgevt.data === 'logged out') { // Clean up, reload or navigate to the sign-out page. // ... } }
नतीजा
इस दस्तावेज़ में दिए गए दिशा-निर्देशों का पालन करके, साइन-आउट करने के लिए उपयोगकर्ता को बेहतर अनुभव दिया जा सकता है. इससे अनचाहे लॉगआउट को रोका जा सकता है और उपयोगकर्ता की निजी जानकारी को सुरक्षित रखा जा सकता है.