יציאה
כשמשתמש יוצא מחשבון באתר, הוא מביע את הרצון שלו לצאת לגמרי מחוויית משתמש מותאמת אישית. לכן חשוב לפעול בהתאם למודל המנטלי של המשתמש ככל האפשר. לדוגמה, חוויית יציאה נכונה צריכה להביא בחשבון גם כרטיסיות שהמשתמש פתח לפני שהחליט לצאת מהחשבון.
המפתח לחוויית יציאה מעולה הוא עקביות בכל ההיבטים החזותיים והסטטוסיים של חוויית המשתמש. במדריך הזה נספק לכם טיפים קונקרטיים לגבי הדברים שצריך לשים לב אליהם ואיך ליצור חוויית יציאה טובה.
שיקולים חשובים
כשמטמיעים את הפונקציונליות של היציאה מהחשבון באתר, חשוב לשים לב להיבטים הבאים כדי להבטיח תהליך יציאה חלק, מאובטח ואינטואיטיבי:
- חוויית משתמש ברורה ועקבית של יציאה: כדאי לספק לחצן או קישור ברורים וגלויים באופן עקבי ליציאה, שקל לזהות ולגשת אליהם בכל מקום באתר. מומלץ להימנע משימוש בתוויות לא ברורות או מהסתרת הפונקציונליות של היציאה מהחשבון בתפריטים מעורפלים, בדפי משנה או במיקומים לא אינטואיטיביים אחרים.
- הנחיה לאישור: הטמעת הנחיה לאישור לפני סיום תהליך היציאה. כך אפשר למנוע מהמשתמשים לצאת מהחשבון בטעות, ומאפשר להם לחשוב שוב אם הם באמת צריכים לצאת מהחשבון – לדוגמה, אם הם נועלים את המכשיר באופן קפדני באמצעות סיסמה חזקה או מנגנון אימות אחר.
- טיפול בכמה כרטיסיות: אם משתמש פתח כמה דפים מאותו אתר בכרטיסיות שונות, חשוב לוודא שיציאה מהחשבון בכרטיסייה אחת מעדכנת גם את כל הכרטיסיות הפתוחות האחרות מהאתר הזה.
- הפניה אוטומטית לדף נחיתה מאובטח: אחרי היציאה, מפנים את המשתמש לדף נחיתה מאובטח שמציין בבירור שהוא כבר לא מחובר לחשבון. הימנעו מהפניית משתמשים לדפים שמכילים מידע מותאם אישית. באופן דומה, מוודאים שכרטיסיות אחרות לא משקפות יותר מצב של כניסה לחשבון. כמו כן, חשוב לוודא שאתם לא יוצרים הפניה חזרה לכתובת האתר המקורית שאפשר לנצל לרעה.
- ניקוי סשנים: אחרי שמשתמש יוצא מהחשבון, צריך להסיר לחלוטין את כל הנתונים הרגישים של סשן המשתמש, קובצי cookie או קבצים זמניים שמשויכים לסשן של המשתמש. כך אפשר למנוע גישה בלתי מורשית למידע על המשתמשים או לפעילות בחשבון, וגם למנוע מהדפדפן לשחזר דפים עם מידע רגיש מהמטמון השונים שלו, במיוחד מטמון הדפים הקודמים/הבאים.
- טיפול בשגיאות ומשוב: אם יהיו בעיות ביציאה מהחשבון, כדאי לספק למשתמשים הודעות שגיאה או משוב ברורים. אם תהליך היציאה נכשל, יש להודיע להם על סיכוני אבטחה פוטנציאליים או על דליפות נתונים.
- שיקולי נגישות: חשוב לוודא שמנגנון היציאה מהחשבון נגיש למשתמשים עם מוגבלויות, כולל משתמשים שמשתמשים בטכנולוגיות מסייעות כמו קוראי מסך או ניווט במקלדת.
- תאימות לדפדפנים שונים: כדאי לבדוק את הפונקציונליות של היציאה בדפדפנים ובמכשירים שונים כדי לוודא שהיא פועלת באופן עקבי ואמין.
- מעקב רציף ועדכונים: חשוב לעקוב באופן קבוע אחרי תהליך היציאה כדי לזהות נקודות חולשה או פרצות אבטחה פוטנציאליות. להטמיע עדכונים ותיקונים בזמן כדי לטפל בבעיות שזוהו.
- איחוד שירותי אימות הזהות: אם המשתמש נכנס באמצעות זהות מאוחדת, צריך לבדוק אם יש תמיכה ביציאה גם מספק הזהויות, ואם יש צורך בכך. בנוסף, אם ספק הזהויות תומך בכניסה אוטומטית, אל תשכחו למנוע אותה.
משימות
- אם מבטלים את התוקף של קובץ cookie בשרת כחלק מתהליך יציאה (או מתהליכים אחרים של ביטול הרשאת גישה), חשוב למחוק את קובץ ה-cookie גם במכשיר של המשתמש.
- מנקים מידע אישי רגיש שאולי אוחסן במכשיר של המשתמש: קובצי cookie, localStorage, sessionStorage, indexedDB, CacheStorage ומאגרי נתונים מקומיים אחרים.
- חשוב לוודא שכל המשאבים שמכילים מידע אישי רגיש – במיוחד מסמכי HTML – מוחזרים עם כותרת ה-HTTP
Cache-control: no-store
, כדי שהדפדפן לא יאחסן את המשאבים האלה באחסון קבוע (לדוגמה, בדיסק). באופן דומה, קריאות XHR אוfetch
שמחזירות מידע אישי רגיש צריכות גם להגדיר את הכותרתCache-Control: no-store
של HTTP כדי למנוע אחסון במטמון. - חשוב לוודא שכרטיסיות פתוחות במכשיר של המשתמש מעודכנות עם ביטולי גישה בצד השרת.
ניקוי מידע אישי רגיש בזמן היציאה מהחשבון
אחרי היציאה, מומלץ למחוק מידע רגיש שנשמר באופן זמני או מקומי. אנחנו מתמקדים במידע אישי רגיש כי אם נמחק את הכל, חוויית המשתמש תהיה גרועה יותר, כי יכול להיות שהמשתמש הזה יחזור. לדוגמה, אם תמחקו את כל הנתונים המאוחסנים באופן מקומי, המשתמשים יצטרכו לאשר מחדש את הבקשות להבעת הסכמה לשימוש בקובצי cookie, ולעבור תהליכים אחרים כאילו הם מעולם לא ביקרו באתר שלכם מלכתחילה.
איך לנקות קובצי cookie
בתגובה לדף שמאשר את סטטוס היציאה מהחשבון, צריך לצרף כותרות HTTP מסוג Set-Cookie
כדי למחוק כל קובץ cookie שקשור למידע אישי רגיש או מכיל מידע כזה. מגדירים את הערך של expires
לתאריך בעבר הרחוק, ומגדירים את הערך של קובץ ה-cookie למחרוזת ריקה.
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
...
תרחיש אופליין
הגישה שמתוארת למעלה מספיקה לתרחישי שימוש כלליים, אבל היא לא עובדת אם המשתמש עובד אופליין. מומלץ לדרוש שימוש בשני קובצי cookie כדי לעקוב אחרי מצב הכניסה: קובץ cookie מאובטח מסוג HTTPS בלבד וקובץ cookie רגיל שאפשר לגשת אליו באמצעות JavaScript. אם המשתמש מנסה לצאת מהחשבון במצב אופליין, אפשר למחוק את קובץ ה-cookie של JavaScript ולהמשיך בפעולות ניקוי אחרות, אם אפשר. אם יש לכם service worker, כדאי גם להשתמש ב-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 APIs: כשהמשתמש יוצא מהחשבון, צריך לנקות מידע אישי רגיש שאולי שמרתם באמצעות ממשקי ה-API האלה, כי מידע כזה נשמר בין סשנים.
// 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');
איך לנקות מטמון
- מטמון HTTP: כל עוד מגדירים את
Cache-control: no-store
במשאבים עם מידע אישי רגיש, המטמון של HTTP לא ישמור מידע רגיש. - מטמון חזרה/העברה: באופן דומה, אם פעלתם בהתאם להמלצות לגבי
Cache-control: no-store
ולגבי ניקוי קובצי cookie רגישים (לדוגמה, קובצי cookie מאובטחים מסוג HTTPS בלבד שקשורים לאימות) כשמשתמשים יוצאים מהחשבון, אין לכם מה לדאוג לגבי שמירת מידע רגיש במטמון החזרה/העברה. אכן, התכונה 'מטמון לדף הקודם/הבא' תגרום להוצאה של דפים מאותו מקור שמוצגים עם כותרת HTTP מסוגCache-control: no-store
אם היא תזהה אחד או יותר מהאותות הבאים:- קובץ cookie מאובטח אחד או יותר מסוג HTTPS בלבד השתנה או נמחק.
- תגובה אחת או יותר לקריאות XHR או
fetch
– שהדף הנפיק – כללה את הכותרתCache-control: no-store
ב-HTTP.
חוויית משתמש עקבית בכרטיסיות
יכול להיות שהמשתמשים פתחו כרטיסיות רבות באתר שלכם לפני שהם החליטו לצאת מהחשבון. עד אז, יכול להיות שהם שכחו על כרטיסיות אחרות או אפילו על חלונות אחרים בדפדפן. מומלץ לא להסתמך על המשתמשים כדי לסגור את כל הכרטיסיות והחלונות הרלוונטיים. במקום זאת, כדאי לפעול באופן יזום כדי לוודא שמצב הכניסה של המשתמש עקבי בכרטיסיות השונות.
כיצד לבצע
כדי לשמור על עקביות בסטטוס הכניסה בכל הכרטיסיות, מומלץ להשתמש בשילוב של אירועי 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: משתמשים ב-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. // ... } }
סיכום
בעזרת ההנחיות במסמך הזה תוכלו לתכנן חוויית יציאה נהדרת למשתמש, שתגן על המידע האישי שלו ותימנע יציאות לא רצויות מהחשבון.