چه چیزی باعث ایجاد یک تجربه خروج خوب می شود؟، چه چیزی یک تجربه خروج از سیستم را خوب می کند؟

کنجی باهوکس
Kenji Baheux

خروج از سیستم

هنگامی که کاربر از یک وب سایت خارج می شود، تمایل خود را برای خروج کامل از یک تجربه کاربری شخصی سازی شده اعلام می کند. بنابراین مهم است که تا حد امکان به مدل ذهنی کاربر پایبند باشید. به عنوان مثال، یک تجربه صحیح خروج از سیستم باید هر برگه ای را که ممکن است کاربر قبل از تصمیم به خروج از سیستم باز کرده باشد، در نظر بگیرد.

کلید یک تجربه خروج عالی را می توان در سازگاری در جنبه های بصری و حالتی تجربه کاربر خلاصه کرد. این راهنما توصیه های مشخصی در مورد آنچه که باید به آن توجه کرد و چگونگی دستیابی به یک تجربه خروج خوب ارائه می دهد.

ملاحظات کلیدی

هنگام پیاده‌سازی عملکرد خروج از سیستم در وب‌سایت خود، به جنبه‌های زیر توجه کنید تا فرآیند خروج روان، ایمن و بصری را تضمین کنید:

  • UX خروج واضح و ثابت : یک دکمه یا پیوند خروج واضح و قابل مشاهده ارائه دهید که به راحتی قابل شناسایی و در دسترس در سراسر وب سایت باشد. از استفاده از برچسب‌های مبهم یا پنهان کردن عملکرد خروج از سیستم در منوها، صفحات فرعی یا سایر مکان‌های نامشخص خودداری کنید.
  • درخواست تأیید: قبل از نهایی کردن فرآیند خروج، یک درخواست تأیید را اجرا کنید . این می‌تواند به جلوگیری از خروج تصادفی کاربران از سیستم کمک کند و به کاربران اجازه می‌دهد تا در مورد اینکه آیا واقعاً نیاز به خروج از سیستم دارند، تجدید نظر کنند - به عنوان مثال، اگر با پشتکار دستگاه خود را با یک رمز عبور قوی یا مکانیزم احراز هویت دیگر قفل کنند.
  • مدیریت چندین برگه : اگر کاربر چندین صفحه از یک وب‌سایت را در برگه‌های مختلف باز کرده است، اطمینان حاصل کنید که خروج از یک برگه همه برگه‌های باز دیگر آن وب‌سایت را نیز به‌روزرسانی می‌کند.
  • تغییر مسیر به یک صفحه فرود ایمن : پس از خروج موفقیت آمیز از سیستم، کاربر را به یک صفحه فرود ایمن هدایت کنید که به وضوح نشان می دهد که دیگر وارد سیستم نشده اند. از هدایت مجدد کاربران به صفحاتی که اطلاعات شخصی سازی شده دارند خودداری کنید. به طور مشابه، اطمینان حاصل کنید که سایر برگه‌ها دیگر حالت ورود به سیستم را نشان نمی‌دهند. همچنین، مطمئن شوید که یک تغییر مسیر باز ایجاد نمی کنید که مهاجمان بتوانند از آن استفاده کنند.
  • پاکسازی جلسه : هنگامی که کاربر از سیستم خارج شد، داده های حساس جلسه کاربر، کوکی ها یا فایل های موقت مرتبط با جلسه کاربر را به طور کامل حذف کنید. این کار از دسترسی غیرمجاز به اطلاعات کاربر یا فعالیت حساب جلوگیری می‌کند و همچنین از بازیابی صفحات دارای اطلاعات حساس از حافظه‌های پنهان مختلف، به‌ویژه حافظه پنهان عقب/ جلو، توسط مرورگر جلوگیری می‌کند.
  • رسیدگی به خطا و بازخورد : در صورت بروز هرگونه مشکلی هنگام خروج از سیستم، پیام‌های خطا یا بازخورد واضحی را به کاربران ارائه دهید. در صورت عدم موفقیت فرآیند خروج از سیستم، آنها را از هرگونه خطر امنیتی احتمالی یا نشت داده مطلع کنید.
  • ملاحظات دسترسی : اطمینان حاصل کنید که مکانیسم خروج از سیستم برای کاربران دارای معلولیت، از جمله افرادی که از فناوری‌های کمکی مانند صفحه‌خوان‌ها یا پیمایش صفحه‌کلید استفاده می‌کنند، قابل دسترسی است.
  • سازگاری بین مرورگرها : عملکرد خروج از سیستم را در مرورگرها و دستگاه های مختلف آزمایش کنید تا مطمئن شوید که به طور مداوم و قابل اعتماد کار می کند.
  • نظارت مستمر و به روز رسانی : به طور منظم فرآیند خروج از سیستم را برای هر گونه آسیب پذیری یا حفره های امنیتی بالقوه نظارت کنید. به‌روزرسانی‌ها و وصله‌های به‌موقع را برای رفع مشکلات شناسایی‌شده اجرا کنید.
  • فدراسیون هویت : اگر کاربر با استفاده از هویت فدرال وارد سیستم شده است، ببینید آیا خروج از سیستم ارائه‌دهنده هویت نیز پشتیبانی می‌شود و مورد نیاز است. همچنین، اگر ارائه‌دهنده هویت از ورود خودکار پشتیبانی می‌کند، فراموش نکنید که از آن جلوگیری کنید .

