สิ่งใดทำให้เกิดประสบการณ์ในการออกจากระบบที่ดี

Kenji Baheux
Kenji Baheux

ออกจากระบบ

เมื่อผู้ใช้ออกจากระบบเว็บไซต์ ผู้ใช้ต้องการออกจากประสบการณ์การใช้งานที่ปรับเปลี่ยนให้เหมาะกับแต่ละบุคคลโดยสิ้นเชิง ดังนั้น การปฏิบัติตามรูปแบบทางความคิดของผู้ใช้จึงเป็นสิ่งสำคัญที่สุด ตัวอย่างเช่น ประสบการณ์การออกจากระบบที่เหมาะสมควรคำนึงถึงแท็บที่ผู้ใช้อาจเปิดก่อนตัดสินใจออกจากระบบด้วย

กุญแจสำคัญสู่ประสบการณ์ออกจากระบบที่ยอดเยี่ยมสามารถสรุปได้ว่า ประสบการณ์ของผู้ใช้มีความสอดคล้องกันในแง่มุมต่างๆ ของภาพและสถานะของประสบการณ์ของผู้ใช้ คู่มือนี้ให้คำแนะนําที่เป็นรูปธรรมเกี่ยวกับสิ่งที่ต้องให้ความสนใจ และวิธีสร้างประสบการณ์การใช้งานที่ดีในการออกจากระบบ

สิ่งสำคัญที่ควรพิจารณา

เมื่อใช้ฟังก์ชันการออกจากระบบในเว็บไซต์ โปรดคำนึงถึงปัจจัยต่อไปนี้เพื่อให้ขั้นตอนการออกจากระบบเป็นไปอย่างราบรื่น ปลอดภัย และใช้งานง่าย

  • UX การออกจากระบบที่ชัดเจนและสอดคล้องกัน: มอบปุ่มหรือลิงก์ออกจากระบบที่ชัดเจนและมองเห็นได้ตลอด โดยให้ระบุและเข้าถึงได้ง่ายทั่วทั้งเว็บไซต์ หลีกเลี่ยงการใช้ป้ายกำกับที่กำกวมหรือซ่อนฟังก์ชันการออกจากระบบในเมนูที่คลุมเครือ หน้าเว็บย่อย หรือตำแหน่งอื่นๆ ที่ไม่ซับซ้อน
  • ข้อความแจ้งให้ยืนยัน: ใช้ข้อความแจ้งให้ยืนยันก่อนเสร็จสิ้นกระบวนการออกจากระบบ วิธีนี้จะช่วยป้องกันไม่ให้ผู้ใช้ออกจากระบบโดยไม่ได้ตั้งใจ และช่วยให้ผู้ใช้พิจารณาได้ใหม่หากต้องการออกจากระบบจริงๆ เช่น กรณีที่ตั้งใจล็อกอุปกรณ์ด้วยรหัสผ่านที่รัดกุมหรือกลไกการตรวจสอบสิทธิ์อื่นๆ
  • จัดการแท็บหลายแท็บ: หากผู้ใช้เปิดหน้าหลายหน้าจากเว็บไซต์เดียวกันในแท็บที่ต่างกัน ให้ตรวจสอบว่าการออกจากระบบจากแท็บหนึ่งเป็นการอัปเดตแท็บอื่นๆ ที่เปิดอยู่ทั้งหมดจากเว็บไซต์นั้นด้วย
  • เปลี่ยนเส้นทางไปยังหน้า Landing Page ที่ปลอดภัย: เมื่อออกจากระบบสำเร็จ ให้เปลี่ยนเส้นทางผู้ใช้ไปยังหน้า Landing Page ที่ปลอดภัยซึ่งระบุอย่างชัดเจนว่าผู้ใช้ไม่ได้ลงชื่อเข้าใช้อีกต่อไป หลีกเลี่ยงการเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่มีข้อมูลที่ปรับเปลี่ยนในแบบของคุณ และเช่นเดียวกัน โปรดตรวจสอบว่าแท็บอื่นๆ ไม่ได้แสดงสถานะลงชื่อเข้าใช้แล้วเช่นกัน นอกจากนี้ โปรดตรวจสอบว่าคุณไม่ได้สร้างการเปลี่ยนเส้นทางแบบเปิดที่ผู้โจมตีอาจใช้ประโยชน์จากได้
  • การล้างเซสชัน: เมื่อผู้ใช้ออกจากระบบแล้ว ให้นำข้อมูลเซสชันที่มีความละเอียดอ่อนของผู้ใช้ คุกกี้ หรือไฟล์ชั่วคราวที่เชื่อมโยงกับเซสชันของผู้ใช้ออกให้หมด ซึ่งจะป้องกันการเข้าถึงข้อมูลผู้ใช้หรือกิจกรรมในบัญชีโดยไม่ได้รับอนุญาต และช่วยป้องกันไม่ให้เบราว์เซอร์คืนค่าหน้าที่มีข้อมูลที่ละเอียดอ่อนจากแคชต่างๆ โดยเฉพาะ Back/Forward Cache
  • การจัดการข้อผิดพลาดและความคิดเห็น: แสดงข้อความแสดงข้อผิดพลาดที่ชัดเจนหรือความคิดเห็นแก่ผู้ใช้หากมีปัญหาเมื่อออกจากระบบ แจ้งให้ลูกค้าทราบถึงความเสี่ยงด้านความปลอดภัยหรือข้อมูลรั่วไหลที่อาจเกิดขึ้นหากออกจากระบบไม่สำเร็จ
  • ข้อควรพิจารณาเกี่ยวกับการเข้าถึง: เพื่อให้มั่นใจว่ากลไกการออกจากระบบสามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ รวมถึงผู้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอหรือการนำทางด้วยแป้นพิมพ์
  • ความเข้ากันได้ในหลายเบราว์เซอร์: ทดสอบฟังก์ชันการออกจากระบบในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าทำงานอย่างสอดคล้องกันและเชื่อถือได้
  • การตรวจสอบและการอัปเดตอย่างต่อเนื่อง: ตรวจสอบกระบวนการออกจากระบบเป็นประจำเพื่อหาช่องโหว่หรือช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้น นำการอัปเดตและแพตช์มาใช้อย่างทันท่วงทีเพื่อแก้ไขปัญหาที่ระบุ
  • การรวมศูนย์ข้อมูลประจำตัว: หากผู้ใช้ลงชื่อเข้าใช้ด้วยข้อมูลประจำตัวแบบรวมศูนย์ ให้ดูว่าการออกจากระบบของผู้ให้บริการข้อมูลประจำตัวนั้นรองรับและจำเป็นหรือไม่ และหากผู้ให้บริการข้อมูลประจำตัวรองรับการลงชื่อเข้าใช้โดยอัตโนมัติ โปรดอย่าลืมป้องกันการลงชื่อเข้าใช้นี้

