Что делает выход из системы приятным?

Кенджи Бае
Kenji Baheux

Когда пользователь выходит с веб-сайта, он сообщает о своей потребности полностью отказаться от персонализированного пользовательского опыта. Поэтому важно максимально точно следовать ментальной модели пользователя. Например, корректный процесс выхода должен учитывать все вкладки, которые пользователь мог открыть перед тем, как выйти.

Ключ к хорошему опыту выхода из системы заключается в единообразии визуальных и пользовательских аспектов. Это руководство содержит конкретные рекомендации о том, на что обратить внимание и как добиться хорошего опыта выхода из системы.

Ключевые соображения

При реализации функции выхода из системы на вашем веб-сайте обратите внимание на следующие аспекты, чтобы обеспечить плавный, безопасный и интуитивно понятный процесс выхода из системы:

  • Чёткий и единообразный интерфейс выхода : предоставьте понятную и одинаково заметную кнопку или ссылку выхода, которая легко распознаётся и доступна на любом участке веб-сайта. Избегайте использования двусмысленных обозначений или сокрытия функции выхода в непонятных меню, на подстраницах или в других неинтуитивно понятных местах.
  • Запрос подтверждения: Реализуйте запрос подтверждения перед завершением процесса выхода . Это поможет предотвратить случайный выход пользователей и позволит им ещё раз подумать, действительно ли им нужно выйти, например, если они намеренно заблокировали своё устройство надёжным паролем или другим механизмом аутентификации.
  • Обработка нескольких вкладок : если пользователь открыл несколько страниц одного и того же веб-сайта в разных вкладках, убедитесь, что выход из одной вкладки также обновляет все остальные открытые вкладки этого веб-сайта.
  • Перенаправление на безопасную целевую страницу : после успешного выхода из системы перенаправьте пользователя на безопасную целевую страницу, которая явно указывает на то, что он больше не вошел в систему. Избегайте перенаправления пользователей на страницы с какой-либо персонализированной информацией. Аналогичным образом, убедитесь, что другие вкладки также не отображают состояние входа в систему. Также убедитесь, что вы не создаете открытое перенаправление , которым могут воспользоваться злоумышленники.
  • Очистка сеанса : После выхода пользователя из системы полностью удалите все конфиденциальные данные сеанса, файлы cookie и временные файлы, связанные с сеансом. Это предотвратит несанкционированный доступ к информации пользователя или действиям в его учётной записи, а также предотвратит восстановление браузером страниц с конфиденциальной информацией из различных кэшей, в частности из кэша возврата/передачи .
  • Обработка ошибок и обратная связь : предоставляйте пользователям чёткие сообщения об ошибках или обратную связь в случае возникновения проблем при выходе из системы. Сообщите им о любых потенциальных угрозах безопасности или утечках данных в случае сбоя процесса выхода из системы.
  • Вопросы доступности : убедитесь, что механизм выхода из системы доступен для пользователей с ограниченными возможностями, в том числе для тех, кто использует вспомогательные технологии, такие как программы чтения с экрана или навигация с помощью клавиатуры.
  • Совместимость с разными браузерами : протестируйте функцию выхода из системы в разных браузерах и на разных устройствах, чтобы убедиться в ее стабильной и надежной работе.
  • Постоянный мониторинг и обновления : Регулярно проверяйте процесс выхода из системы на наличие потенциальных уязвимостей или уязвимостей безопасности. Своевременно устанавливайте обновления и исправления для устранения выявленных проблем.
  • Федеративная идентификация : если пользователь вошел в систему, используя федеративную идентификацию , проверьте, поддерживается ли и требуется ли выход из системы поставщика идентификационных данных. Кроме того, если поставщик идентификационных данных поддерживает автоматический вход, не забудьте его запретить .

ДО

  • Если вы делаете cookie-файл недействительным на сервере в ходе процесса выхода из системы (или других процессов отзыва доступа), обязательно удалите cookie-файл и на устройстве пользователя.
  • Очистите все конфиденциальные данные, которые могли храниться на устройстве пользователя: файлы cookie, localStorage , sessionStorage , indexedDB , CacheStorage и любые другие локальные хранилища данных.
  • Убедитесь, что все ресурсы, содержащие конфиденциальные данные, в частности HTML-документы, возвращаются с HTTP-заголовком Cache-control: no-store чтобы браузер не сохранял эти ресурсы в постоянном хранилище (например, на диске). Аналогично, вызовы XHR/ fetch , возвращающие конфиденциальные данные, также должны устанавливать HTTP-заголовок Cache-Control: no-store чтобы предотвратить кэширование.
  • Убедитесь, что все открытые вкладки на устройстве пользователя обновлены с учетом отзыва доступа на стороне сервера.

