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