สิ่งที่ควรทำ

  • หากคุณปิดใช้งานคุกกี้บนเซิร์ฟเวอร์โดยเป็นส่วนหนึ่งของขั้นตอนการออกจากระบบ (หรือกระบวนการเพิกถอนการเข้าถึงอื่นๆ) โปรดตรวจสอบว่าได้ลบคุกกี้บนอุปกรณ์ของผู้ใช้ด้วย
  • ล้างข้อมูลที่ละเอียดอ่อนทั้งหมดที่คุณจัดเก็บไว้ในอุปกรณ์ของผู้ใช้ ได้แก่ คุกกี้, localStorage, sessionStorage, indexedDB, CacheStorage และที่เก็บข้อมูลอื่นๆ ในเครื่อง
  • ตรวจสอบว่าทรัพยากรทั้งหมดที่มีข้อมูลที่ละเอียดอ่อน เช่น เอกสาร HTML หนึ่งๆ ส่งกลับมาพร้อมกับส่วนหัว HTTP ของ Cache-control: no-store เพื่อไม่ให้เบราว์เซอร์เก็บทรัพยากรเหล่านี้ไว้ในพื้นที่เก็บข้อมูลถาวร (เช่น ในดิสก์) ในทํานองเดียวกัน การเรียก XHRs/fetch ที่ส่งข้อมูลที่ละเอียดอ่อนควรตั้งค่าส่วนหัว HTTP ของ Cache-Control: no-store เพื่อป้องกันการแคช
  • ตรวจสอบว่าแท็บที่เปิดอยู่ในอุปกรณ์ของผู้ใช้มีการเพิกถอนสิทธิ์เข้าถึงในฝั่งเซิร์ฟเวอร์เป็นเวอร์ชันล่าสุด

