Тип ввода = пароль, не позволяйте браузеру запоминать пароль


101

Я помню, как видел способ сделать <input type="password" />так, чтобы браузер не предлагал пользователю сохранить пароль. Но я рисую пустой. Есть ли атрибут HTML или какой-нибудь трюк JavaScript, который сделает это?


Ответы:


123

Попробуйте использовать autocomplete="off". Однако не уверен, что каждый браузер поддерживает это. Документы MSDN здесь .

РЕДАКТИРОВАТЬ : Примечание: большинство браузеров отказались от поддержки этого атрибута. См. Совместимо ли autocomplete = "off" со всеми современными браузерами?

Возможно, это следует оставить на усмотрение пользователя, а не дизайнера веб-сайта.


2
Вы также можете доставить страницу с помощью HTTPS и с помощью заголовка HTTP или тега META предотвратить кеширование. Таким образом, пароль также не будет сохранен (по крайней мере, в Internet Explorer).
— doekman

Что касается проверки, HTML5 добавляет в спецификацию атрибут автозаполнения, так что теперь все в порядке
— VictorySaber

9
Примечание для будущих читателей: все основные браузеры игнорируют этот атрибут. (см. stackoverflow.com/a/21348793/37706 )
— rdans 06

@RyanDansie, спасибо, что указали на это. Я обновил ответ. Старый ответ ... старый.
— tvanfosson 06

8
«Возможно, это следует оставить на усмотрение пользователя, а не дизайнера веб-сайта». для этого есть как технические, так и нетехнические причины. Например, нельзя запоминать одноразовые пароли. Банковские сайты с «введите первую цифру вашего PIN-кода» - другое. Не забывайте, что бизнес-аналитик может решить, что ему нужно поле с паролем, и отменить выбор у разработчика.
— Sprague

61

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

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

Пароли уже не хранятся в MRU, и правильно настроенные общедоступные машины даже не сохранят имя пользователя.


23
+1 за «не раздражайте своих пользователей». Именно этим и занимается эта функция. Так же, как сайты, которые принудительно отключают кеширование, кнопка «Назад» очищает форму. ЧРЕЗВЫЧАЙНО раздражает.
— cletus

6
+1 Полностью согласен. Это страница редактирования профиля клиента для администратора, где вы вводите пароль, только если собираетесь его изменить. Таким образом, администраторы не меняют пароль каждый раз, когда переходят к редактированию информации о клиенте.
— DavGarcia

14
Это очень полезно для полей с номерами кредитных карт. Форма PayPal хранится в каждом браузере, и любой, кто пользуется вашим компьютером, может повторно ввести все данные, поэтому вам придется вручную удалить все запомненные поля.
— Егор Павлихин

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

3
Я использую это для одноразового пароля. Как сказал jrb, было бы очень неприятно, если бы браузер сохранил его.
— Danation

12

Решил по другому. Вы можете попробовать это.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

#по-другому

 <script type="text/javascript">    
 function setAutoCompleteOFF(tm){
    if(typeof tm =="undefined"){tm=10;}
    try{
    var inputs=$(".auto-complete-off,input[autocomplete=off]"); 
    setTimeout(function(){
        inputs.each(function(){     
            var old_value=$(this).attr("value");            
            var thisobj=$(this);            
            setTimeout(function(){  
                thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
                thisobj.val(old_value);
            },tm);
         });
     },tm); 
    }catch(e){}
  }
 $(function(){                                              
        setAutoCompleteOFF();
    });
</script>

// вам нужно добавить атрибут autocomplete = "off" или вы можете добавить класс .auto-complete-off в поле ввода и наслаждаться

Пример:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />

4
Это не позволяет браузеру сохранять пароль вместо предотвращения автозаполнения, что в моем сценарии является лучшим решением.
— Pau Fracés

Спасибо, у меня работал над последней версией Chrome. Обратите внимание: используется во внутренней системе, где разрешен только Chrome, проведите дополнительное тестирование при использовании на рабочем сайте.
— Изион

@AntoVinish, я надеюсь, что мое последнее решение сработает в firefox 40.
— Сарвар Хасан,

7

Я пробовал следующее, и кажется, что это работает в любом браузере:

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function(){  
        var passElem = $("input#passfld");
        passElem.focus(function() { 
            passElem.prop("type", "password");                                             
        });
    });
</script>

Этот способ намного безопаснее, чем использование методов тайм-аута, поскольку он гарантирует, что поле ввода уступит место паролю, когда пользователь сфокусирует его.


5

Что касается вопросов безопасности, вот что консультант по безопасности расскажет вам по всей проблеме (это результат фактического независимого аудита безопасности):

Автозаполнение HTML включено - для полей пароля в формах HTML включено автозаполнение. Большинство браузеров имеют возможность запоминать учетные данные пользователя, введенные в HTML-формы.

Относительный риск: низкий

Затронутые системы / устройства: o https: // * ** * *** /

Я также согласен, что это должно охватывать все поля, содержащие действительно личные данные. Я считаю, что это нормально заставлять человека всегда вводить информацию о своей кредитной карте, код CVC, пароли, имена пользователей и т. Д. Всякий раз, когда этот сайт собирается получить доступ ко всему, что должно быть защищено [универсально или в соответствии с требованиями законодательства]. Например: формы покупки, банковские / кредитные сайты, налоговые сайты, медицинские данные, федеральные, ядерные и т. Д. - не сайты, такие как Stack Overflow или Facebook.

Другие типы сайтов - например, TimeStar Online для учета рабочего времени и отсутствия работы - это глупо, поскольку я всегда использую один и тот же компьютер / учетную запись на работе, и я не могу сохранить учетные данные на этом сайте - как ни странно, я могу на своем Android но не на iPad. Даже на общих компьютерах это было бы не так уж плохо, поскольку синхронизация входа / выхода для кого-то на самом деле ничего не делает, кроме как раздражает вашего руководителя. (Они должны войти и удалить ошибочные удары - просто выберите не сохранять на общедоступных ПК).


