İyi bir oturum kapatma deneyiminin özellikleri nelerdir?

Kenji Baheux
Kenji Baheux

Çıkış yapma

Kullanıcılar bir web sitesinden çıkış yaptıklarında, kişiselleştirilmiş kullanıcı deneyiminden tamamen çıkma isteklerini iletmiş olurlar. Dolayısıyla, kullanıcının zihinsel modeline mümkün olduğunca bağlı olmak önemlidir. Örneğin, uygun bir oturum kapatma deneyimi için kullanıcının oturumu kapatmaya karar vermeden önce açmış olabileceği tüm sekmeler de hesaba katılmalıdır.

Mükemmel bir oturum kapatma deneyiminin anahtarı, kullanıcı deneyiminin görsel ve durum açısından tutarlı olması açısından özetlenebilir. Bu kılavuzda, nelere dikkat etmeniz gerektiği ve iyi bir oturum kapatma deneyiminin nasıl sağlanacağı konusunda somut tavsiyeler yer almaktadır.

Göz önünde bulundurulması gereken önemli noktalar

Web sitenize oturum kapatma işlevini uygularken, sorunsuz, güvenli ve sezgisel bir oturum kapatma işlemi sağlamak için aşağıdaki noktalara dikkat edin:

  • Açık ve tutarlı oturum kapatma deneyimi: Kolayca tanımlanabilen ve web sitesi genelinde erişilebilen, net ve tutarlı bir şekilde görülebilen bir oturum kapatma düğmesi veya bağlantısı sağlayın. Belirsiz etiketler kullanmaktan veya oturum kapatma işlevini anlaşılmayan menülerde, alt sayfalarda ya da alışılmadık diğer yerlerde gizlemekten kaçının.
  • Onay istemi: Oturumu kapatma işlemini tamamlamadan önce onay istemi uygulayın. Bu, kullanıcıların yanlışlıkla oturumlarını kapatmalarını önlemeye yardımcı olabilir ve kullanıcıların gerçekten oturum kapatmaları gerekip gerekmediğini (örneğin, güçlü bir şifre veya başka bir kimlik doğrulama mekanizmasıyla cihazlarını özenle kilitlediklerinde) tekrar değerlendirmelerine yardımcı olabilir.
  • Birden fazla sekmeyi yönetme: Bir kullanıcı aynı web sitesindeki birkaç sayfayı farklı sekmelerde açtıysa bir sekmeden çıkış yaptığınızda, ilgili web sitesindeki diğer tüm açık sekmeler de güncellenir.
  • Güvenli bir açılış sayfasına yönlendirme: Oturum kapatıldıktan sonra kullanıcıyı, oturumunun artık açık olmadığını açıkça belirten güvenli bir açılış sayfasına yönlendirin. Kullanıcıları kişiselleştirilmiş bilgiler içeren sayfalara yönlendirmekten kaçının. Benzer şekilde, diğer sekmelerin de oturum açık durumunu yansıtmasını sağlayın. Ayrıca, saldırganların yararlanabileceği açık bir yönlendirme oluşturmadığınızdan emin olun.
  • Oturum temizleme: Kullanıcı oturumu kapattığında, kullanıcının oturumuyla ilişkili tüm hassas kullanıcı oturumu verilerini, çerezleri veya geçici dosyaları tamamen kaldırın. Bu, kullanıcı bilgilerine veya hesap etkinliğine yetkisiz erişimi önler ve tarayıcının özellikle geri-ileri önbelleği olmak üzere çeşitli önbelleklerinden hassas bilgiler içeren sayfaları geri yüklemesini önler.
  • Hata işleme ve geri bildirim: Oturum kapattıklarında herhangi bir sorunla karşılaşan kullanıcılara net hata mesajları veya geri bildirim sağlayın. Oturumu kapatma işleminin başarısız olması durumunda olası güvenlik risklerini veya veri sızıntılarını bildirin.
  • Erişilebilirlikle ilgili dikkat edilmesi gerekenler: Oturumu kapatma mekanizmasının, ekran okuyucu veya klavyeyle gezinme gibi yardımcı teknolojiler kullananlar da dahil olmak üzere engelli kullanıcılar için erişilebilir olduğundan emin olun.
  • Tarayıcılar arası uyumluluk: Tutarlı ve güvenilir çalıştığından emin olmak için oturum kapatma işlevini farklı tarayıcılarda ve cihazlarda test edin.
  • Sürekli izleme ve güncellemeler: Olası güvenlik açıkları veya güvenlik açıkları için oturum kapatma işlemini düzenli olarak izleyin. Tanımlanan sorunları gidermek için güncellemeleri ve yamaları zamanında uygulayın.
  • Kimlik federasyonu: Kullanıcı birleşik kimlik kullanarak oturum açtıysa kimlik sağlayıcıdaki oturumun da desteklenip desteklenmediğine ve gerekli olup olmadığına bakın. Ayrıca, kimlik sağlayıcı otomatik oturum açmayı destekliyorsa bunu engellemeyi unutmayın.

