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

Кенджи Баэ
Kenji Baheux

Выход из системы

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

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

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

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

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

что делать

  • Если вы аннулируете файл cookie на сервере в рамках процесса выхода (или других потоков отзыва доступа), обязательно удалите файл cookie также на устройстве пользователя.
  • Очистите все конфиденциальные данные, которые вы могли хранить на устройстве пользователя: файлы cookie, localStorage , sessionStorage , indexedDB , CacheStorage и любые другие локальные хранилища данных.
  • Убедитесь, что все ресурсы, содержащие конфиденциальные данные, в частности документы HTML, возвращаются с HTTP-заголовком Cache-control: no-store чтобы браузер не сохранял эти ресурсы в постоянном хранилище (например, на диске). Аналогично, вызовы XHRs/ 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 для отслеживания состояния входа: один безопасный файл cookie только для HTTPS и один обычный файл cookie, доступный через JavaScript. Если ваш пользователь пытается выйти из системы, находясь в автономном режиме, вы можете очистить файл cookie JavaScript и, если возможно, продолжить другие операции очистки. Если у вас есть сервисный работник, вы также можете воспользоваться API фоновой выборки, чтобы повторить запрос на очистку состояния на сервере, когда пользователь позже окажется в сети.

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

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

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

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

  • 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 широковещательного канала.

  • pageshow event : при сохранении 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.
    // ...
  }
}

Заключение

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