साइन आउट करना
जब कोई उपयोगकर्ता किसी वेबसाइट से साइन आउट करता है, तो वह अपनी पसंद के मुताबिक बनाए गए उपयोगकर्ता अनुभव से पूरी तरह से बाहर निकलने की इच्छा दिखाता है. इसलिए, उपयोगकर्ता के मानसिक मॉडल के मुताबिक ही डिज़ाइन करना ज़रूरी है. उदाहरण के लिए, साइन आउट करने के सही अनुभव में, उन सभी टैब को भी ध्यान में रखना चाहिए जिन्हें उपयोगकर्ता ने साइन आउट करने से पहले खोला हो.
साइन-आउट करने के बेहतर अनुभव के लिए, यह ज़रूरी है कि उपयोगकर्ता अनुभव के विज़ुअल और स्टेटस के सभी पहलुओं में एक जैसा अनुभव मिले. इस गाइड में, इस बात पर ध्यान देने और साइन-आउट करने का बेहतर अनुभव देने के बारे में खास सलाह दी गई है.
ध्यान देने वाली बातें
अपनी वेबसाइट पर साइन-आउट करने की सुविधा लागू करते समय, इन बातों का ध्यान रखें, ताकि साइन-आउट करने की प्रक्रिया आसान, सुरक्षित, और आसानी से समझ में आने वाली हो:
- साइन आउट करने के लिए, साफ़ और एक जैसा यूज़र एक्सपीरियंस: साइन आउट करने के लिए, साफ़ और एक जैसा बटन या लिंक उपलब्ध कराएं. यह बटन या लिंक, वेबसाइट पर आसानी से पहचाना जा सके और उसे ऐक्सेस किया जा सके. ऐसे लेबल का इस्तेमाल करने से बचें जिनका मतलब साफ़ न हो. साथ ही, साइन आउट करने की सुविधा को ऐसे मेन्यू, सबपेज या ऐसी अन्य जगहों पर छिपाने से भी बचें जो आसानी से न मिलें.
- पुष्टि करने के लिए प्रॉम्प्ट: साइन आउट की प्रोसेस पूरी करने से पहले, पुष्टि करने के लिए प्रॉम्प्ट लागू करें. इससे, उपयोगकर्ताओं को गलती से साइन आउट होने से रोका जा सकता है. साथ ही, वे यह भी सोच पाते हैं कि उन्हें वाकई साइन आउट करने की ज़रूरत है या नहीं. उदाहरण के लिए, अगर वे अपने डिवाइस को किसी मज़बूत पासवर्ड या पुष्टि करने के किसी दूसरे तरीके से लॉक करते हैं.
- एक से ज़्यादा टैब मैनेज करना: अगर किसी उपयोगकर्ता ने एक ही वेबसाइट के कई पेजों को अलग-अलग टैब में खोला है, तो पक्का करें कि एक टैब से साइन आउट करने पर, उस वेबसाइट के सभी खुले हुए टैब भी अपडेट हो जाएं.
- सुरक्षित लैंडिंग पेज पर रीडायरेक्ट करना: साइन आउट करने के बाद, उपयोगकर्ता को सुरक्षित लैंडिंग पेज पर रीडायरेक्ट करें. इस पेज पर साफ़ तौर पर दिखना चाहिए कि उपयोगकर्ता अब साइन इन नहीं है. उपयोगकर्ताओं को ऐसे पेजों पर रीडायरेक्ट करने से बचें जिन पर उनकी निजी जानकारी हो. इसी तरह, पक्का करें कि दूसरे टैब में भी साइन इन की स्थिति न दिखे. साथ ही, पक्का करें कि आपने कोई ऐसा ओपन रीडायरेक्ट न बनाया हो जिसका इस्तेमाल हमलावर कर सकें.
- सेशन का डेटा मिटाना: उपयोगकर्ता के साइन आउट करने के बाद, उसके सेशन से जुड़ा संवेदनशील डेटा, कुकी या कुछ समय के लिए सेव की गई फ़ाइलों को पूरी तरह से मिटा दें. इससे, उपयोगकर्ता की जानकारी या खाते की गतिविधि को अनधिकृत तरीके से ऐक्सेस होने से रोका जा सकता है. साथ ही, ब्राउज़र को अपने अलग-अलग कैश मेमोरी से, संवेदनशील जानकारी वाले पेजों को वापस लाने से भी रोका जा सकता है. खास तौर पर, बैक/फ़ॉरवर्ड कैश मेमोरी से.
- गड़बड़ी को मैनेज करना और सुझाव, शिकायत या राय पाना: अगर साइन आउट करने के दौरान उपयोगकर्ताओं को कोई समस्या आती है, तो उन्हें गड़बड़ी के बारे में साफ़ तौर पर बताएं या सुझाव, शिकायत या राय पाएं. अगर साइन-आउट करने की प्रोसेस पूरी नहीं हो पाती है, तो उन्हें सुरक्षा से जुड़े संभावित खतरों या डेटा लीक होने के बारे में बताएं.
- सुलभता से जुड़ी बातें: पक्का करें कि साइन आउट करने की सुविधा, दिव्यांग लोगों के लिए ऐक्सेस की जा सके. इसमें, स्क्रीन रीडर या कीबोर्ड नेविगेशन जैसी सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोग भी शामिल हैं.
- अलग-अलग ब्राउज़र के साथ काम करना: अलग-अलग ब्राउज़र और डिवाइसों पर साइन-आउट करने की सुविधा की जांच करें, ताकि यह पक्का किया जा सके कि यह लगातार और भरोसेमंद तरीके से काम करती है.
- लगातार निगरानी और अपडेट: साइन-आउट करने की प्रोसेस पर नियमित तौर पर नज़र रखें, ताकि किसी भी संभावित जोखिम या सुरक्षा से जुड़ी गड़बड़ियों का पता चल सके. पहचानी गई समस्याओं को ठीक करने के लिए, समय पर अपडेट और पैच लागू करें.
- आइडेंटिटी फ़ेडरेशन: अगर उपयोगकर्ता ने फ़ेडरेटेड आइडेंटिटी का इस्तेमाल करके साइन इन किया है, तो देखें कि आइडेंटिटी प्रोवाइडर से साइन आउट करने की सुविधा उपलब्ध है या नहीं. साथ ही, यह भी देखें कि ऐसा करना ज़रूरी है या नहीं. अगर पहचान की पुष्टि करने वाली सेवा, अपने-आप साइन इन होने की सुविधा के साथ काम करती है, तो इसे रोकना न भूलें.
क्या करें
- अगर साइन-आउट फ़्लो (या ऐक्सेस रद्द करने के अन्य फ़्लो) के तहत, सर्वर पर किसी कुकी को अमान्य कर दिया जाता है, तो पक्का करें कि उपयोगकर्ता के डिवाइस पर भी कुकी मिटा दी गई हो.
- उपयोगकर्ता के डिवाइस पर सेव किया गया संवेदनशील डेटा मिटाएं: कुकी, localStorage, sessionStorage, indexedDB, CacheStorage, और अन्य लोकल डेटा स्टोर.
- पक्का करें कि संवेदनशील डेटा वाले सभी रिसॉर्स, खास तौर पर एचटीएमएल दस्तावेज़,
Cache-control: no-storeएचटीटीपी हेडर के साथ दिखाए जाएं. इससे ब्राउज़र, इन रिसॉर्स को हमेशा के लिए स्टोर नहीं कर पाता. उदाहरण के लिए, डिस्क पर. इसी तरह, संवेदनशील डेटा दिखाने वाले XHRs/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 via 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 इवेंट और ब्रॉडकास्ट चैनल एपीआई के कॉम्बिनेशन का इस्तेमाल करें.
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(); } });ब्रॉडकास्ट चैनल एपीआई: इस एपीआई का इस्तेमाल करके, टैब और विंडो में लॉगिन स्टेटस में हुए बदलावों की जानकारी दी जा सकती है. अगर उपयोगकर्ता ने साइन आउट कर लिया है, तो सभी संवेदनशील डेटा मिटाएं. इसके अलावा, संवेदनशील डेटा वाले सभी टैब और विंडो पर, साइन आउट पेज पर रीडायरेक्ट करें.
// 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. // ... } }
नतीजा
इस दस्तावेज़ में दिए गए दिशा-निर्देशों का पालन करके, साइन-आउट करने के लिए उपयोगकर्ता को बेहतर अनुभव दिया जा सकता है. इससे, अनचाहे लॉग आउट को रोका जा सकता है और उपयोगकर्ता की निजी जानकारी को सुरक्षित रखा जा सकता है.