Google Chrome автоматически заполняет все вводимые пароли

В HTML5 с атрибутом автозаполнения есть новое свойство под названием «новый пароль», которое мы можем использовать для решения этой проблемы. Следующие работы для меня.

<input id="userPassword" type="password" autocomplete="new-password">

текущий-пароль: разрешить браузеру или диспетчеру паролей ввести текущий пароль для сайта. Это дает больше информации, чем "on", поскольку позволяет браузеру или диспетчеру паролей знать, что нужно использовать известный в настоящее время пароль для сайта в поле, а не новый.

новый-пароль: разрешить браузеру или диспетчеру паролей автоматически вводить новый пароль для сайта. Это может быть автоматически сгенерировано на основе других атрибутов элемента управления или может просто указать браузеру представить какой-либо виджет «предлагаемый новый пароль».

Обратитесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

Это можно решить без хаков, но это не обязательно интуитивно. Chrome принимает два странных решения. Во-первых, Chrome игнорирует autocomplete="off" при синтаксическом анализе, а во-вторых, Chrome предполагает, что поле, которое стоит перед полем пароля, должно быть полем имени пользователя / электронной почты и должно автоматически заполняться как таковое.

Однако есть способы обойти это, используя спецификацию атрибута автозаполнения HTML5.

Как вы увидите по ссылке ниже, для атрибута autocomplete существуют стандартные значения. Чтобы Chrome не предполагал, что поле перед паролем является полем электронной почты, используйте либо одно из официальных значений (например, tel для номера телефона), либо составьте значение, которого нет в списке, но также не off или false.

Google предлагает использовать одно из стандартных значений с добавлением new- перед значением, например, autocomplete="new-tel". Если вы хотите, чтобы поле пароля не заполнялось автоматически, вы можете, например, использовать autocomplete="new-password".

Хотя технически вы, конечно, можете сделать атрибут чем-то случайным без контекста с тем же эффектом (например, autocomplete="blahblahblah"), я рекомендую префикс new-, поскольку он помогает любому будущему разработчику, работающему над вашим кодом, получить некоторый контекст того, что вы делаете с этим атрибутом.

Ссылка: https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Иногда даже autocomplete = off не помешает заполнить учетные данные в неправильных полях, но не в поле пользователя или псевдонима.

Исправление: автозаполнение в браузере в режиме только для чтения и установка в фокусе возможности записи.

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

(фокус = при щелчке мышью и переходе через поля)

Обновление: Mobile Safari устанавливает курсор в поле, но не показывает виртуальную клавиатуру. Новое исправление работает так же, как и раньше, но обрабатывает виртуальную клавиатуру:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Интерактивная демонстрация https://jsfiddle.net/danielsuess/n0scguv6/ // UpdateEnd

Объяснение: Браузер автоматически вводит учетные данные в неправильное текстовое поле?

@Samir: Chrome автоматически заполняет любой ввод типом пароля, а затем любым вводом перед ним

Иногда я замечаю это странное поведение в Chrome и Safari, когда есть поля пароля в той же форме. Думаю, браузер ищет поле пароля, чтобы вставить сохраненные учетные данные. Затем он автоматически заполняет имя пользователя в ближайшем текстовом поле ввода, которое появляется перед полем пароля в DOM (просто предположение из-за наблюдения). Поскольку браузер является последним экземпляром, и вы не можете его контролировать,

Это исправление только для чтения, приведенное выше, сработало для меня.

• поддельные вводы не работают
• autocomplete = "off" / "new-password" / "false" и т. д. не работают, хром их всех

Решение, которое сработало для нас:

<script>
        $(document).ready(function(){

            //put readonly attribute on all fields and mark those, that already readonly
            $.each($('input'), function(i, el){
                if ($(el).attr('readonly')) {
                    $(el).attr('shouldbereadonly', 'true');
                } else {
                    $(el).attr('readonly', 'readonly');
                }
            });

            //Remove unnecessary readonly attributes in timeout
            setTimeout(function(){

                $.each($('input'), function(i, el){
                    if (!$(el).attr('shouldbereadonly')) {
                        $(el).attr('readonly', null);
                    }
                });

            }, 500);
        });
    </script>

Я бы сделал скрытое поле пароля вместо отключения автозаполнения для хрома. Отключение автозаполнения для вас не отключает его для всех.

Итак, я получил это.

<input type="hidden" name="Password" id="Password" value="Password" /><br />

(Если вы просто хотите отключить его для себя, отключите его в настройках Chrome.)

Как отключить в настройках хрома:

Click the Chrome menu Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings and find the "Passwords and forms" section.
Deselect the "Enable Autofill to fill out web forms in a single click" checkbox.

Кредиты идут Хейнкаснеру за это.

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

У Chrome есть обновления, фальшивые вводы больше не работают.

Кажется, что Chrome запоминает все после успешного подключения к сети 200, независимо от того, какой ввод [type = password] активирован на экране, будет запомнен.

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

Наконец разобрался:

слушать события фокусировки и размытия входов,

каждый раз размытие:

var psw1 = $('input[name=psw1]').val();
$('input[name=psw1]').val((new Array(psw1.length)).join('*'));
$('input[name=psw1]').attr('type', 'text');

каждый раз фокус:

$('input[name=psw1]').attr('type', 'password');
$('input[name=psw1]').val(psw1)

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

Непрозрачность

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

    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;

Я заметил, что браузер Chrome / FF ВСЕГДА автоматически заполняет текст, вводимый непосредственно перед полем пароля. Итак, самым простым решением было добавить фиктивный ввод:

Я справляюсь с этой проблемой с помощью простых js

<input type="password" name="password" class="autocomplete-off" readonly="readonly">

// autocomplete
$('input.autocomplete-off').click(function () {
    $(this).removeAttr('readonly');
});