YAPILMASI GEREKENLER

  • Oturum kapatma akışının (veya diğer erişim iptali akışlarının) parçası olarak sunucuda bir çerezi geçersiz kılarsanız, çerezi kullanıcının cihazında da sildiğinizden emin olun.
  • Kullanıcının cihazında depolamış olabileceğiniz tüm hassas verileri temizleyin: çerez, localStorage, sessionStorage, indexedDB, CacheStorage ve diğer yerel veri depoları.
  • Hassas veriler içeren tüm kaynakların, özellikle de HTML dokümanlarının Cache-control: no-store HTTP üstbilgisiyle döndürüldüğünden emin olun. Böylece, tarayıcı bu kaynakları kalıcı bir depolama alanında (örneğin, diskte) depolamaz. Benzer şekilde, hassas veriler döndüren XHR'ler/fetch çağrıları, önbelleğe almayı engellemek için Cache-Control: no-store HTTP üst bilgisini de ayarlamalıdır.
  • Kullanıcının cihazındaki açık sekmelerin, sunucu tarafı erişim iptalleriyle uyumlu olduğundan emin olun.

Çıkış yaptıktan sonra hassas verileri temizleme

Oturumunuzu kapattıktan sonra geçici ve yerel olarak depolanan hassas verileri temizlemeyi deneyin. Hassas verilere odaklanmanın sebebi, her şeyi temizlemenin çok daha kötü bir kullanıcı deneyimine yol açacağı, çünkü söz konusu kullanıcının geri dönme olasılığı çok daha yüksektir. Örneğin, yerel olarak depolanan tüm verileri temizleyecekseniz kullanıcılarınızın çerez izni istemlerini onaylaması ve web sitenizi hiç ziyaret etmemiş gibi diğer işlemlerden geçmesi gerekecektir.

Çerezler nasıl temizlenir?

Oturumun kapalı olduğunu onaylayan sayfanın yanıtına, hassas verilerle ilgili olan veya içeren her çerezi temizlemek için Set-Cookie HTTP üst bilgilerini ekleyin. expires değerini uzak geçmişte bir tarihe, çerezin değerini de boş bir dizeye ayarlayın.

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

Çevrimdışı senaryo

Yukarıda açıklanan yaklaşım genel kullanım alanları için yeterli olsa da kullanıcı çevrimdışı çalışıyorsa işe yaramaz. Oturum açılmış durumu izlemek için iki çerezin zorunlu olmasını düşünebilirsiniz: Biri güvenli yalnızca HTTPS çerezi ve diğeri JavaScript üzerinden erişilebilen normal bir çerez. Kullanıcınız çevrimdışı durumdayken çıkış yapmaya çalışıyorsa, JavaScript çerezini temizleyebilir ve mümkünse diğer temizleme işlemlerine devam edebilirsiniz. Bir hizmet çalışanınız varsa kullanıcı daha sonra çevrimiçi olduğunda sunucudaki durumu temizleme isteğini yeniden denemek için Arka Plan Getirme API'sinden de yararlanmak isteyebilirsiniz.

