Мне нужно, чтобы браузеры не хранили значения имени пользователя и пароля, потому что я работаю над веб-приложением, которое содержит более безопасные данные. Мой клиент попросил меня сделать это.
Я попробовал атрибут autocomplete="off" в полях формы HTML и пароля. Но он не работает в последних браузерах, таких как Chrome 55, Firefox 38+, IE 11... и т.д.
Каково лучшее решение для этого?
Спасибо, что ответили мне. Я выполнил следующую ссылку
Отключить функциональность браузера "Сохранить пароль"
Я решил проблему, просто добавив атрибуты readonly и onfocus="this.removeAttribute('readonly');" помимо autocomplete="off" к входам, как показано ниже.
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
Это отлично работает для меня.
Это невозможно в современных браузерах, и не зря. Современные браузеры предлагают менеджеры паролей, которые позволяют пользователям использовать более надежные пароли, чем обычно.
Как объяснил MDN: Как отключить автозаполнение форм:
Современные браузеры реализуют интегрированное управление паролями: когда пользователь вводит имя пользователя и пароль для сайта, браузер предлагает запомнить его для пользователя. Когда пользователь снова заходит на сайт, браузер автоматически заполняет поля входа сохраненными значениями.
Кроме того, браузер позволяет пользователю выбрать главный пароль, который браузер будет использовать для шифрования сохраненных данных для входа.
Даже без мастер -пароля управление паролем в браузере обычно рассматривается как чистая выгода для безопасности. Поскольку пользователям не нужно запоминать пароли, которые хранит для них браузер, они могут выбирать более надежные пароли, чем в противном случае.
По этой причине многие современные браузеры не поддерживают
autocomplete="off"для полей входа в систему:
Если сайт устанавливает для формы
autocomplete="off", а форма содержит поля ввода имени пользователя и пароля, браузер по-прежнему будет предлагать запомнить этот логин, а если пользователь соглашается, браузер автоматически заполняет эти поля в следующий раз, когда пользователь заходит на страницу.Если сайт устанавливает
autocomplete="off"для полей ввода имени пользователя и пароля, браузер все равно предложит запомнить этот логин, и если пользователь согласится, браузер автоматически заполнит эти поля при следующем посещении страницы пользователем.Это поведение в Firefox (начиная с версии 38), Google Chrome (начиная с 34) и Internet Explorer (начиная с версии 11).
Если автор хочет запретить автозаполнение полей пароля на страницах управления пользователями, где пользователь может указать новый пароль для кого-то, кроме себя, следует указать
autocomplete="new-password", хотя поддержка этого не была реализована в все браузеры пока.
Вот чистое решение HTML/CSS для Chrome, протестированное в версии 65.0.3325.162 (Официальная сборка) (64-разрядная версия).
Установите input type="text" и используйте CSS text-security:disc для имитации type="password".
<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
Примечание: работает в FireFox, но CSS moz-text-security устарела/удалена. Чтобы исправить это, создайте CSS font-face состоящий только из точек, и используйте font-family: 'dotsfont'; ,
Источник: Получить тип ввода = текст, чтобы выглядеть как тип = пароль
В приведенном выше источнике содержится ссылка на -webkit-text-security CSS moz-text-security и -webkit-text-security.
Источник: https://github.com/kylewelsby/dotsfont
Насколько я тестировал, это решение работает для Chrome, FireFox версии 59.0 (64-разрядная версия ), IE версии 11.0.9600, а также для эмуляторов IE ie5 и выше.
Вы должны иметь возможность сделать фальшивый скрытый пароль, чтобы предотвратить его.
<form>
<div style="display:none">
<input type="password" tabindex="-1"/>
</div>
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
</form>
По умолчанию нет правильного ответа, чтобы отключить сохранение пароля в вашем браузере. Но, к счастью, есть обходной путь, и он работает практически во всех браузерах.
Чтобы достичь этого, добавьте фиктивный ввод непосредственно перед фактическим вводом с autocomplete = "off" и несколько пользовательских стилей, чтобы скрыть его и предоставив tabIndex. Автозаполнение браузера (Chrome) будет заполнять первый ввод пароля, который он находит, и ввод до этого, поэтому с помощью этого трюка он будет заполнять только невидимый ввод, который не имеет значения.
<div className="password-input">
<input
type="password"
id="prevent_autofill"
autoComplete="off"
style={{
opacity: '0',
position: 'absolute',
height: '0',
width: '0',
padding: '0',
margin: '0'
}}
tabIndex="-2"
/>
<input
type="password"
autoComplete="off"
className="password-input-box"
placeholder="Password"
onChange={e => this.handleChange(e, 'password')}
/>
</div>
Я думаю, что это невозможно в последних браузерах. Только вы можете сделать это, используя другое скрытое поле пароля и использовать его для своей логики после получения значения из поля видимого пароля при отправке и поместить фиктивную строку в поле видимого пароля. В этом случае браузер может хранить фиктивную строку вместо фактического пароля.
В то время как приведенное выше решение является очень правильным, если вам абсолютно нужна эта функция, вы можете имитировать ситуацию с помощью пользовательского ввода, используя текстовое поле и 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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="passfld" type="password" autocomplete="off" />
<input type="submit">Один из способов - генерировать случайные имена ввода и работать с ними.
Таким образом, браузеры будут представлены формой new каждый раз и не смогут предварительно заполнять поля ввода.
Если вы предоставите нам пример кода (у вас есть приложение js spa или какое-то представление на стороне сервера), я был бы рад помочь вам в реализации.
Привет,
Одна вещь, которую вы можете сделать, это попросить ваших пользователей отключить сохранение пароля для вашего сайта. Это может быть сделано широко или широко распространенным браузером.
Что-то еще, иначе вы можете сделать, чтобы входы были пустыми после загрузки страницы (и после того, как браузер автоматически завершил поля). Поместите этот script в конец элемента <body>.
userIdInputElement.value = "";
userPasswordInputElement.value = "";
Мне понадобилось пару лет назад для конкретной ситуации: два человека, которые знают свои сетевые пароли, одновременно используют один и тот же компьютер для подписания юридического соглашения. Вы не хотите, чтобы в этой ситуации был сохранен пароль, потому что сохранение пароля является юридическим вопросом, а не техническим, когда физическое и временное присутствие обоих лиц является обязательным. Теперь я соглашусь, что это редкая ситуация, с которой можно столкнуться, но такие ситуации существуют, а встроенные менеджеры паролей в веб-браузерах бесполезны.
Моим техническим решением выше было обменять между типами password и text и сделать цвет фона совпадающим с цветом текста, когда поле является текстовым полем (тем самым продолжая скрывать пароль). Браузеры не запрашивают сохранение паролей, которые хранятся в текстовых полях.
Плагин jQuery:
Соответствующий исходный код из приведенной выше ссылки:
(function($) {
$.fn.StopPasswordManager = function() {
return this.each(function() {
var $this = $(this);
$this.addClass('no-print');
$this.attr('data-background-color', $this.css('background-color'));
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this.attr('autocomplete', 'off');
$this.focus(function() {
$this.attr('type', 'password');
$this.css('background-color', $this.attr('data-background-color'));
});
$this.blur(function() {
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
});
$this.on('keydown', function(e) {
if (e.keyCode == 13)
{
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
}
});
});
}
}(jQuery));
Демо:
https://barebonescms.com/demos/admin_pack/admin.php
Нажмите "Добавить запись" в меню, а затем прокрутите страницу вниз до "Module: Stop Password Manager".
Здесь мое решение от 1 дня назад (с даты этого поста). Он добавляет слушателей к выбранному идентификатору пароля и не полагается на скрытые поля формы, специфичные для webkit правил css.
Мне пришлось вставить здесь код, но посмотреть полную версию HTML и описание Fiddler.
https://jsfiddle.net/AdamWhateverson/hLbztn0a/
<script type="text/javascript" id="pwsremover" data-fieldid="my_password">
if (document.addEventListener) {
var _PWH = {
selected: false,
touched: true,
init: function() {
// The script must always have the id of 'pwsremover'
var pw = document.getElementById('pwsremover');
// You need set the 'data-fieldid' attribute on the script tag to ensure
// the id of your password input field is passwed in
var fi = pw.dataset.fieldid;
// Convert password to text type
var ff = document.getElementById(fi);
ff.type="text";
var h = ff.outerHTML+"";
ff.outerHTML = h;
// Attach event handlers
var passSelected = false
document.addEventListener("selectionchange", function(ev) {
var ae = ev.target.activeElement;
if (ae.id == "login_pass") {
var kc = ev.keyCode;
var ss = ae.selectionStart;
var se = ae.selectionEnd;
var sl = Math.max(ae.selectionStart, ae.selectionEnd);
var il = ae.value.length;
_PWH.selected = (ss == 0 && se > 0 && sl == il) || ((kc == 8 || kc == 46) && il == 1);
}
});
var el = document.getElementById(fi);
el.addEventListener("keydown", function(ev) {
if (((ev.keyCode == 8 || ev.keyCode == 46) && this.value.length == 1) || _PWH.selected) {
this.value = '';
this.blur();
this.focus();
_PWH.selected = false;
}
});
el.addEventListener("mousedown",function(ev){
if(_PWH.touched){
_PWH.touched=false;
return;
}
this.type='text';
});
el.addEventListener("touchstart",function(ev){
this.type='text';
_PWH.touched = true;
this.focus(); // ensures the keyboard popsup
});
el.addEventListener("focus",function(ev){
this.type='password';
});
}
}
// Comment this out to disable
_PWH.init();
}
</script>
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
function handleInput(e) {
e.preventDefault();
e.stopPropagation();
e.target.setAttribute('readonly', true);
setTimeout(() => {
e.target.focus();
e.target.removeAttribute('readonly');
});
}
Это сработало для меня:
<form action='/login' class='login-form' autocomplete='off'>
User:
<input type='user' name='user-entry'>
<input type='hidden' name='user'>
Password:
<input type='password' name='password-entry'>
<input type='hidden' name='password'>
</form>
работает нормально для поля пароля, чтобы помнить его историю
$('#multi_user_timeout_pin').on('input keydown', function(e) {
if (e.keyCode == 8 && $(this).val().length == 1) {
$(this).attr('type', 'text');
$(this).val('');
} else {
if ($(this).val() !== '') {
$(this).attr('type', 'password');
} else {
$(this).attr('type', 'text');
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="multi_user_timeout_pin" name="multi_user_pin" autocomplete="off" class="form-control" placeholder="Type your PIN here" ng-model="logutUserPin">Я прочитал все ответы, и я был почти готов не делать это сам, так как я уже видел пару ответов здесь, но затем я решил обобщить все вышеперечисленное.
Короткий ответ, основанный на языке и правилах HTML, - вы не можете. Но это ответ, который используют только ленивые. Любой программист среднего уровня знает, что создание программного обеспечения - это 90% времени, которое нужно мыслить нестандартно.
Языки программирования похожи на инструменты плотника, они не диктуют конечные результаты, они просто помогают плотнику добраться туда.
С нашей проблемой есть два решения: чистый HTML и Javascript. Сначала вы должны понять, как браузер определяет, какой тип ввода у вас есть. Он всегда ищет пару текста и пароль, электронную почту и пароль, а в некоторых редких случаях, телефон и пароль.
Чисто HTML-решение, как ответил Гаурав Сингх, разместить фиктивное (скрытое) поле ввода над паролем, которое браузер попытается связать с полем пароля. Этот тип обходного пути уже известен некоторым браузерам, и в результате скрытое поле больше не работает. В этом случае вы просто добавляете некоторые CSS-правила, чтобы расположить фиктивный ввод за пределами экрана и сделать его размером 0 px.
Решение Javascript используется для генерации и представления полей пользователю после загрузки документа, на случай, если браузер больше не обращает на это внимания. То, как это было сделано, зависит от того, какой уровень безопасности вы хотите (на самом деле), и какую часть трассировки кода (в случае, если вы не знали, что код JS-кода будет отслеживаться полностью) вы хотите иметь на своем месте.
Позже редактирование: я забыл упомянуть, для того, чтобы это работало, вы не можете использовать классическую отправку внутри формы, вы должны отправлять значения JS, AJAX или другим способом, но, опять же, это можно отследить.
Лично мне нравится использовать фиктивный ввод только потому, что у него нет проблем с безопасностью. Кстати, защитить страницу входа в систему - простая задача, сложная только для "специалистов", которые говорят, что это не так. Единственная реальная проблема процедуры входа в систему - это безопасность сценария обработки, чтобы убедиться, что пользователь не пытается внедрить что-то туда. Кроме этого, там вообще ничего нет.
Надеюсь, поможет !
Даже позже отредактируйте:
Извините, я забыл упомянуть об этом для решения HTML. Вам нужно как минимум 2-3 фиктивных ввода пароля, иначе браузер просто выберет реальный. Мне кажется, что браузеры делают все возможное, чтобы собрать ваши данные... странно.
Вы можете сделать это в google chrome, перейдя в настройку/Пароль и формы > Отключить [Включить автозаполнение, чтобы заполнить веб-формы одним щелчком мыши.] и Отключить [Предложение по сохранению паролей с помощью Google Smart Lock для паролей.]