Apa yang membuat pengalaman logout yang baik?

Kenji Baheux
Kenji Baheux

Keluar

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

Kunci untuk pengalaman logout yang baik dapat diringkas dengan tetap konsisten di seluruh aspek visual dan kondisi dari pengalaman pengguna. Panduan ini memberikan saran nyata tentang apa yang harus 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 konsisten, yang mudah diidentifikasi dan dapat diakses di seluruh situs. Hindari penggunaan label yang ambigu atau menyembunyikan fungsi logout di menu, subhalaman, atau lokasi yang tidak intuitif lainnya.
  • 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 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 berbeda, pastikan logout dari satu tab juga akan memperbarui semua tab terbuka lainnya dari situs tersebut.
  • Alihkan ke halaman landing yang aman: Setelah berhasil logout, alihkan pengguna ke halaman landing aman yang dengan jelas menunjukkan bahwa mereka tidak lagi login. Hindari mengalihkan pengguna ke halaman yang memiliki informasi pribadi apa pun. Demikian pula, pastikan tab lain juga tidak lagi mencerminkan status login. Selain itu, pastikan Anda tidak membuat pengalihan terbuka yang dapat dimanfaatkan penyerang.
  • Pembersihan sesi: Setelah pengguna logout, hapus sepenuhnya semua 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 yang berisi informasi sensitif dari berbagai cache-nya, khususnya back/forward cache.
  • 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 yang menggunakan teknologi pendukung seperti pembaca layar atau navigasi keyboard.
  • Kompatibilitas lintas browser: Uji fungsi logout di berbagai browser dan perangkat untuk memastikannya berfungsi secara konsisten dan andal.
  • Pemantauan dan update berkelanjutan: Pantau proses logout secara rutin untuk menemukan potensi kerentanan atau celah keamanan. Terapkan update dan patch secara tepat waktu untuk mengatasi masalah yang teridentifikasi.
  • Penggabungan identitas: Jika pengguna login menggunakan identitas gabungan, lihat apakah logout dari penyedia identitas juga didukung dan diperlukan. Selain itu, jika penyedia identitas mendukung login otomatis, jangan lupa untuk mencegahnya.

ANJURAN

  • Jika Anda membatalkan cookie di server sebagai bagian dari alur logout (atau alur pencabutan akses lainnya), pastikan Anda juga menghapus cookie di perangkat pengguna.
  • Bersihkan semua data sensitif yang mungkin telah Anda simpan di perangkat pengguna: cookie, localStorage, sessionStorage, indexedDB, CacheStorage, dan penyimpanan data lokal lainnya.
  • Pastikan setiap resource yang berisi data sensitif—dalam dokumen HTML tertentu—ditampilkan dengan header HTTP Cache-control: no-store sehingga browser tidak menyimpan resource ini di penyimpanan permanen (misalnya, pada 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 semua tab yang terbuka di perangkat pengguna sudah yang terbaru dengan pencabutan akses sisi server.

Membersihkan data sensitif saat logout

Setelah logout, pertimbangkan untuk menghapus data sensitif sementara dan yang disimpan secara lokal. Fokus pada data sensitif termotivasi oleh fakta bahwa menghapus semuanya akan mengakibatkan pengalaman pengguna yang jauh lebih buruk karena pengguna ini dapat kembali dengan mudah. Misalnya, jika Anda menghapus semua data yang disimpan secara lokal, pengguna harus mengonfirmasi kembali dialog izin cookie, lalu melakukan proses lain seolah-olah mereka tidak pernah mengunjungi situs Anda sejak awal.

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 mendapatkan ukuran 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 cukup untuk kasus penggunaan umum, tetapi 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 biasa 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 untuk menghapus status di server saat pengguna online nanti.

Cara mengosongkan penyimpanan

Pada respons untuk halaman yang mengonfirmasi status logout, berhati-hatilah untuk membersihkan data sensitif dari berbagai penyimpanan data:

  • sessionStorage: Walaupun telah dihapus saat pengguna menghentikan sesi di situs Anda, pertimbangkan untuk membersihkan data sensitif secara proaktif 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, bersihkan semua data sensitif yang mungkin telah 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 membersihkan cache

  • Cache HTTP: Selama Anda menetapkan Cache-control: no-store pada resource dengan data sensitif, cache HTTP tidak akan mempertahankan apa pun yang sensitif.
  • Back/forward cache: Demikian pula, jika Anda mengikuti rekomendasi tentang Cache-control: no-store dan tentang menghapus cookie sensitif (misalnya, cookie khusus HTTPS yang aman terkait autentikasi) saat pengguna logout, Anda tidak perlu khawatir data sensitif akan disimpan dalam back-forward cache. Bahkan, fitur back-forward cache akan menghapus halaman origin yang sama yang disalurkan 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. Saat itu, mereka mungkin lupa dengan tab lain, atau bahkan jendela {i>browser<i} lainnya. 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 mendapatkan 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 mundur/maju, yang menjamin bahwa pemeriksaan status login akan memungkinkan Anda mereset halaman ke status tidak 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 mengomunikasikan 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 merancang pengalaman logout yang baik yang mencegah logout yang tidak diinginkan dan melindungi informasi pribadi pengguna.