5
Просто добавьте здесь комментарий по той причине, по которой вы не хотите сохранять пароль. У меня есть веб-сайт с учетными записями пользователей, на котором администраторы могут изменить пароль пользователя. Клиент в настоящее время возмущен тем, что Chrome предлагает сохранять пароль, введенный в форме «смены пароля» каждый раз для каждого пользователя , поскольку он ошибочно идентифицирует форму редактирования пользователя как форму входа в систему. По-видимому, давать простые инструкции вроде «просто нажмите« Не помнить пароль »» им не по силам.
— charredUtensil

5
<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Ну вот.


2
Это так, есть много обходных путей, и это так просто, протестировано с последней версией Firefox (v67) и Chrome (75).
— Мариано Руис

Chrome 80 по-прежнему будет предлагать запомнить пароль после отправки формы.
— Bouke

4

Вот лучший и самый простой ответ! Поместите дополнительное поле пароля перед своим inputполем и установите его display:noneтак, чтобы, когда браузер заполнял его, он делал это в inputтом месте, которое вам не нужно.

Измените это:

<input type="password" name="password" size="25" class="input" id="password" value="">

к этому:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

Фактически, это работает, если в форме есть 2 поля пароля, но новый браузер игнорирует второй пароль, если он не отображается и не включен; (
— Седрик Саймон

1
Использование display:noneне работает для меня (Chrome 61 OSX), но это работает:<input type="password" style="position: absolute; top: -1000px;">
— Джон Хасколл,

2

Прочтите также этот ответ, где он использует это простое решение, которое работает повсюду (см. Также исправление для мобильного телефона Safari):

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

1

Вы можете использовать JQuery, выберите элемент по id:

$("input#Password").attr("autocomplete","off");

Или выберите товар по типу:

$("input[type='password']").attr("autocomplete","off");

Или также:

Вы можете использовать чистый Javascript:

document.getElementById('Password').autocomplete = 'off';


1

видя, что autocomplete = off устарел, я предлагаю более новое решение.

Задайте для поля пароля обычное текстовое поле и замаскируйте ввод с помощью «дисков» с помощью CSS. код должен выглядеть так:

<input type="text" class="myPassword" /> 

input .myPassword{
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Обратите внимание, что это может не работать должным образом в браузерах Firefox, и требуется дополнительное обходное решение. Подробнее об этом читайте здесь: https://stackoverflow.com/a/49304708/5477548 .

Решение было взято из этой ссылки , но, чтобы соответствовать SO "no-hotlinks", я резюмировал его здесь.


0

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

Перед:

<form action="..."><input type="password"/></form>

После:

<input type="password"/>

1
Кстати, это уловка, которую вам, вероятно, не стоит использовать. Если не использовать тег формы, ваш код по умолчанию становится HTML4, что затрудняет проверку учетных записей пользователей.
— Cannicide 02

0

Я нашел следующие работы в Firefox и Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

Все это находится в разделе форм. "person" и "mypswd" - это то, что вы хотите, но браузер сохранит "userid" и "passwd" один раз и никогда больше, поскольку они не меняются. Вы можете исключить поле «человек», если оно вам действительно не нужно. В этом случае все, что вам нужно, это поле «mypswd», которое может изменяться каким-либо образом, известным пользователю вашей веб-страницы.


0

Единственный способ отключить автозаполнение в Firefox, Edge и Internet Explorer - это добавить autocomplete = "false" в формуляр, например:

  <form action="postingpage.php" autocomplete="false" method="post">

и мне нужно добавить autocomplete = "off" в поле ввода формы и изменить тип на текст Как:

     <input type="text" autocomplete="off">

Похоже, что этот html-код необходимо стандартизировать с браузерами. форму type = password следует изменить так, чтобы она перекрывала настройки браузера. Единственная проблема, с которой я столкнулся, это то, что я потерял маскировку ввода. Но с другой стороны, раздражающее «этот сайт небезопасен» не отображается в firefox.

для меня это не имеет большого значения, поскольку пользователь уже аутентифицирован, и его часть меняет имя пользователя и пароль


2
НЕ ДЕЛАЙ ЭТОГО. Данные по-прежнему будут отправляться в виде открытого текста по сети, что в первую очередь является проблемой HTTP (не HTTPS), отсюда и ваше «раздражающее» предупреждающее сообщение. Не имеет значения, что пользователь уже аутентифицирован, потому что человек посередине все еще может видеть данные открытого текста, а ведение журнала на стороне сервера может быть настроено по-другому (может хранить заголовки запроса, тогда как есть другие проблемы вообще, если бы он сохранил POST данные по HTTPS).
— Джейкоб

https шифрует трафик. Если вы используете это как часть общедоступного Интернет-приложения, вы все равно делаете это. Метод Post предотвращает создание закладок, а множественные фреймы кода php внутри HTML предотвращают внедрение URL. Технически вы должны ввести свой полный путь. Если вы развертываете, я бы рекомендовал загрузить переменную $ _SESSION с базовым URL-адресом, который записан в тексте, вместо того, чтобы смотреть на переменные $ _SERVER. $ _SERVER ['HTTP_HOST'] и $ _SERVER ['PHP_SELF'] должны использоваться только в непубличных средах, потому что оба имеют несколько эксплойтов.
— drtechno 05

Кстати, мой пример для закрытых систем, которые никак не подключены к Интернету
— drtechno

никто не коснулся использования схемы шифрования, выполняемой с помощью "java onclick", а затем отправить форму после процедуры шифрования.
— drtechno 05
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.