Apa yang membuat pengalaman logout yang baik?

Kenji Baheux
Kenji Baheux

Saat pengguna logout dari situs, mereka mengomunikasikan kebutuhan mereka untuk keluar sepenuhnya 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 telah dibuka pengguna sebelum memutuskan untuk logout.

Kunci untuk pengalaman logout yang hebat dapat diringkas dengan konsisten di seluruh aspek visual dan status pengalaman pengguna. Panduan ini memberikan saran konkret tentang hal-hal 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 selalu terlihat, yang mudah diidentifikasi dan diakses di seluruh situs. Hindari penggunaan label yang ambigu atau menyembunyikan fungsi logout di menu, subhalaman, atau lokasi lain yang tidak intuitif.
  • Dialog konfirmasi: Terapkan dialog 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 secara rutin mengunci perangkat mereka 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 bahwa logout dari satu tab juga memperbarui semua tab lain yang terbuka dari situs tersebut.
  • Mengalihkan ke halaman landing yang aman: Setelah berhasil logout, alihkan pengguna ke halaman landing yang aman yang menunjukkan dengan jelas bahwa mereka tidak lagi login. Hindari mengalihkan pengguna ke halaman yang memiliki 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, cookie, atau file sementara yang sensitif yang terkait dengan sesi pengguna. Tindakan 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, khususnya cache kembali/maju.
  • Penanganan error dan masukan: Berikan pesan error atau masukan yang jelas kepada pengguna jika ada masalah saat mereka logout. Memberi 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 mereka 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 bekerja secara konsisten dan andal.
  • Pemantauan dan update berkelanjutan: Pantau proses logout secara rutin untuk mendeteksi potensi kerentanan atau celah keamanan. Terapkan update dan patch tepat waktu untuk mengatasi masalah yang teridentifikasi.
  • Federasi identitas: Jika pengguna login menggunakan identitas gabungan, periksa apakah logout dari penyedia identitas juga didukung dan diperlukan. Selain itu, jika penyedia identitas mendukung login otomatis, jangan lupa untuk mencegahnya.

Apa yang harus dilakukan

  • Jika Anda membatalkan validitas cookie di server sebagai bagian dari alur logout (atau alur pencabutan akses lainnya), pastikan untuk menghapus cookie di perangkat pengguna juga.
  • Hapus semua data sensitif yang mungkin telah Anda simpan di perangkat pengguna: cookie, localStorage, sessionStorage, indexedDB, CacheStorage, dan penyimpanan data lokal lainnya.
  • Pastikan 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 menyetel header HTTP Cache-Control: no-store untuk mencegah penyimpanan dalam cache.
  • Pastikan semua tab yang dibuka di perangkat pengguna sudah diupdate dengan pencabutan akses sisi server.

Membersihkan data sensitif saat logout

Setelah logout, pertimbangkan untuk menghapus data sensitif efemeral dan yang disimpan secara lokal. Fokus pada data sensitif didasarkan pada 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 Anda harus mengonfirmasi ulang perintah izin cookie, dan menjalani proses lain seolah-olah mereka belum pernah mengunjungi situs Anda sebelumnya.

Cara membersihkan 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 berjaga-jaga.

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 cukup untuk kasus penggunaan umum, pendekatan ini tidak berfungsi jika pengguna sedang offline. Anda dapat mempertimbangkan 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 Anda mencoba logout saat offline, Anda dapat menghapus cookie JavaScript dan melanjutkan dengan operasi pembersihan lainnya jika memungkinkan. Jika memiliki pekerja layanan, Anda juga dapat memanfaatkan Background Fetch API untuk mencoba lagi permintaan guna menghapus status di server saat pengguna online nanti.

Cara mengosongkan ruang penyimpanan

Pada respons untuk halaman yang mengonfirmasi status logout, pastikan untuk menghapus data sensitif dari berbagai penyimpanan data:

  • sessionStorage: Meskipun ini dihapus saat pengguna mengakhiri sesi dengan situs Anda, pertimbangkan untuk secara proaktif membersihkan data sensitif saat pengguna logout, 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 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 with 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 menyetel Cache-control: no-store pada resource dengan data sensitif, cache HTTP tidak akan menyimpan apa pun yang sensitif.
  • Cache kembali/maju: Demikian pula, jika Anda mengikuti rekomendasi tentang Cache-control: no-store dan tentang menghapus cookie sensitif (misalnya, cookie hanya HTTPS yang aman terkait autentikasi) saat pengguna logout, Anda tidak perlu khawatir data sensitif dipertahankan dalam cache kembali/maju. Memang, fitur back/forward cache akan mengeluarkan 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 Anda mungkin telah membuka banyak tab untuk situs Anda sebelum mereka memutuskan untuk logout. Pada saat itu, mereka mungkin telah melupakan tab lain, atau bahkan jendela browser lain. Sebaiknya hindari mengandalkan pengguna Anda 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 dipertahankan, periksa status login pengguna dan hapus data sensitif—atau bahkan seluruh halaman—jika pengguna tidak lagi login. Peristiwa pageshow akan memicu sebelum halaman dirender untuk pertama kalinya setelah dipulihkan dari navigasi kembali/maju, sehingga pemeriksaan status login akan memungkinkan Anda mereset halaman ke status yang 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 dengan 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.