Depolama alanında yer açma

Oturumun kapalı olduğunu onaylayan sayfanın yanıtında, çeşitli veri depolarındaki hassas verileri temizlemeye dikkat edin:

  • sessionStorage: Bu ayar, kullanıcı web sitenizdeki oturumunu sonlandırdığında temizlenir. Bununla birlikte, kullanıcı web sitenizde açık olan tüm sekmeleri kapatmayı unutabileceği ihtimaline karşı kullanıcı oturumu kapattığında hassas verileri proaktif olarak temizlemeniz önerilir.

    // 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'leri: Kullanıcı oturumunu kapattığında, bu API'leri kullanarak depolamış olabileceğiniz hassas verileri, söz konusu verilerin oturumlar genelinde değişmeye devam edeceğini düşünerek temizleyin.

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

Önbellekler nasıl temizlenir?

  • HTTP önbelleği: Hassas veriler içeren kaynaklarda Cache-control: no-store değerini ayarladığınız sürece HTTP önbelleği hassas verileri saklamaz.
  • Geri-ileri önbellek: Benzer şekilde, kullanıcılar oturumu kapattığında Cache-control: no-store ile ilgili ve hassas çerezleri (örneğin, kimlik doğrulamayla ilgili, güvenli yalnızca HTTPS tabanlı çerezler) temizleme ile ilgili önerileri uyguladıysanız, hassas verilerin geri-ileri önbellek içinde tutulması konusunda endişelenmenize gerek yoktur. Aslında, geri-ileri önbellek özelliği aşağıdaki sinyallerden birini veya daha fazlasını gözlemlerse Cache-control: no-store HTTP başlığıyla sunulan aynı kaynaklı sayfaları çıkarır:
    • Yalnızca HTTPS tabanlı bir veya daha fazla güvenli çerez değiştirildi ya da silindi.
    • Sayfa tarafından gönderilen XHR'ler/fetch çağrıları için bir veya daha fazla yanıtta Cache-control: no-store HTTP üst bilgisi bulunuyordu.

Sekmeler arasında tutarlı kullanıcı deneyimi

Kullanıcılarınız oturumu kapatmaya karar vermeden önce web siteniz için çok sayıda sekme açmış olabilir. O zamana kadar diğer sekmeleri ve hatta diğer tarayıcı pencerelerini unutmuş olabilirler. İlgili tüm sekmeleri ve pencereleri kapatmaları için kullanıcılarınıza güvenmemek en iyisidir. Bunun yerine, kullanıcının giriş durumunun sekmeler arasında tutarlı olmasını sağlayarak proaktif bir tutum sergileyin.

Nasıl yapabilirsiniz?

Oturum açmış durumdayken sekmeler arasında tutarlı bir durum elde etmek için pageshow/pagehide etkinlikleri ile Broadcast Channel API'yi bir arada kullanmayı deneyin.

  • pageshow etkinliği: Kalıcı bir pageshow olduğunda, kullanıcının giriş durumunu kontrol edin ve oturum artık açık değilse hassas verileri (hatta sayfanın tamamını) temizleyin. pageshow etkinliğinin, sayfa geri-ileri gezinmeden geri yüklendikten sonra ilk kez oluşturulmadan önce tetikleneceğini unutmayın. Bu, giriş durumu kontrolünüzün sayfayı hassas olmayan bir duruma sıfırlamanıza izin vermesini sağlar.

    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: Giriş durumu değişikliklerini sekmeler ve pencereler arasında bildirmek için bu API'yi kullanın. Kullanıcının oturumu kapalıysa tüm hassas verileri temizleyin veya alternatif olarak hassas veri içeren tüm sekmelerde ve pencerelerde bir oturum kapatma sayfasına yönlendirin.

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

Sonuç

Bu belgedeki yönergeleri izleyerek istenmeyen oturum kapatma işlemlerini engelleyen ve kullanıcının kişisel bilgilerini koruyan mükemmel bir oturum kapatma deneyimi tasarlayabilirsiniz.