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


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.