อะไรคือปัจจัยที่ทำให้ประสบการณ์ออกจากระบบที่ดี

Kenji Baheux

ออกจากระบบ

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

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

ข้อควรพิจารณาที่สำคัญ

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

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

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

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

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

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

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

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

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

แม้ว่าวิธีการที่อธิบายไว้ข้างต้นเพียงพอแล้วสําหรับ Use Case ทั่วไป แต่จะใช้งานไม่ได้หากผู้ใช้ทํางานแบบออฟไลน์ คุณอาจต้องพิจารณากำหนดให้ใช้คุกกี้ 2 รายการเพื่อติดตามสถานะลงชื่อเข้าใช้ ได้แก่ คุกกี้สำหรับ HTTPS เท่านั้นที่ปลอดภัย 1 คุกกี้ และคุกกี้ปกติ 1 คุกกี้ที่เข้าถึงได้ผ่านทาง JavaScript หากผู้ใช้พยายามออกจากระบบขณะที่ออฟไลน์ ให้ล้างคุกกี้ 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 รายการ
  • การตอบกลับอย่างน้อย 1 รายการสำหรับการเรียก 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.
      // ...
    }
  }
  

บทสรุป

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