İyi bir oturum kapatma deneyiminin özellikleri nelerdir?

Kenji Baheux
Kenji Baheux

Çıkış yapma

Bir kullanıcı bir web sitesinden çıkış yaptığında kişiselleştirilmiş kullanıcı deneyiminden tamamen çıkmak istediğini belirtmiş olur. Bu nedenle, kullanıcının zihinsel modeline mümkün olduğunca sadık kalmak önemlidir. Örneğin, oturumu kapatma deneyimi, kullanıcının oturumu kapatmaya karar vermeden önce açmış olabileceği sekmeleri de dikkate almalıdır.

Oturum kapatma deneyiminin mükemmel olmasının anahtarı, kullanıcı deneyiminin görsel ve durum yönlerinde tutarlı olmaktır. Bu kılavuzda, nelere dikkat etmeniz gerektiği ve nasıl iyi bir oturum kapatma deneyimi sağlayabileceğiniz hakkında net tavsiyeler verilmektedir.

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

Web sitenizde oturum kapatma işlevini uygularken sorunsuz, güvenli ve sezgisel bir oturum kapatma süreci sağlamak için aşağıdaki hususlara dikkat edin:

  • Net ve tutarlı bir oturum kapatma kullanıcı deneyimi: Web sitesi genelinde kolayca bulunabilen ve erişilebilen, net ve tutarlı bir oturum kapatma düğmesi veya bağlantısı sağlayın. Anlamsız etiketler kullanmaktan veya oturumu kapatma işlevini belirsiz menülerde, alt sayfalarda ya da sezgisel olmayan diğer konumlarda gizlemekten kaçının.
  • Onay istemi: Oturum kapatma işlemini tamamlamadan önce bir onay istemi uygulayın. Bu, kullanıcıların yanlışlıkla oturum kapatmasını önleyebilir ve kullanıcıların oturum kapatmaları gerekip gerekmediğini yeniden değerlendirmelerine olanak tanır. Örneğin, cihazlarını güçlü bir şifreyle veya başka bir kimlik doğrulama mekanizmasıyla kilitleyen kullanıcılar oturum kapatma işlemini yeniden değerlendirebilir.
  • Birden fazla sekmeyi işleme: Bir kullanıcı aynı web sitesinden farklı sekmelerde birkaç sayfa açtıysa bir sekmede oturum kapatıldığında, söz konusu web sitesindeki diğer tüm açık sekmelerin de güncellendiğinden emin olun.
  • Güvenli bir açılış sayfasına yönlendirme: Oturum başarıyla kapatıldıktan sonra kullanıcıyı, artık oturum açmadığını açıkça belirten güvenli bir açılış sayfasına yönlendirin. Kullanıcıları kişiselleştirilmiş bilgilerin bulunduğu sayfalara yönlendirmekten kaçının. Benzer şekilde, diğer sekmelerde de oturum açmış durumunun artık görünmediğinden emin olun. Ayrıca, saldırganların yararlanabileceği bir açık yönlendirme oluşturmadığınızdan emin olun.
  • Oturum temizliği: Kullanıcı oturumunu kapattığında, kullanıcı 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 engeller. Ayrıca, tarayıcının hassas bilgiler içeren sayfaları çeşitli önbelleklerinden (özellikle geri/ileri önbelleği) geri yüklemesini de engeller.
  • Hata işleme ve geri bildirim: Oturum kapatırken herhangi bir sorun yaşanırsa kullanıcılara net hata mesajları veya geri bildirimler sağlayın. Oturum kapatma işlemi başarısız olursa olası güvenlik riskleri veya veri sızıntıları hakkında bilgi verin.
  • Erişilebilirlik hususları: Oturum kapatma mekanizmasının, ekran okuyucu veya klavye gezinme gibi yardımcı teknolojileri kullananlar da dahil olmak üzere engelli kullanıcılar tarafından erişilebilir olduğundan emin olun.
  • Tarayıcılar arası uyumluluk: Oturum kapatma işlevinin tutarlı ve güvenilir bir şekilde çalıştığından emin olmak için farklı tarayıcılarda ve cihazlarda test edin.
  • Sürekli izleme ve güncellemeler: Oturum kapatma işlemini, olası güvenlik açıkları veya güvenlik boşlukları açısından düzenli olarak izleyin. Tespit edilen sorunları gidermek için güncellemeleri ve yamaları zamanında uygulayın.
  • Kimlik federasyonu: Kullanıcı birleştirilmiş kimlik kullanarak oturum açtıysa kimlik sağlayıcıdan da oturum kapatmanın desteklenip desteklenmediğini ve gerekli olup olmadığını kontrol edin. Ayrıca, kimlik sağlayıcı otomatik oturum açmayı destekliyorsa bunu önlemeyi unutmayın.

DO'lar

  • Oturum kapatma akışı (veya diğer erişim iptal akışları) kapsamında sunucudaki bir çerezi geçersiz kılarsanız çerezi kullanıcının cihazından da sildiğinizden emin olun.
  • Kullanıcının cihazında depolamış olabileceğiniz tüm hassas verileri temizleyin: çerezler, localStorage, sessionStorage, indexedDB, CacheStorage ve diğer yerel veri depolama alanları.
  • Tarayıcının bu kaynakları kalıcı depolama alanında (ör. diskte) saklamaması için hassas veriler içeren kaynakların (özellikle HTML dokümanları) Cache-control: no-store HTTP üst bilgisiyle döndürüldüğünden emin olun. Benzer şekilde, hassas veriler döndüren XHR'ler/fetch çağrıları da önbelleğe almayı önlemek için Cache-Control: no-store HTTP üstbilgisini ayarlamalıdır.
  • Kullanıcının cihazında açık olan sekmelerin, sunucu tarafında erişimin iptal edilmesiyle ilgili güncel bilgiler içerdiğinden emin olun.