ล้างข้อมูลที่ละเอียดอ่อนเมื่อออกจากระบบ

เมื่อออกจากระบบ ให้พิจารณาล้างข้อมูลที่ละเอียดอ่อนและข้อมูลที่ละเอียดอ่อนที่จัดเก็บไว้ในเครื่อง การให้ความสำคัญกับข้อมูลที่ละเอียดอ่อนเกิดจากข้อเท็จจริงที่ว่าการล้างข้อมูลทุกอย่างจะส่งผลให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่แย่ลงมาก เนื่องจากผู้ใช้รายนี้อาจกลับมาใช้งานได้อีกครั้ง ตัวอย่างเช่น หากคุณล้างข้อมูลที่จัดเก็บไว้ในเครื่องทั้งหมด ผู้ใช้จะต้องตอบรับข้อความแจ้งความยินยอมในการใช้คุกกี้อีกครั้งและดำเนินการผ่านกระบวนการอื่นๆ ราวกับว่าไม่เคยเข้าชมเว็บไซต์ของคุณมาก่อน

วิธีล้างคุกกี้

ในการตอบกลับของหน้าเว็บที่ยืนยันสถานะออกจากระบบ ให้แนบส่วนหัว HTTP ของ 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
...

สถานการณ์ออฟไลน์

แม้ว่าวิธีการที่อธิบายไว้ข้างต้นจะเพียงพอสำหรับกรณีการใช้งานทั่วไป แต่จะใช้ไม่ได้หากผู้ใช้ทำงานแบบออฟไลน์ คุณอาจต้องพิจารณากำหนดให้มีการใช้คุกกี้ 2 รายการเพื่อติดตามสถานะการลงชื่อเข้าใช้ ได้แก่ คุกกี้ HTTPS ที่ปลอดภัยเท่านั้นและคุกกี้ปกติที่เข้าถึงได้ผ่าน JavaScript 1 รายการ หากผู้ใช้พยายามออกจากระบบในขณะออฟไลน์ คุณสามารถล้างคุกกี้ 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 API: เมื่อผู้ใช้ออกจากระบบ ให้ล้างข้อมูลที่ละเอียดอ่อนที่คุณอาจจัดเก็บไว้โดยใช้ 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 จะไม่เก็บสิ่งที่ละเอียดอ่อน
  • Back-Forward Cache: ในทำนองเดียวกัน หากคุณทำตามคำแนะนำเกี่ยวกับ Cache-control: no-store และเกี่ยวกับการล้างคุกกี้ที่ละเอียดอ่อน (เช่น คุกกี้ HTTPS ที่ปลอดภัยสำหรับการตรวจสอบสิทธิ์เท่านั้น) เมื่อผู้ใช้ออกจากระบบ คุณก็ไม่ต้องกังวลว่าข้อมูลที่ละเอียดอ่อนจะเก็บไว้ใน Back-Forward Cache อันที่จริง ฟีเจอร์ Back-Forward Cache จะนำหน้าต้นทางเดียวกันที่แสดงพร้อมส่วนหัว HTTP ของ Cache-control: no-store ออกหากสังเกตเห็นสัญญาณต่อไปนี้อย่างน้อย 1 รายการ
    • มีการแก้ไขหรือลบคุกกี้แบบ HTTPS ที่ปลอดภัยอย่างน้อย 1 รายการ
    • การตอบกลับสำหรับการเรียก XHR/fetch อย่างน้อย 1 รายการซึ่งออกโดยหน้าเว็บจะรวมส่วนหัว 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.
    // ...
  }
}

บทสรุป

เมื่อปฏิบัติตามคำแนะนำในเอกสารนี้ คุณจะออกแบบประสบการณ์ที่ยอดเยี่ยมในการออกจากระบบของผู้ใช้ได้ ซึ่งช่วยป้องกันการออกจากระบบโดยไม่ได้ตั้งใจ และยังปกป้องข้อมูลส่วนบุคคลของผู้ใช้ได้ด้วย