Отключаем предложение браузера сохранить пароль: HTML, JS

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

Для того чтобы помешать браузеру сохранять введённые пароли, можно использовать атрибут autocomplete="new-password" в элементе <input>. Для надёжности хорошей практикой является присваивать уникальное значение атрибуту name каждый раз при обновлении страницы.

<input type="password" autocomplete="new-password" name="pass_{{unique_id}}">

Помните: для предотвращения сохранения пароля указывайте autocomplete="new-password" и уникальный name для исключения автоматического заполнения.

Учёт особенностей браузеров

Несмотря на вышеупомянутые меры, необходимо учесть, что поведение браузеров различно при взаимодействии с атрибутом autocomplete. Даже autocomplete="new-password" не всегда гарантирует результат – Chrome, например, игнорирует autocomplete="off", предпочитая использовать свой собственный менеджер паролей.

Если autocomplete="new-password" не решает проблему, можно применить JavaScript. Изменение типа поля ввода в момент фокусировки может сбить со стопы алгоритм запоминания:

document.getElementById('passwordField').addEventListener('focus', function() {
    this.setAttribute('type', 'text');
    // Поле ввода пароля? Не, вы ошиблись, я просто текстовое поле...
});

document.getElementById('passwordField').addEventListener('blur', function() {
    this.setAttribute('type', 'password');
    // Оп, спасибо, вернусь к своим прямым обязанностям.
});

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

Этика и учёт пользовательского опыта

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

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

Особые требования для общедоступных компьютеров

Для надёжного исключения сохранения паролей, особенно на компьютерах общего пользования, полезно использовать метод JavaScript с задержкой исполнения:

window.onload = function() {
    setTimeout(function() {
        document.getElementById('passwordField').setAttribute('autocomplete', 'new-password');
        // Удар по автозаполнению!
    }, 1000);
};

Этот метод с задержкой выполнения поможет противостоять автозаполнению браузером, в особенности, если система очищает данные сессии после её закрытия.

Научим пользователей настроекам браузера

Информирование пользователей укрепит их безопасность и удобство в использовании. Мы можем встроить информационные сообщения и подсказки в приложение, рассказывая об особенностях настроек приватности разных браузеров. Объясните пользователям, почему важно не сохранять пароли на публичном компьютере, научите их удалять списки Most Recently Used (MRU).

Дополнительные меры безопасности

Для усиления защиты можно динамически создать поле ввода пароля с помощью JavaScript после загрузки страницы, или применить скрытые фреймы с фиктивными формами для отвлечения внимания алгоритма автозаполнения. Такие методы требуют больше усилий, но они оправдывают себя. Важно всегда учитывать соотношение сложности и реальной пользы.

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

Взаимодействие типа ввода пароля можно представить как диалог между Ключом и Замком:

- Браузер: "Хочешь сохранить этот ключик 🔑 на будущее?"
- Поле ввода пароля: "🔒 Нет, спасибо, забудь этот ключ, как только дверь закроется!

Для исключения возможности запоминания пароля:

<input type="password" autocomplete="off" />

Примечание:

• 🔑 = Пользовательский пароль
• 🔒 = Поле ввода пароля с отключенным автозаполнением
• 🚪 = Дверь, символизирующая сессию

Резюме:

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

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

1. HTML атрибут: autocomplete – HTML: HyperText Markup Language | MDN — Детальное руководство MDN о применении атрибутов autocomplete в формах.
2. HTML Стандарт — Всё о <input> согласно официальной спецификации HTML.
3. HTML Стандарт — Описание работы и влияния атрибутов autocomplete на автозаполнение.
4. Обсуждение на Stack Overflow — Обсуждение отключения автозаполнения в разных браузерах.
5. Блог Chromium — Советы по улучшению управления паролями от команды разработчиков Chromium.
6. Переключение видимости пароля — Урок от W3Schools о создании поля ввода пароля с возможностью переключения видимости.
7. Лучшие практики для форм входа — Лучшие практики и рекомендации по противодействию сохранению конфиденциальной информации браузерами.