Подтвердить что ты не робот

Отключение автозаполнения Safari на имена пользователей и пароли

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

Вот базовая форма:

<form action="/" method="post">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" />
    </p>
</form>

... Safari автоматически заполняет эти поля при загрузке страницы, как и должно, хорошо выполненная работа!

Если вы поместите autocomplete="off" в поля и/или элемент формы, Safari все еще сохраняет эти поля:

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="email" value="" autocomplete="off" />
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="password" value="" autocomplete="off" />
    </p>
</form>

Даже это не работает:

<form action="/" method="post" autocomplete="off">
    <p>
        <label>E-mail</label>
        <input type="text" name="secretfield1" value="" autocomplete="off"/>
    </p>
    <p>
        <label>Password</label>
        <input type="password" name="secretfield2" value="" autocomplete="off" />
    </p>
</form>

... так как Safari ищет те элементы <label>, если они содержат слова "E-mail", "Пароль" и т.д. и идут вперед с автозаполнением.

Aaaahhhhha!, подумал я и попробовал это:

<form action="/" method="post" autocomplete="off">
    <p>
        <label>%REPLACE_EMAIL_TITLE%</label>
        <input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/>
    </p>
    <p>
        <label>%REPLACE_PASSWORD_TITLE%</label>
        <input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" />
    </p>
</form>

... и замените% TAGS% настоящими именами, используя JavaScript. Автозаполнение Safari срабатывает. Независимо от того, установите ли вы 10-секундный тайм-аут на замену.

Итак, это действительно единственный вариант?

<form action="/" method="post" autocomplete="off">
    <p>
        <label>That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on</label>
        <input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/>
    </p>
    <p>
        <label>A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks</label>
        <input type="password" name="setofseeecretcharacters" value="" autocomplete="off" />
    </p>
</form>

Надеюсь, что нет?

UPDATE: @skithund указал в Twitter, что Safari получает обновление 4.0.3, в котором упоминается "Автозаполнение входа". Кто-нибудь знает, исправит ли это обновление?

4b9b3361

Ответ 1

У меня была та же проблема. И хотя мое решение не идеально, похоже, что оно работает. В принципе, Safari, похоже, ищет поле ввода с паролем и именем пользователя и всегда пытается его заполнить. Итак, мое решение заключалось в том, чтобы добавить поддельное имя пользователя и пароль перед текущим, которое может заполнить Safari. Я попытался использовать style="display: none;", но это не сработало. Итак, в конце концов, я просто использовал style="position:absolute; top:-50px;", и это спрятало поле ввода с глаз долой и, казалось, отлично работало. Я не хотел использовать JavaScript, но я думаю, вы могли бы скрыть его с помощью JavaScript.

Теперь Safari никогда не завершила автоматическое заполнение полей имени пользователя и пароля.

Ответ 2

Причина, по которой браузеры игнорируют autocomplete=off, заключается в том, что были некоторые веб-сайты, которые пытались отключить автозаполнение паролей.

Это неправильно.

И в июле 2014 года Firefox был последним крупным браузером, который, наконец, реализовал это изменение, чтобы игнорировать любой веб-сайт, который пытается отключить автозаполнение паролей.

Одна из главных жалоб пользователей на нашу функцию автозаполнения форм HTML: "Это не работает - я не вижу ни одного из моих ранее введенных текстов". При отладке таких случаев мы обычно обнаруживаем, что сайт явно отключил эту функцию с помощью предоставленного атрибута, но, конечно, пользователи не знают, что сайт сделал это и просто предположил, что IE глючит. По моему опыту, когда функции скрыты или заменены, пользователи обычно обвиняют браузер, а не веб-сайт.

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

  • Chrome игнорирует его
  • Safari игнорирует его
  • IE игнорирует его
  • Firefox игнорирует его

На этом этапе веб-разработчики обычно протестуют: "Но я бы не делал этого везде - только в нескольких маленьких битах, где это имеет смысл!" Даже если это правда, к сожалению, это еще один случай, когда на самом деле у браузера нет разницы. Помните, что всплывающие окна были когда-то счастливой, полезной частью веб-браузера, пока их злоупотребление рекламодателями не сделало их бичем пользователей во всем мире. Неизбежно, что все браузеры начали блокировать всплывающие окна, разбивая даже "хорошие" сайты, которые использовали всплывающие окна с хорошим вкусом и осмотрительностью.

Что делать, если я особенный снежинка?

Есть люди, которые поднимают хороший прецедент:

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

Это не нарушает утверждение:

Любая попытка любого веб-сайта обойти предпочтения браузера неверна

Это связано с тем, что в случае общего киоска:

  • это не веб-сервер, имеющий политику oddball
  • это клиентский клиент , имеющий политику нечетного выбора.

браузер (общий компьютер) - это тот, который требует, чтобы он не пытался сохранять пароли.

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

Поскольку вы заблокировали и управляете этим компьютером киоска: вы управляете настройками. Это включает в себя возможность сохранения паролей.

