Запрет сохранения паролей в браузерах: советы по безопасности

Быстрый ответ

Для исключения сохранения паролей в браузере установите для формы атрибут autocomplete="off" и добавьте для поля ввода пароля атрибут autocomplete="new-password":

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

Данный подход поможет предотвратить автоматическое заполнение полей.

Использование атрибута readonly и события onfocus

Для повышения безопасности использование атрибутов readonly и onfocus лишает браузер возможности вмешаваться в процесс ввода:

<!-- Атрибут readonly исключает воздействие браузера на процесс ввода -->
<input type="password" 
       readonly
       onfocus="this.removeAttribute('readonly');">

Атрибут readonly удаляется, когда пользователь фокусируется на поле, что блокирует возможность сохранения браузером пароля.

Как бороться с упрямыми браузерами

Если браузер игнорирует autocomplete="off", разместите инвизуальное поле ввода перед основным:

<!-- Невидимое поле отводит внимание браузера от основного поля -->
<input type="password" tabindex="-1" style="display: none; visibility: hidden;">
<input type="password">

Невидимое поле может ввести в заблуждение механизм автозаполнения и защитить реальное поле ввода от сохранения.

Визуализация

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

Рассмотрите браузер как любопытного фотографа (📸), которой стремится запечатлеть ваши секреты (🔑).

🔑 ➡️ 📸🚫: Блокируем "съёмку"

Чтобы предотвратить попадание ваших секретов (🔑) в «альбом» браузера (🖥️), вы:

• Вешаете табличку «Фотосъёмка запрещена» с помощью autocomplete="off".
• Обеспечиваете дополнительные меры безопасности на серверной стороне, что подобно найму охраны (🛡️).

Продвинутые методы безопасности

Создание фиктивных полей для паролей

Чтобы обмануть браузера, используйте CSS text-security для текстового поля, имитируя поле пароля:

<!-- Это не тот пароль, который вы думаете -->
<style>
input[type="text"].password {
  text-security: disc;
  -webkit-text-security: disc;
}
</style>
<input type="text" class="password">

В Firefox для создания внешнего вида поля пароля используйте font-family:

@font-face {
  font-family: 'passwordDot';
  src: local('passwordDot');
}
input[type="text"].password {
  font-family: 'passwordDot';
}

Подробнее об этом расскажет наш спикер на видео

Разнообразие использования autocomplete

Используйте autocomplete="new-password" и autocomplete="one-time-code" в соответствии с их назначением. autocomplete="new-password" подходит для создания новых аккаунтов или при сбросе паролей, а autocomplete="one-time-code" — при обработке одноразовых кодов, полученных обычно посредством SMS.

Особенности браузеров и меры безопасности

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

Полезные материалы

1. HTML input autocomplete Attribute — изучите, как включать и отключать атрибут autocomplete.
2. How to turn off form autocompletion – Security on the web | MDN — официальное руководство Mozilla по усилению безопасности вашего сайта.
3. HTML Standard — источник глубоких знаний о автозаполнении и поведении браузеров.
4. Password Storage – OWASP Cheat Sheet Series — лучшие практики хранения паролей для повышения безопасности.
5. HTML Standard – Autofill field names — стандартное описание полей автозаполнения в HTML-формах.