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