Мне нужно иметь возможность предотвратить появление пузырька "Сохранить пароль" даже после входа пользователя в систему.
Автозаполнение = выкл. не является ответом.
Я не встречал сообщение, предлагающее безопасное решение этой проблемы. Неужели нет способа отключить пароли паролей в Chrome?
Я обнаружил, что для этого не существует "поддерживаемого" способа.
То, что я сделал, это скопировать содержимое пароля в скрытое поле и удалить входные данные пароля перед отправкой.
Так как на странице не возникает никаких паролей на странице при отправке, браузер никогда не просит его сохранить.
Здесь мой код javascript (с использованием jquery):
function executeAdjustment(){
$("#vPassword").val($("#txtPassword").val());
$(":password").remove();
var myForm = document.getElementById("createServerForm");
myForm.action = "executeCreditAdjustment.do";
myForm.submit();
}
После нескольких часов поиска я нашел собственное решение, которое работает в Chrome и Safari (хотя не в Firefox или Opera, и я не тестировал IE). Хитрость заключается в том, чтобы окружить поле пароля двумя фиктивными полями.
<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">
Вот CSS, который я использовал:
.stealthy {
left: 0;
margin: 0;
max-height: 1px;
max-width: 1px;
opacity: 0;
outline: none;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
z-index: -1;
}
Примечание: фиктивные поля ввода больше не могут быть скрыты с помощью display: none не предлагал этого, потому что браузеры обнаруживают это и игнорируют скрытые поля, даже если сами поля не скрыты, а заключены в скрытую оболочку. Следовательно, причина для класса CSS, который по существу делает поля ввода невидимыми и не кликабельными, не "скрывая" их.
Добавьте <input type="password" style="display:none"/> в начало вашей формы. Автозаполнение Chrome заполнит первый ввод пароля, который он найдет, и ввод до этого, поэтому с помощью этого трюка он заполнит невидимый ввод, который не имеет значения.
Лучшее решение - имитировать входной пароль с текстом ввода, заменяя значение звездочками или точками вручную.
<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />
<script>
function init() {
$('#password').replaceWith('<input type="password" id="password" />');
}
</script>
протестирован в Firefox и Chrome, как и ожидалось.
Я не нашел альтернативы со всеми преимуществами, которые мне нужны, создал новый.
HTML
<input type="text" name="password" class="js-text-to-password-onedit">
jQuery (замените ванильным JS той же логикой, если вы не используете jQuery)
$('.js-text-to-password-onedit').focus(function(){
el = $(this);
el.keydown(function(e){
if(el.prop('type')=='text'){
el.prop('type', 'password');
}
});
// This should prevent saving prompt, but it already doesn't happen. Uncomment if nescessary.
//$(el[0].form).submit(function(){
// el.prop('readonly', true);
//});
});
Преимущества:
Я подорвал это, используя 2 регулярных текстовых поля. Один из них содержит фактический пароль, а другой - как маску. Затем я устанавливаю непрозрачность в поле пароля 0, а текстовое поле маски отключено, но цвет фона установлен на белый, что означает, что он включен. Затем я помещаю окно с паролем поверх окна маски. В jscript-функции я обновляю значение текста маски, чтобы отображать строку символов "*" с каждым нажатием клавиши в поле пароля. Два недостатка: мигающий курсор теперь может отображаться в зависимости от вашего браузера. Он отображается в IE, но не в Chrome или Firefox. Там немного задержки, когда пользователь печатает.
Мой фрагмент кода находится в asp:
$(window).ready(function() {
var pw = $('#txtPassword');
var mask = $('#txtMask');
$(pw).css('opacity', '0');
$(pw).keyup(function() {
var s = '';
for (var i = 0; i < $(pw).val().length; i++)
s = s + '*';
mask.val(s);
})
});style... .password {
font-family: monospace;
position: absolute;
background-color: white;
}Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />У меня было две проблемы с тем, как браузеры заставляют вас работать с паролями при работе на странице входа только для поддержки на обычной странице (логин поддержки никогда не должен быть сохранен):
Итак, я объединил два решения, которые я нашел в разных сообщениях stackoverflow, и думал, что разместил их здесь. Я использую jQuery, но этот принцип можно также преобразовать в обычный JavaScript.
Сначала введите поле пароля в текстовое поле и измените его на JavaScript позже - это дает неплохую вероятность, что браузер не предложит сохраненный пароль.
Во-вторых, перед отправкой формы установите форму пароля обратно в текстовое поле, но сначала скройте ее, чтобы пароль не отображался. Это можно сделать более красивым, добавив другое текстовое поле, когда поле пароля исчезнет, но только косметическое.
<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
$('#password').on('focus', function()
{
$(this).prop('type', password'); // this stops pre-saved password offers
});
$('#techForm').on('submit', function()
{
$('#password').hide().prop('type', 'text'); // this prevents saving
});
});
</script>
Это работало для меня в Firefox и Chrome по состоянию на 9/12/2017.
Единственное, что сработало для меня, это добавление пробела к значению ввода после того, как документ готов, а затем удаление пробела, когда пользователь сфокусировался на вводе.
$('.login-input').val(' ');
$('.login-input').on('focus', function() {
$(this).val('');
});
Просто и легко. Работает на Chrome 64. В Firefox все, что вам нужно, это добавить атрибут autocomplete="off" для ввода.
Мое собственное решение jQuery с PrimeFaces. Проверенная работа в Chrome и Internet Explorer, но в Mozilla Firefox (но не в Firefox)
<script type="text/javascript" charset="utf-8">
$(function(){
$('#frmLogin').on('submit',function(e){
$(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8" tabindex="2"/>');
$(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
$(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");
});
});
</script>
<h:inputSecret id="password" value="#{loginMB.password}" class="form-control"
placeholder="Contraseña" tabindex="3" label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
<p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
Я обработал это с помощью следующей разметки.
#txtPassword {
-webkit-text-security: disc;
}<form autocomplete="off">
<input type="text" name="id" autocomplete="off"/>
<input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
<input type="password" name="password" id="txtPassword" autocomplete="off"/>
<button type="submit" class="login100-form-btn">Login</button>
</form>Если вы решите, чтобы пароли Google Chrome сохраняли пароли, вы увидите приглашение при каждом входе на новый веб-сайт. Если вы нажмете "Никогда" для этого сайта в приглашении, ваш пароль для сайта не будет сохранен, а сайт добавлен в список паролей, которые никогда не сохраняются.
Вы можете отредактировать этот список и ОТКЛЮЧИТЬ ПРОМПТ:
Выберите меню Chrome меню Chrome на панели инструментов браузера. Выберите "Настройки". Нажмите "Показать дополнительные настройки". Нажмите "Управление сохраненными паролями". В появившемся диалоговом окне "Пароли" прокрутите вниз до раздела "Никогда не сохранено" внизу. Чтобы удалить сайт из этого списка, выберите его и нажмите X, который появится в конце строки. Теперь перейдите на веб-сайт, и вы увидите приглашение снова сохранить информацию о пароле, если вы разрешили Google Chrome показывать приглашение.
Прежде всего, я хочу сказать вам кое-что.
Когда вы берете [input type="text"], а также [input type="password"]
Основные браузеры дают вам всплывающее окно.
Теперь замените [input type="password"] на [input type="text"]
то для этого есть css
#yourPassTextBoxId{
-webkit-text-secutiry:disc
}