В Chrome и Internet Explorer вы настраиваете эти параметры с помощью групповых политик (например, ключей реестра).

Из Список политик Chrome:

AutoFillEnabled

Включить автозаполнение

Тип данных: Boolean (REG_DWORD)

Расположение реестра Windows: Программное обеспечение\Политики\Chromium\AutoFillEnabled

Описание: Включает функцию автозаполнения хрома и позволяет пользователям автоматически заполнять веб-формы с использованием ранее сохраненной информации, такой как адрес или информация о кредитной карте. Если вы отключите этот параметр, AutoFill будет недоступен для пользователей. Если вы включите этот параметр или не установите значение, AutoFill останется под контролем пользователя. Это позволит им настраивать профили автозаполнения и включать или выключать автозаполнение по своему усмотрению.

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

Ответ 3

Исправлено: автозаполнение браузера в режиме readonly и настройка записи на фокус

 <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

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

Хорошо, вы только что заметили:

Запускается автозаполнение Safari. Неважно [как называются поля] @Jari

и есть предположение, что:

Safari, кажется, ищет поле ввода с паролем и именем пользователя и всегда пытается заполнить его @user3172174

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

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

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

Ответ 4

Добавление css к входу скроет псевдоэлемент кнопки safari, и пользователи не смогут использовать автозаполнение

input::-webkit-contacts-auto-fill-button, 
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

Ответ 5

После сканирования через HTML-страницы Apple Safari и не обнаружив ничего в автозаполнении, я немного искал и думал.

После прочтения (мягко) связанного вопроса в обсуждениях Apple я вспомнил, что по умолчанию не разрешается запоминать пароли и т.д. (что можно включить в системе iDevice настройки или в командной строке). Поскольку Apple перенесла эту функцию из браузера и в свои (проприетарные, i) ОС (скриншоты в этой статье), я считаю, что они игнорируют HTML-форму/свойства поля полностью.

Если они не изменят свой менталитет относительно этой функции, поскольку я уверен, что это их ожидаемое поведение, на их заблокированных устройствах, я буду работать в предположении, что это не исчезнет. Это, вероятно, другое для родных приложений для iOS. Определенно сохраните форму autocomplete = "off" и надеюсь, что однажды они вернутся к стандарту HTML5 для этой функции.

Я знаю, что это не включает никакой работы, но я думаю, что если вы согласитесь с тем, что это не-браузерная функция на iDevices, это имеет смысл (в стиле Apple).

Ответ 6

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

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

Единственное решение, которое я нашел, это закрепить видимость поддельных элементов с помощью overflow: hidden.

<label for="user_email">Email</label>
<input autocomplete="off" type="text" value="[email protected]" name="user[email]" id="user_email">
<!-- Safari looks for email inputs and overwrites the existing value with the user personal email. This hack catches the autofill in a hidden input. -->
<label for="fake_email" aria-hidden="true" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)">Email</label>
<input type="text" name="fake[email]" id="fake_email" style="height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px)" tab-index="-1" aria-hidden="true">

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

Ответ 7

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

<div style="position:absolute;height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Надеюсь, что это полезно для кого-то!

Ответ 8

Я также был укушен Safari странным по умолчанию автозаполнением поведения, но вместо того, чтобы полностью отключить его, мне удалось заставить его работать для меня, следуя рекомендациям в https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands.

В частности, я положил autocomplete="username" в поле имени пользователя и autocomplete="password-current" в поле пароля. Это говорит браузеру, что поля для автозаполнения, вместо того, чтобы угадать, и зафиксировал автозаполнение для моего варианта использования.

Этот подход работает как для первых форм входа в систему "email first" (поле для пароля не отображается сразу, например, для входа в Google), так и обычные формы входа с видимыми полями имени пользователя и пароля.

Ответ 9

Вы можете попробовать этот вариант. Меня устраивает. Если вы измените значение поля один раз, Safari изменит его снова. Если пользователь нажал на это поле, после этого значение не будет автоматически изменено Safari.

  $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
        if($.browser.chrome){
            $.browser.safari = false;
        }

        var isChanged=false;

        $('#Email').change(function () {
            if ($.browser.safari && !isChanged) {
                $('#Email').val('@Model.Email');
            }
        });

        $('#Email').click(function () {
            if ( $.browser.safari && !isChanged) {
                isChanged = true;
            }
        }); var isChangePassword = false;
    $('#OldPassword').change(function () {
        if ($.browser.safari && !isChangePassword) {
            $('#OldPassword').val('');
        }
    });

    $('#OldPassword').click(function () {
        if ($.browser.safari && !isChangePassword) {
            isChangePassword= true;
        }
    });

Ответ 10

Лучше, чем использовать JS для очистки содержимого - просто поддельное поле пароля:

<input type="text" name="user" />
<input fake_pass type="password" style="display:none"/>
<input type="password" name="pass" />

A password тип doublely помещает браузер в неуверенность, поэтому он автоматически заполняет только имя пользователя

