Apa yang membuat pengalaman logout yang baik?

Kenji Baheux
Kenji Baheux

Keluar

Saat logout dari situs, pengguna menyampaikan keinginannya untuk sepenuhnya keluar dari pengalaman pengguna yang dipersonalisasi. Oleh karena itu, penting untuk mematuhi model mental pengguna sedekat mungkin. Misalnya, pengalaman logout yang tepat juga harus mempertimbangkan tab yang mungkin dibuka pengguna sebelum memutuskan untuk logout.

Kunci untuk pengalaman logout yang luar biasa dapat diringkas dalam konsistensi di seluruh aspek visual dan status pengalaman pengguna. Panduan ini memberikan saran konkret tentang hal-hal yang perlu diperhatikan, dan cara mendapatkan pengalaman logout yang baik.

Pertimbangan utama

Saat menerapkan fungsi logout di situs Anda, perhatikan aspek berikut untuk memastikan proses logout yang lancar, aman, dan intuitif:

  • UX logout yang jelas dan konsisten: Sediakan tombol atau link logout yang jelas dan terlihat secara konsisten, yang mudah diidentifikasi dan diakses di seluruh situs. Hindari penggunaan label yang ambigu atau menyembunyikan fungsi logout di menu, subhalaman, atau lokasi tidak intuitif lainnya yang tidak jelas.
  • Perintah konfirmasi: Terapkan perintah konfirmasi sebelum menyelesaikan proses logout. Hal ini dapat membantu mencegah pengguna logout secara tidak sengaja, dan memungkinkan pengguna mempertimbangkan kembali apakah mereka benar-benar perlu logout—misalnya, jika mereka dengan rajin mengunci perangkat dengan sandi yang kuat atau mekanisme autentikasi lainnya.
  • Menangani beberapa tab: Jika pengguna telah membuka beberapa halaman dari situs yang sama di tab yang berbeda, pastikan logout dari satu tab juga memperbarui semua tab terbuka lainnya dari situs tersebut.
  • Mengalihkan ke halaman landing yang aman: Setelah berhasil logout, alihkan pengguna ke halaman landing yang aman yang dengan jelas menunjukkan bahwa mereka tidak lagi login. Hindari mengalihkan pengguna ke halaman yang berisi informasi yang dipersonalisasi. Demikian pula, pastikan tab lain tidak lagi mencerminkan status login. Selain itu, pastikan Anda tidak membuat pengalihan terbuka yang dapat dimanfaatkan oleh penyerang.
  • Pembersihan sesi: Setelah pengguna logout, hapus sepenuhnya data sesi pengguna yang sensitif, cookie, atau file sementara yang terkait dengan sesi pengguna. Hal ini mencegah akses tidak sah ke informasi pengguna atau aktivitas akun, dan juga akan mencegah browser memulihkan halaman dengan informasi sensitif dari berbagai cache-nya, terutama cache kembali/maju.
  • Penanganan dan masukan error: Berikan pesan error atau masukan yang jelas kepada pengguna jika ada masalah saat mereka logout. Beri tahu mereka tentang potensi risiko keamanan atau kebocoran data jika proses logout gagal.
  • Pertimbangan aksesibilitas: Pastikan mekanisme logout dapat diakses oleh pengguna penyandang disabilitas, termasuk pengguna yang menggunakan teknologi pendukung seperti pembaca layar atau navigasi keyboard.
  • Kompatibilitas lintas browser: Uji fungsi logout di berbagai browser dan perangkat untuk memastikan fungsi tersebut berfungsi secara konsisten dan andal.
  • Pemantauan dan update berkelanjutan: Pantau proses logout secara rutin untuk mendeteksi potensi kerentanan atau celah keamanan. Terapkan update dan patch secara tepat waktu untuk mengatasi masalah yang teridentifikasi.
  • Federated identity: Jika pengguna login menggunakan federated identity, lihat apakah logout dari penyedia identitas juga didukung dan diperlukan. Selain itu, jika penyedia identitas mendukung login otomatis, jangan lupa untuk mencegahnya.

Tindakan

  • Jika Anda membatalkan validasi cookie di server sebagai bagian dari alur logout (atau alur pencabutan akses lainnya), pastikan untuk menghapus cookie di perangkat pengguna juga.
  • Bersihkan data sensitif apa pun yang mungkin Anda simpan di perangkat pengguna: cookie, localStorage, sessionStorage, indexedDB, CacheStorage, dan penyimpanan data lokal lainnya.
  • Pastikan bahwa semua resource yang berisi data sensitif—khususnya dokumen HTML—ditampilkan dengan header HTTP Cache-control: no-store sehingga browser tidak menyimpan resource ini di penyimpanan permanen (misalnya, di disk). Demikian pula, panggilan XHR/fetch yang menampilkan data sensitif juga harus menetapkan header HTTP Cache-Control: no-store untuk mencegah penyimpanan dalam cache.
  • Pastikan tab yang dibuka di perangkat pengguna sudah diperbarui dengan pencabutan akses sisi server.

Membersihkan data sensitif setelah logout

