İyi bir oturum kapatma deneyiminin özellikleri nelerdir?

Kenji Baheux
Kenji Baheux

Bir kullanıcı web sitesinden çıktığında kişiselleştirilmiş kullanıcı deneyiminden tamamen çıkma isteğini belirtir. Bu nedenle, kullanıcının zihinsel modeline mümkün olduğunca yakın kalmak önemlidir. Örneğin, uygun bir oturumu kapatma deneyimi, kullanıcının oturumu kapatmaya karar vermeden önce açmış olabileceği tüm sekmeleri de hesaba katmalıdır.

Mükemmel bir oturumu kapatma deneyiminin anahtarı, kullanıcı deneyiminin görsel ve durum yönlerinde tutarlı olmaktır. Bu rehberde, nelere dikkat etmeniz gerektiği ve iyi bir oturumu kapatma deneyimi elde etme konusunda somut tavsiyeler verilmektedir.

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

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

  • Net ve tutarlı oturumu kapatma kullanıcı deneyimi: Web sitesi genelinde kolayca tanımlanabilen ve erişilebilen, net ve tutarlı bir şekilde görünür oturumu kapatma düğmesi veya bağlantısı sağlayın. Belirsiz etiketler kullanmaktan veya oturumu kapatma işlevini anlaşılması zor menülerde, alt sayfalarda ya da diğer sezgisel olmayan konumlarda gizlemekten kaçının.
  • Onay istemi: Oturumu kapatma işlemi tamamlanmadan önce onay istemi uygulayın. Bu, kullanıcıların yanlışlıkla oturum kapatmasını önlemeye yardımcı olabilir ve kullanıcıların gerçekten oturum kapatmaları gerekip gerekmediğini yeniden düşünmelerine olanak tanır. Örneğin, cihazlarını güçlü bir şifre veya başka bir kimlik doğrulama mekanizmasıyla dikkatli bir şekilde kilitledilerse oturum kapatmaları gerekip gerekmediğini yeniden düşünebilirler.
  • Birden fazla sekmeyi yönetme: Bir kullanıcı aynı web sitesinden birden fazla sayfayı farklı sekmelerde açtıysa bir sekmeden çıkış yaptığında bu web sitesinden açılan diğer tüm sekmelerin de güncellendiğinden emin olun.
  • Güvenli bir açılış sayfasına yönlendirme: Kullanıcıyı başarılı bir şekilde oturum kapattıktan sonra, artık oturumunun açık olmadığını net bir şekilde belirten güvenli bir açılış sayfasına yönlendirin. Kullanıcıları kişiselleştirilmiş bilgiler içeren sayfalara yönlendirmeyin. Benzer şekilde, diğer sekmelerde de artık oturum açılmış durumunun yansıtılmadığından emin olun. Ayrıca, saldırganların yararlanabileceği bir açık yönlendirme oluşturmadığınızdan da emin olun.
  • Oturum temizleme: Kullanıcı oturumu kapattıktan sonra, 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 önler ve 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: Kullanıcılar oturumu kapattığında sorun yaşanırsa net hata mesajları veya geri bildirimler sağlayın. Oturum kapatma işlemi başarısız olursa kullanıcıları olası güvenlik riskleri veya veri sızıntıları hakkında bilgilendirin.
  • Erişilebilirlik ile ilgili hususlar: Oturumu kapatma mekanizmasının, ekran okuyucu veya klavye ile 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: Tutarlı ve güvenilir bir şekilde çalıştığından emin olmak için oturumu kapatma işlevini farklı tarayıcılarda ve cihazlarda test edin.
  • Sürekli izleme ve güncellemeler: Oturumu kapatma sürecini, olası güvenlik açıkları veya güvenlik boşlukları için düzenli olarak izleyin. Belirlenen sorunları gidermek için zamanında güncellemeler ve yamalar 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 engellemeyi unutmayın.

DOs

  • Oturumu kapatma akışının (veya diğer erişim iptali akışlarının) bir parçası olarak sunucudaki bir çerezi geçersiz kılarsanız kullanıcının cihazındaki çerezi de sildiğinizden emin olun.
  • Kullanıcının cihazında depolamış olabileceğiniz hassas verileri (çerezler, localStorage, sessionStorage, indexedDB, CacheStorage ve diğer yerel veri depoları) temizleyin.
  • Hassas veriler içeren tüm kaynakların (özellikle HTML belgeleri) Cache-control: no-store HTTP üstbilgisiyle döndürülmesini sağlayın. Böylece tarayıcı bu kaynakları kalıcı depolama alanında (ör. diskte) saklamaz. Benzer şekilde, hassas veriler döndüren XHR/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çılan tüm sekmelerin, sunucu tarafında erişimin iptal edilmesiyle güncel olduğundan emin olun.

Oturum kapatıldığında hassas verileri temizleme

Oturumu kapattıktan sonra geçici ve yerel olarak depolanan hassas verileri temizlemeyi düşünebilirsiniz. Hassas verilere odaklanılmasının nedeni, her şeyin temizlenmesinin kullanıcı geri dönebileceğinden kullanıcı deneyimini önemli ölçüde kötüleştirecek olmasıdır. Örneğin, yerel olarak depolanan tüm verileri temizlerseniz kullanıcılarınız çerez izni istemlerini yeniden onaylamak ve web sitenizi hiç ziyaret etmemiş gibi diğer işlemleri yapmak zorunda kalır.

Ç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 üstbilgilerini ekleyin. expires değerini uzak geçmişteki bir tarihe ayarlayın ve çerezin değerini de boş dize olarak 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çma durumunu izlemek için iki çerez gerektirmeyi düşünebilirsiniz: biri yalnızca güvenli HTTPS çerezi, diğeri ise 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 çevrimiçi olduğunda sunucudaki durumu temizlemek için isteği yeniden denemek üzere Background Fetch API'den de yararlanabilirsiniz.

Depolama alanında yer açma

Oturum kapatma durumunu onaylayan sayfanın yanıtında, çeşitli veri depolarındaki hassas verileri temizlemeye dikkat edin:

  • sessionStorage: Bu, kullanıcı web sitenizle oturumunu sonlandırdığında temizlenir. Ancak kullanıcının web sitenizde açılan tüm sekmeleri kapatmayı unutması ihtimaline karşı, 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ı oturumu kapattığında, bu API'leri kullanarak depolamış olabileceğiniz tüm hassas verileri temizleyin. Bu veriler oturumlar arasında kalıcı olur.

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

Ö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 bilgiyi saklamaz.
  • Geri/ileri önbelleği: Benzer şekilde, Cache-control: no-store ve kullanıcılar oturumu kapattığında hassas çerezlerin (ör. kimlik doğrulama ile ilgili güvenli HTTPS'ye özel çerezler) temizlenmesiyle ilgili önerilere uyduysanız hassas verilerin geri/ileri önbelleğinde tutulması konusunda endişelenmenize gerek yoktur. Geri/ileri önbellek özelliği, aşağıdaki sinyallerden birini veya daha fazlasını algılarsa Cache-control: no-store HTTP üst bilgisiyle sunulan aynı kaynaklı sayfaları önbellekten çıkarır:
    • Yalnızca güvenli HTTPS çerezlerinden biri veya daha fazlası değiştirildi ya da silindi.
    • Sayfa tarafından verilen XHR/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üre zarfında diğer sekmeleri, hatta diğer tarayıcı pencerelerini unutmuş olabilirler. Kullanıcılarınızın ilgili tüm sekmeleri ve pencereleri kapatmasını beklememeniz önerilir. Bunun yerine, kullanıcının giriş durumunun sekmeler arasında tutarlı olmasını sağlayarak proaktif bir yaklaşım benimseyin.

Nasıl yapılır?

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

  • pageshow etkinliği: Kalıcı bir pageshow olduğunda kullanıcının giriş durumunu kontrol edin ve kullanıcı artık oturum açmamışsa hassas verileri, hatta tüm sayfayı temizleyin. pageshow etkinliği, geri/ileri gezinmeden geri yüklendikten sonra sayfa ilk kez oluşturulmadan önce tetiklenir. Böylece, oturum açma durumu kontrolünüz, sayfayı hassas olmayan bir duruma sıfırlamanıza olanak tanır.

    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();
  }
});

  • Yayın Kanalı API'si: Sekmeler ve pencereler arasında oturum açma durumu değişikliklerini iletmek için bu API'yi kullanın. Kullanıcının oturumu kapatılmışsa tüm hassas verileri temizleyin veya alternatif olarak hassas verilerin bulunduğu tüm sekmelerde 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 belgedeki yönergeleri uygulayarak, istenmeyen oturum kapatmaları önleyen ve kullanıcının kişisel bilgilerini koruyan harika bir oturum kapatma kullanıcı deneyimi tasarlayabilirsiniz.