Apa yang membuat pengalaman logout yang baik?

Kenji Baheux
Kenji Baheux

Keluar

Saat pengguna logout dari situs, mereka menyampaikan keinginan untuk sepenuhnya keluar dari pengalaman pengguna yang dipersonalisasi. Oleh karena itu, penting untuk mematuhinya semirip 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 dirangkum dalam hal konsistensi di seluruh aspek visual dan status pengalaman pengguna. Panduan ini berisi saran konkret tentang 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: Berikan tombol atau link logout yang jelas dan terlihat konsisten, yang mudah diidentifikasi serta dapat diakses di seluruh situs. Hindari penggunaan label yang ambigu atau menyembunyikan fungsi logout di menu, subhalaman, atau lokasi yang tidak intuitif lainnya.
  • Permintaan konfirmasi: Terapkan dialog konfirmasi sebelum menyelesaikan proses logout. Tindakan 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 berbeda, pastikan logout dari satu tab akan memperbarui semua tab terbuka lainnya dari situs tersebut.
  • Alihkan ke halaman landing yang aman: Setelah berhasil logout, alihkan pengguna ke halaman landing yang aman yang secara jelas menunjukkan bahwa mereka tidak lagi login. Hindari mengalihkan pengguna ke halaman yang memiliki informasi yang dipersonalisasi. Demikian pula, pastikan tab lain juga 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 semua data sesi pengguna, cookie, atau file sementara yang bersifat sensitif yang terkait dengan sesi pengguna. Hal ini akan 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 error dan masukan: 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 yang memiliki 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 berfungsi secara konsisten dan andal.
  • Pemantauan dan update berkelanjutan: Pantau proses logout secara rutin untuk mencari potensi kerentanan atau celah keamanan. Terapkan update dan patch secara tepat waktu untuk mengatasi masalah apa pun yang teridentifikasi.
  • Penggabungan 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.

ANJURAN

  • Jika Anda membatalkan cookie di server sebagai bagian dari alur logout (atau alur pencabutan akses lainnya), pastikan untuk menghapus cookie di perangkat pengguna juga.
  • Bersihkan 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 tertentu—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 cache.
  • Pastikan semua tab yang dibuka di perangkat pengguna merupakan yang terbaru dengan pencabutan akses sisi server.

Membersihkan data sensitif saat logout

Setelah logout, pertimbangkan untuk menghapus data sensitif sementara yang disimpan secara lokal. Fokus pada data sensitif dimotivasi oleh fakta bahwa menghapus semuanya akan mengakibatkan pengalaman pengguna yang jauh lebih buruk karena pengguna ini mungkin akan kembali lagi. Misalnya, jika Anda menghapus semua data yang disimpan secara lokal, pengguna kemudian harus mengonfirmasi kembali permintaan izin cookie, dan melalui 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 yang telah berlalu, dan tetapkan nilai cookie ke string kosong untuk pengukuran 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, pendekatan itu tidak akan berfungsi jika pengguna bekerja secara offline. Anda dapat mempertimbangkan untuk mewajibkan dua cookie guna melacak status login: satu cookie khusus HTTPS yang aman, dan satu cookie reguler 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 penyimpanan

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

  • sessionStorage: Meskipun permintaan ini akan dihapus saat pengguna menghentikan sesi situs Anda, pertimbangkan untuk secara proaktif membersihkan data sensitif saat pengguna logout, untuk berjaga-jaga jika mereka lupa menutup semua tab yang terbuka 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 bertahan 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 menyimpan apa pun yang bersifat sensitif.
  • Back-forward cache: Demikian pula, jika Anda mengikuti rekomendasi tentang Cache-control: no-store dan menghapus cookie sensitif (misalnya, cookie khusus HTTPS aman terkait autentikasi) saat pengguna logout, Anda tidak perlu khawatir dengan data sensitif yang dipertahankan di back-forward cache. Fitur back-forward cache juga akan menghapus halaman origin yang sama yang ditayangkan dengan header HTTP Cache-control: no-store jika melihat satu atau beberapa sinyal berikut:
    • Satu atau beberapa cookie khusus HTTPS telah diubah atau dihapus.
    • Satu atau beberapa respons untuk panggilan XHR/fetch—yang dikeluarkan oleh halaman—termasuk header HTTP Cache-control: no-store.

Pengalaman pengguna yang konsisten di seluruh tab

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

Petunjuk

Untuk mencapai 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. 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 menyampaikan perubahan status login di berbagai 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 pengguna logout yang mengesankan yang mencegah logout yang tidak diinginkan, dan melindungi informasi pribadi pengguna.