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

Kenji Baheux
Kenji Baheux

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

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

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

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

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

DO

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

บทสรุป

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