html — Chrome игнорирует autocomplete = «off»

Chrome игнорирует автозаполнение = «выкл»

Ну, немного поздно для вечеринки, но кажется, что есть некоторое недопонимание о том, как autocomplete должно и не должно работать. Согласно спецификациям HTML, пользовательский агент (в данном случае Chrome) может переопределить autocomplete :

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Пользовательский агент может позволить пользователю переопределить имя поля автозаполнения элемента, например, изменить его с «выкл» на «вкл», чтобы значения могли быть запомнены и предварительно заполнены, несмотря на возражения автора страницы, или всегда «выключен», никогда не запоминая ценности. Однако пользовательские агенты не должны позволять пользователям тривиально переопределять имя поля автозаполнения с «выключено» на «включено» или другими значениями, поскольку для пользователя существует значительный риск для безопасности, если все значения всегда запоминаются независимо от предпочтений сайта.

Так что в случае с Chrome разработчики, по сути, сказали: «Мы оставим это на усмотрение пользователя, чтобы решить в своих предпочтениях, хотят ли они, чтобы autocomplete работало или нет. Если вы не хотите, не включайте его в своем браузере ».

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

Ключевое слово «off» указывает либо на то, что входные данные элемента управления особенно чувствительны (например, код активации для ядерного оружия); или что это значение никогда не будет использоваться повторно (например, одноразовый ключ для банковского логина), и поэтому пользователю придется каждый раз явно вводить данные, вместо того чтобы полагаться на UA для предварительного заполнения ценность для него; или что документ предоставляет собственный механизм автозаполнения и не хочет, чтобы пользовательский агент предоставлял значения автозаполнения.

Поэтому, испытав такое же разочарование, как и все остальные, я нашел решение, которое работает для меня. Это в духе похоже на autocomplete="false" ответы.

Статья в Mozilla говорит именно об этой проблеме:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

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

Таким образом, следующий код должен работать:

 autocomplete="nope" 

И так должно быть каждое из следующего:

 autocomplete="false" autocomplete="foo" autocomplete="bar" 

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

Стоит отметить, что многие браузеры игнорируют настройки autocomplete для полей входа в систему (имя пользователя и пароль). Как говорится в статье Mozilla:

По этой причине многие современные браузеры не поддерживают autocomplete = «off» для полей входа в систему.

  • Если сайт устанавливает для формы autocomplete = «off», а форма содержит поля ввода имени пользователя и пароля, браузер по-прежнему будет предлагать запомнить этот логин, а если пользователь согласится, браузер автоматически заполнит эти поля в следующий раз, когда пользователь заходит на эту страницу.
  • Если сайт устанавливает autocomplete = «off» для полей ввода имени пользователя и пароля, браузер все равно предложит запомнить этот логин, и, если пользователь согласится, браузер автоматически заполнит эти поля при следующем посещении этой страницы пользователем.

Это поведение в Firefox (начиная с версии 38), Google Chrome (начиная с 34) и Internet Explorer (начиная с версии 11).

Наконец, небольшая информация о том, принадлежит ли атрибут элементу form или элементу input . Спецификация снова имеет ответ:

Если атрибут autocomplete опущен, вместо него используется значение по умолчанию, соответствующее состоянию атрибута autocomplete владельца формы элемента (либо «on», либо «off»). Если владельца формы нет, то используется значение «on».

Так. Помещение в форму должно применяться ко всем полям ввода. Помещение его в отдельный элемент должно применяться только к этому элементу (даже если его нет в форме). Если autocomplete вообще не установлено, по умолчанию оно включено.

Резюме

Чтобы отключить autocomplete на всей форме:

 {amp}lt;form autocomplete="off" ...{amp}gt; 

Или, если вам нужно сделать это динамически:

 {amp}lt;form autocomplete="random-string" ...{amp}gt; 

Отключить autocomplete для отдельного элемента (независимо от того, присутствует или нет параметр формы)

 {amp}lt;input autocomplete="off" ...{amp}gt; 

Или, если вам нужно сделать это динамически:

 {amp}lt;input autocomplete="random-string" ...{amp}gt; 

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

§

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

 {amp}lt;input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" /{amp}gt; 

Примечание. Атрибуты входного имени и идентификатора не должны содержать ничего, что могло бы дать подсказку браузеру относительно данных, иначе это решение не будет работать. Например, я использую «fa» вместо «FullAddress».

И следующий скрипт при загрузке страницы (этот скрипт использует JQuery):

 $("[data-autocomplete-ninja]").each(function () { $(this).focus(function () { $(this).data("ninja-name", $(this).attr("name")).attr("name", ""); }).blur(function () { $(this).attr("name", $(this).data("ninja-name")); }); }); 

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

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector