如何禁止使用Javascript保存密码泡沫铬?

问题描述 投票:37回答:13

我需要能够防止保存密码气泡从甚至呈现在用户登录后了。

自动完成=关不是办法。

我还没有碰到过一个帖子,提供了针对此问题的安全的解决方案。难道真的没有办法禁用在Chrome中的密码泡沫?

javascript html angularjs google-chrome internet-explorer-8
13个回答
20
投票

我发现没有“支持”的方式来做到这一点。

我所做的是密码的内容复制到一个隐藏字段,并删除密码输入前提出。

由于在提交时不会有页面上的任何密码字段,浏览器就不会要求保存它。

这里是(使用jQuery)我的javascript代码:

function executeAdjustment(){       
        $("#vPassword").val($("#txtPassword").val());
        $(":password").remove();        
        var myForm = document.getElementById("createServerForm");
        myForm.action = "executeCreditAdjustment.do";
        myForm.submit();
    }

0
投票

我有一个正常的网页内的支持,仅在登录页面上进行操作时(支持登录不应该被保存)浏览器如何强迫你自己的密码行为的两个问题:

  1. 浏览器会从中得到的方式在页面的其余部分建议登录。
  2. 该浏览器将要求保存所输入的密码技术。

所以,我结合了两种解决方案,我在各种计算器发现帖子我想我会张贴在这里。我使用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为2017年9月12日。


0
投票

工作对我来说,唯一的事情是文件准备之后增加输入的价值空间,然后删除空间时,用户集中在输入。

$('.login-input').val(' ');
$('.login-input').on('focus', function() {
    $(this).val('');
});

简单和容易。在Chrome 64在Firefox所有你需要的是增加autocomplete="off"属性的输入。


0
投票

我自己的解决方案的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" />

-2
投票

如果您选择让谷歌浏览器保存网站密码,你会看到一个提示您每次登录新网站时。如果您点击此网站永远的提示,你的网站的密码不会被保存,该网站添加到一律不保存密码的列表。

您可以编辑该列表,并禁用提示:

点击浏览器工具栏上的Chrome菜单Chrome菜单。选择设置。点击显示高级设置。单击管理保存的密码。在出现的对话框中的密码,向下滚动至底部的“一律不保存”部分。要从此列表中删除站点,选择它并点击出现的行末尾的X.现在重新浏览网站,你应该看到的提示再次保存您的密码信息,如果您允许谷歌Chrome浏览器显示的提示。


17
投票

经过搜索的时间,我想到了我自己的解决方案,这似乎在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类的原因基本上使输入字段无形的,无法点击没有“隐藏”起来。


4
投票

<input type="password" style="display:none"/>添加到您的窗体的顶部。 Chrome的自动完成将填补第一密码输入发现,在那之前的输入,所以用这一招将在一个看不见的输入也没关系只填写。


3
投票

最好的办法是通过用星号或点手动替换值来模拟输入文本输入密码。


2
投票
<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>

在火狐和Chrome的工作测试,符合市场预期。


1
投票

我发现没有替代所有的好处,我需要的话,创建一个新的。

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);
    //});
});

优点:

  • 不会触发提示
  • 不会触发自动填充(未在页面加载,也没有对类型的变化)
  • 仅影响实际使用的输入(允许未受干扰元件克隆/模板在复杂环境中)
  • 选择按类别
  • 简单而可靠的(没有新的元素,不断附着JS事件,如果有的话)
  • 经过测试和Chrome 61,Firefox的55和IE11工作在最新的今天

1
投票

我用下面的标记来处理这一点。

#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>

0
投票

首先,我想告诉你的东西。当你把[input type="text"][input type="password"]主流浏览器即可看到该弹出窗口。

现在,取代[input type="password"][input type="text"]再有就是CSS为

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}

0
投票

我用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" />
© www.soinside.com 2019 - 2024. All rights reserved.