fake_pass input не должен иметь атрибут name, чтобы сохранить $_POST clean!

Ответ 11

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

Начните с обычного текстового ввода вместо типа "пароль".

Password: &nbsp <input type="text" id="fkpass" name="bxpass" class="tinp" size="20" />

Затем - если хотите - установите фокус на поле ввода.

<BODY onLoad="fitform()">

Поместите JS в конец страницы.

<script type="text/javascript">
document.entry.fkpass.focus();
function fitform() {
document.getElementById('fkpass').autocomplete = 'off';
}
</script>

Теперь у вас есть обычное поле формы. Что хорошего в этом? Измените стиль CSS для этого ввода, чтобы он использовал шрифт, который является "пулями" вместо символов.

<style type="text/css">
@font-face { font-family: fdot; src: url('images/dot5.ttf'); }
@font-face { font-family: idot; src: url('images/dot5.eot'); }
@font-face { font-family: wdot; src: url('images/dot5.woff'); }
@font-face { font-family: w2dot; src: url('images/dot5.woff2'); }
.tinp { font-family: fdot, idot, wdot, w2dot; color: #000; font-size:18px; }
</style>

Да, вы можете "убрать" код и добавить к нему .svg.

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

Если вы хотите шрифт, здесь. Он был создан с помощью CorelDraw и конвертирован в онлайн-утилиту для преобразования webfont. (dot_webfont_kit.zip 19.3k)

Надеюсь, это поможет.

Ответ 12

Удалите элемент <form>. Чтобы сохранить поведение формы, вы можете прослушивать событие keypress для полей ввода для обработки нажатой клавиши enter. На всякий случай я удалил input type="submit" тоже. Вы можете использовать button type="button".

Ответ 13

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

Мое решение: Я просто создал альтернативные имена:

$name = str_replace('email','em___l',$name);
$name = str_replace('password','pa___d',$name);
<input type="text" name="<?=$name?>" id="<?=$name?>" />

Затем, когда форма отправлена:

foreach($_POST as $name=>$value) {
    $name=str_replace('em___l','email',$name);
    $name=str_replace('pa___d','password',$name);
    $_POST[$name]=$value;
}

Это единственный метод, который работал у меня.

Ответ 14

Решения CSS display: none, упомянутые здесь, не работали для меня (октябрь 2016 года). Я исправил эту проблему с помощью JavaScript.

Я не возражаю против того, чтобы браузер помнил пароли, но хотел предотвратить плохое автозаполнение. В моем случае - форма с полем пароля и не связанное имя пользователя. (Пользовательская форма редактирования на сайте Drupal 7, где поле пароля требуется только для некоторых операций.) Независимо от того, что я попробовал, Safari найдет поле жертвы для имени пользователя с автозаполненным паролем (поле, которое визуально было показано ранее, например).

Я восстанавливаю исходное значение, как только Safari выполняет автозаполнение. Я пробую это только в течение первых 2 секунд после загрузки страницы. Вероятно, даже меньшее значение в порядке. Мои тесты показали, что автозаполнение происходит примерно через 250 мс после загрузки страницы (хотя я думаю, что это число сильно зависит от того, как страница построена и загружена).

Вот мой код JavaScript (с jQuery):

// Workaround for Safari autofill of the e-mail field with the username.
// Try every 50ms during 2s to reset the e-mail to its original value.
// Prevent this reset if user might have changed the e-mail himself, by
// detecting focus on the field.
if ($('#edit-mail').length) {
  var element = $('#edit-mail');
  var original = element.attr('value');
  var interval = setInterval(function() {
    if ($(document.activeElement).is(element)) {
      stop();
    } else if (element.val() != original) {
      element.val(original);
      stop();
    }
  }, 50);
  var stop = function() {
    clearTimeout(timeout);
    clearInterval(interval);
  }
  var timeout = setTimeout(function() {
    clearInterval(interval);
  }, 2000);
}

Ответ 15

У меня была такая же проблема внезапно в SPA с React in Mobile Safari 10.3.1

Мне не нужны каверзные обходные пути раньше во всех проверенных браузерах, даже Mobile Safari IOS 10.2

Но так как 10.3.1 имя пользователя или пароль будут заполняться полями, в которых будут указаны слова "пароль", "электронная почта", "имя пользователя" в любых формах после входа с активным параметром "запомнить". Похоже, что обработанное DOM-Tree "анализируется" с использованием полнотекстового поиска, а затем пользовательский агент заполняет данные без учета какого-либо параметра autocomplete = "off". Случается funnyli также на текст заполнителя для поля. Таким образом, вы должны быть очень осторожны с присвоением имен, если вы не хотите, чтобы вы заполняли имя пользователя или пароль в местах, где эти данные не являются полезными.

Единственное решение после нескольких часов исследования - это решение, размещенное здесь. Укажите поле ввода с именем "email" и укройте содержащий div div с высотой: 0px, overflow: hidden.

Ответ 16

<input name="" type="text" "  autocomplete="off" onfocus="this.name='email'">

Работает для меня!