Setelah logout, pertimbangkan untuk menghapus data sensitif yang disimpan secara lokal dan efemeral. Fokus pada data sensitif dimotivasi oleh fakta bahwa menghapus semuanya akan menghasilkan pengalaman pengguna yang jauh lebih buruk karena pengguna ini mungkin akan kembali. Misalnya, jika Anda menghapus semua data yang disimpan secara lokal, pengguna harus mengonfirmasi ulang permintaan izin cookie, dan menjalani proses lain seolah-olah mereka tidak pernah mengunjungi situs Anda.

Cara menghapus cookie

Pada respons untuk halaman yang mengonfirmasi status logout, lampirkan header HTTP Set-Cookie untuk menghapus setiap cookie yang terkait dengan, atau berisi, data sensitif. Tetapkan nilai expires ke tanggal di masa lalu, dan tetapkan nilai cookie ke string kosong untuk tindakan yang baik.

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
...

Skenario offline

Meskipun pendekatan yang dijelaskan di atas sudah memadai untuk kasus penggunaan umum, pendekatan ini tidak akan berfungsi jika pengguna bekerja secara offline. Sebaiknya pertimbangkan untuk mewajibkan dua cookie untuk melacak status login: satu cookie khusus HTTPS yang aman, dan satu cookie reguler yang dapat diakses melalui JavaScript. Jika pengguna mencoba logout saat offline, Anda dapat menghapus cookie JavaScript dan melanjutkan operasi pembersihan lainnya jika memungkinkan. Jika memiliki pekerja layanan, Anda juga dapat memanfaatkan Background Fetch API untuk mencoba kembali permintaan guna menghapus status di server saat pengguna online nanti.

Cara mengosongkan ruang penyimpanan

Pada respons untuk halaman yang mengonfirmasi status logout, bersihkan data sensitif dari berbagai penyimpanan data dengan hati-hati:

  • sessionStorage: Meskipun data ini dihapus saat pengguna mengakhiri sesi dengan situs Anda, pertimbangkan untuk secara proaktif menghapus data sensitif saat pengguna logout, untuk berjaga-jaga jika mereka lupa menutup semua tab yang dibuka di situs Anda.

    // 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: Saat pengguna logout, hapus data sensitif apa pun yang mungkin Anda simpan menggunakan API ini, mengingat data tersebut akan tetap ada di seluruh sesi.

    // 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');

Cara menghapus cache

  • Cache HTTP: Selama Anda menetapkan Cache-control: no-store pada resource dengan data sensitif, cache HTTP tidak akan menyimpan apa pun yang sensitif.
  • Cache kembali/lanjutkan: Demikian pula, jika Anda mengikuti rekomendasi tentang Cache-control: no-store dan tentang menghapus cookie sensitif (misalnya, cookie khusus HTTPS aman terkait autentikasi) saat pengguna logout, Anda tidak perlu khawatir data sensitif akan disimpan di cache kembali/lanjutkan. Memang, fitur cache kembali/maju akan menghapus halaman dengan origin yang sama yang ditayangkan dengan header HTTP Cache-control: no-store jika mengamati satu atau beberapa sinyal berikut:
    • Satu atau beberapa cookie khusus HTTPS yang aman telah diubah atau dihapus.
    • Satu atau beberapa respons untuk panggilan XHR/fetch—yang dikeluarkan oleh halaman—menyertakan header HTTP Cache-control: no-store.

Pengalaman pengguna yang konsisten di seluruh tab

Pengguna mungkin telah membuka banyak tab untuk situs Anda sebelum memutuskan untuk logout. Pada saat itu, mereka mungkin telah melupakan tab lain, atau bahkan jendela browser lain. Sebaiknya jangan mengandalkan pengguna untuk menutup semua tab dan jendela yang relevan. Sebagai gantinya, ambil sikap proaktif dengan memastikan status login pengguna konsisten di seluruh tab.

Caranya

Untuk mencapai status login yang konsisten di seluruh tab, pertimbangkan untuk menggunakan kombinasi peristiwa pageshow/pagehide dan Broadcast Channel API.

  • Peristiwa pageshow: Setelah pageshow yang dipertahankan, periksa status login pengguna dan hapus data sensitif—atau bahkan seluruh halaman—jika pengguna tidak lagi login. Perhatikan bahwa peristiwa pageshow akan dipicu sebelum halaman dirender untuk pertama kalinya setelah dipulihkan dari navigasi kembali/maju, yang menjamin bahwa pemeriksaan status login Anda akan memungkinkan Anda mereset halaman ke status non-sensitif.

    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: Gunakan API ini untuk menyampaikan perubahan status login di seluruh tab dan jendela. Jika pengguna logout, hapus semua data sensitif, atau alihkan ke halaman logout di semua tab dan jendela yang berisi data sensitif.

    // 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.
    // ...
  }
}

Kesimpulan

Dengan mengikuti panduan dalam dokumen ini, Anda akan dapat mendesain pengalaman pengguna logout yang luar biasa yang mencegah logout yang tidak disengaja, dan melindungi informasi pribadi pengguna.