Oturum kapattıktan sonra hassas verileri temizleme

Oturumunuz kapatıldıktan sonra geçici ve yerel olarak depolanan hassas verileri temizleyebilirsiniz. Hassas verilere odaklanmanın nedeni, kullanıcının geri dönme olasılığı yüksek olduğundan her şeyin silinmesinin önemli ölçüde daha kötü bir kullanıcı deneyimine neden olacağıdır. Örneğin, yerel olarak depolanan tüm verileri temizlerseniz kullanıcılarınızın çerez rıza istemlerini yeniden onaylaması ve web sitenizi hiç ziyaret etmemiş gibi diğer işlemleri tamamlaması gerekir.

Çerezleri temizleme

Oturum kapatma durumunu onaylayan sayfanın yanıtına, hassas verilerle ilgili veya hassas veriler içeren tüm çerezleri temizlemek için Set-Cookie HTTP üstbilgileri ekleyin. expires değerini uzak geçmişteki 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 çalışmaz. Oturum açmış durumunu izlemek için iki çerez kullanmanız önerilir: yalnızca HTTPS olan güvenli bir çerez ve JavaScript aracılığıyla erişilebilen normal bir çerez. Kullanıcınız çevrimdışıyken oturumu kapatmaya ç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 internete bağlandığında sunucuda durumu temizleme isteğini yeniden denemek için Arka Planda Getirme API'sinden de yararlanabilirsiniz.

Depolama alanında yer açma

Oturum kapalı durumunu onaylayan sayfanın yanıtında, çeşitli veri depolarındaki hassas verileri temizlemeyi unutmayın:

  • sessionStorage: Bu depolama alanı, kullanıcı web sitenizle oturumunu sonlandırdığında temizlenir. Ancak kullanıcı web sitenizde açık olan tüm sekmeleri kapatmayı unutabilir. Bu nedenle, kullanıcı oturumu kapattığında hassas verileri proaktif olarak temizlemeyi düşünebilirsiniz.

    // 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 temizleyin. Bu tür veriler oturumlar arasında devam eder.

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

Önbellekleri temizleme

  • HTTP önbelleği: Hassas veriler içeren kaynaklarda Cache-control: no-store ayarını yaptığınız sürece HTTP önbelleği hassas hiçbir şeyi saklamaz.
  • Geri/ileri önbelleği: Benzer şekilde, Cache-control: no-store ve kullanıcılar oturumu kapattığında hassas çerezleri (ör. kimlik doğrulamasıyla ilgili güvenli yalnızca HTTPS çerezleri) temizlemeyle ilgili önerileri uyguladıysanız hassas verilerin geri/ileri önbelleği içinde tutulmasından endişelenmenize gerek yoktur. Geri/ileri önbellek özelliği, aşağıdaki sinyallerden en az birini gözlemlerse Cache-control: no-store HTTP üst bilgisiyle yayınlanan aynı kaynak sayfaları önbellekten çıkarır:
    • Bir veya daha fazla güvenli HTTPS çerezi 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 yer alıyordu.

Sekmeler arasında tutarlı kullanıcı deneyimi

Kullanıcılarınız, oturumu kapatmaya karar vermeden önce web siteniz için birçok sekme açmış olabilir. Bu sırada kullanıcılar diğer sekmeleri veya hatta diğer tarayıcı pencerelerini unutmuş olabilir. Kullanıcılarınızın ilgili tüm sekmeleri ve pencereleri kapatmasını beklemek yerine, bu işlemi kendiniz yapmanız önerilir. Bunun yerine, kullanıcının giriş durumunun sekmeler arasında tutarlı olmasını sağlayarak proaktif bir tutum sergileyin.

Nasıl yapılır?

Sekmelerde tutarlı bir oturum açma durumu elde etmek için pageshow/pagehide etkinliklerini ve Broadcast Channel API'yi birlikte kullanabilirsiniz.

  • pageshow etkinliği: Kalıcı bir pageshow etkinliği oluştuğunda kullanıcının giriş durumunu kontrol edin ve kullanıcı artık oturum açmamışsa hassas verileri ya da sayfanın tamamını temizleyin. pageshow etkinliğinin, geri/ileri gezinme işleminden sonra sayfa ilk kez oluşturulmadan önce tetikleneceğini unutmayın. Bu sayede, giriş durumu kontrolünüz sayfayı hassas olmayan bir duruma sıfırlamanızı 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: Sekmeler ve pencereler arasında giriş durumu değişikliklerini iletmek için bu API'yi kullanın. Kullanıcının oturumu kapalıysa tüm hassas verileri temizleyin veya alternatif olarak hassas veriler içeren tüm sekme ve pencerelerde 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 dokümanda yer alan yönergeleri uygulayarak, istenmeyen çıkışları önleyen ve kullanıcının kişisel bilgilerini koruyan mükemmel bir oturum kapatma kullanıcı deneyimi tasarlayabilirsiniz.