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

Kenji Baheux

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

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

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

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

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

DOs

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

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

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

บทสรุป

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