Очистка конфиденциальных данных при выходе из системы

После выхода из аккаунта рассмотрите возможность удаления временных и локально хранящихся конфиденциальных данных. Акцент на конфиденциальных данных обусловлен тем, что удаление всех данных значительно ухудшит пользовательский опыт, поскольку этот пользователь может вернуться. Например, если вы удалите все локально хранящиеся данные, вашим пользователям придётся повторно подтверждать согласие на использование файлов cookie и выполнять другие действия, как будто они вообще не посещали ваш сайт.

Как очистить файлы cookie

В ответе страницы, подтверждающей выход из системы, добавьте HTTP-заголовки Set-Cookie чтобы удалить все файлы cookie, связанные с конфиденциальными данными или содержащие их. Установите значение expires на отдалённую дату в прошлом, а значение файла cookie — на всякий случай пустую строку.

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

Оффлайн сценарий

Хотя описанный выше подход достаточен для общих случаев использования, он не работает, если пользователь работает офлайн. Вы можете рассмотреть возможность использования двух файлов cookie для отслеживания состояния входа: одного защищённого HTTPS-файла cookie и одного обычного файла cookie, доступного через JavaScript. Если пользователь пытается выйти из системы, находясь офлайн, вы можете очистить файл cookie JavaScript и, если возможно, выполнить другие операции очистки. Если у вас есть сервис-воркер, вы также можете воспользоваться API Background Fetch для повторной отправки запроса на очистку состояния на сервере, когда пользователь позже появится в сети.

Как очистить хранилище

В ответе на страницу, подтверждающую выход из системы, позаботьтесь об очистке конфиденциальных данных из различных хранилищ данных:

  • sessionStorage : Хотя это хранилище очищается, когда пользователь завершает сеанс на вашем сайте, рассмотрите возможность заблаговременной очистки конфиденциальных данных, когда пользователь выходит из системы, на случай, если он забудет закрыть все вкладки, открытые на вашем сайте.

    // 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 : когда пользователь выходит из системы, очистите все конфиденциальные данные, которые вы могли сохранить с помощью этих API, учитывая, что такие данные будут сохраняться между сеансами.

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

Как очистить кэши

  • HTTP-кэш : пока вы установите Cache-control: no-store для ресурсов с конфиденциальными данными, HTTP-кэш не будет сохранять ничего конфиденциального.
  • Возвратный кэш : Аналогично, если вы следовали рекомендациям по Cache-control: no-store и удалению конфиденциальных файлов cookie (например, защищенных файлов cookie HTTPS, связанных с аутентификацией) при выходе пользователей из системы, вам не нужно беспокоиться о сохранении конфиденциальных данных в возвратном кэше. Функция возвратного кэша будет удалять страницы с тем же источником, обслуживаемые HTTP-заголовком Cache-control: no-store при обнаружении одного или нескольких из следующих сигналов:
    • Один или несколько защищенных файлов cookie, поддерживающих только HTTPS, были изменены или удалены.
    • Один или несколько ответов на вызовы XHR/ fetch , выдаваемые страницей, включали HTTP-заголовок Cache-control: no-store .

Единообразный пользовательский интерфейс на всех вкладках

Возможно, ваши пользователи открыли множество вкладок вашего сайта, прежде чем решили выйти из системы. К тому времени они могли забыть о других вкладках или даже окнах браузера. Лучше не полагаться на то, что пользователи закроют все необходимые вкладки и окна. Вместо этого займите проактивную позицию, обеспечив единообразие состояния входа пользователя на всех вкладках.

Как

Чтобы добиться единообразного состояния входа на всех вкладках, рассмотрите возможность использования комбинации событий pageshow / pagehide и API Broadcast Channel.

  • Событие pageshow : при сохранении pageshow проверьте статус входа пользователя и очистите конфиденциальные данные (или даже всю страницу), если пользователь больше не вошел в систему. Событие pageshow сработает перед первым отображением страницы после восстановления из навигации назад/вперед, чтобы проверка статуса входа позволила вам сбросить страницу в неконфиденциальное состояние.

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

  • API канала вещания : используйте этот API для передачи изменений состояния входа между вкладками и окнами. Если пользователь вышел из системы, удалите все конфиденциальные данные или перенаправьте его на страницу выхода из системы на всех вкладках и в окнах с конфиденциальными данными.

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

Заключение

Следуя рекомендациям, изложенным в этом документе, вы сможете разработать удобный пользовательский интерфейс для выхода из системы, который предотвратит непреднамеренные выходы из системы и защитит персональные данные пользователя.