DOs

  • اگر یک کوکی در سرور را به عنوان بخشی از جریان خروج از سیستم (یا سایر جریان‌های لغو دسترسی) باطل می‌کنید، مطمئن شوید که کوکی را در دستگاه کاربر نیز حذف کرده‌اید.
  • تمام داده های حساسی را که ممکن است در دستگاه کاربر ذخیره کرده باشید پاک کنید: کوکی ها، localStorage ، sessionStorage ، indexedDB ، CacheStorage ، و سایر فروشگاه های داده محلی.
  • اطمینان حاصل کنید که هر منبع حاوی داده های حساس - به ویژه اسناد HTML - با هدر HTTP Cache-control: no-store برگردانده می شود تا مرورگر این منابع را در حافظه دائمی (مثلاً روی دیسک) ذخیره نکند. به طور مشابه، فراخوانی‌های XHRs/ fetch که داده‌های حساس را برمی‌گردانند باید هدر HTTP Cache-Control: no-store نیز تنظیم کنند تا از هرگونه ذخیره‌سازی در حافظه پنهان جلوگیری شود.
  • اطمینان حاصل کنید که هر برگه باز شده در دستگاه کاربر با لغو دسترسی سمت سرور به روز باشد.

پاک کردن داده های حساس هنگام خروج از سیستم

پس از خروج از سیستم، داده های حساس زودگذر و ذخیره شده محلی را پاک کنید. تمرکز روی داده های حساس به این دلیل است که پاک کردن همه چیز منجر به تجربه کاربری بسیار بدتری می شود زیرا ممکن است این کاربر به خوبی بازگردد. به عنوان مثال، اگر قرار باشد تمام داده‌های ذخیره‌شده محلی را پاک کنید، کاربران شما باید مجدداً درخواست‌های رضایت کوکی را تأیید کنند و فرآیندهای دیگری را طی کنند که انگار از ابتدا از وب‌سایت شما بازدید نکرده‌اند.

نحوه پاک کردن کوکی ها

در پاسخ صفحه‌ای که وضعیت خروج از سیستم را تأیید می‌کند، سرصفحه‌های Set-Cookie HTTP را ضمیمه کنید تا همه کوکی‌هایی که به داده‌های حساس مرتبط یا حاوی داده‌های حساس هستند پاک شوند. مقدار 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
...

سناریوی آفلاین

در حالی که رویکرد توضیح داده شده در بالا برای موارد استفاده عمومی کافی است، اگر کاربر به صورت آفلاین کار می کند، کار نمی کند. ممکن است بخواهید برای ردیابی وضعیت ورود به سیستم نیاز به دو کوکی داشته باشید: یک کوکی ایمن فقط HTTPS و یک کوکی معمولی قابل دسترسی از طریق جاوا اسکریپت. اگر کاربر شما می‌خواهد در حالت آفلاین از سیستم خارج شود، می‌توانید کوکی جاوا اسکریپت را پاک کنید و در صورت امکان به سایر عملیات پاکسازی ادامه دهید. اگر یک سرویس‌دهنده دارید، ممکن است بخواهید از مزیت Background Fetch API استفاده کنید تا بعداً زمانی که کاربر آنلاین است، درخواست پاک کردن وضعیت روی سرور را دوباره امتحان کنید.

نحوه تمیز کردن فضای ذخیره سازی

در پاسخ صفحه ای که وضعیت خروج از سیستم را تأیید می کند، مراقب پاک کردن داده های حساس از فروشگاه های داده مختلف باشید:

  • sessionStorage : اگر چه زمانی که کاربر جلسه خود را با وب‌سایت شما خاتمه می‌دهد، این مورد پاک می‌شود، زمانی که کاربر از سیستم خارج می‌شود، به طور فعال اطلاعات حساس را پاک کنید، فقط در صورتی که فراموش کند همه برگه‌های باز شده در وب‌سایت شما را ببندد.

    // Remove sensitive data from sessionStorage
sessionStorage.removeItem('sensitiveSessionData1');
// ...

// Or if everything in sessionStorage is sensitive, clear it all
sessionStorage.clear();

  • APIهای localStorage ، indexedDB ، Cache / Service Worker : وقتی کاربر از سیستم خارج می‌شود، داده‌های حساسی را که ممکن است با استفاده از این 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 و پاک کردن کوکی‌های حساس (به عنوان مثال، کوکی‌های ایمن فقط HTTPS مربوط به احراز هویت) را هنگام خروج کاربران دنبال کردید، دیگر نیازی به انجام این کار ندارید. نگران نگه داشتن داده های حساس در حافظه پنهان عقب و جلو باشید. در واقع، ویژگی cache back/forward صفحاتی را که با منبع یکسان ارائه می‌شوند با یک هدر HTTP Cache-control: no-store در صورت مشاهده یک یا چند سیگنال زیر حذف می‌کند:
    • یک یا چند کوکی ایمن فقط HTTPS اصلاح یا حذف شده است.
    • یک یا چند پاسخ برای تماس‌های XHR/ fetch - صادر شده توسط صفحه - شامل سرصفحه HTTP 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 : از این 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.
    // ...
  }
}

نتیجه گیری

با پیروی از راهنمایی های این سند، می توانید یک تجربه کاربری عالی برای خروج از سیستم طراحی کنید که از خروج ناخواسته جلوگیری می کند و از اطلاعات شخصی کاربر محافظت می کند.