如何使用 Javascript 禁用 chrome 中的保存密码气泡？

Posted 2023-02-22

【中文标题】如何使用 Javascript 禁用 chrome 中的保存密码气泡？

【英文标题】：How do I disable the save password bubble in chrome using Javascript?

【发布时间】：2014-06-04 07:50:55

【问题描述】：

我需要能够防止保存密码气泡在用户登录后出现。

Autocomplete=off 不是答案。

我还没有看到为这个问题提供安全解决方案的帖子。 Chrome中真的没有办法禁用密码气泡吗？？

【问题讨论】：

为什么 autocomplete=off 不是答案？你能详细说明吗？关于这个主题，您还阅读了哪些其他问题？为什么需要这样做？我对浏览器/javascript 会影响浏览器功能的非渲染方面有所保留。

应用在医疗行业，要求用户不能保存密码。 autocomplete=off 不是答案，因为它不起作用……它仍然会产生气泡。关于 SO 还有很多其他问题，我之前问过一个问题，并且几乎立即将其标记为重复。

你能提供一个 autocomplete=off 不起作用的小提琴例子吗？

Chrome 团队认为autocomplete=off 是个坏主意，仅此而已。您无法解决问题，因为 Chrome 人员明确不希望您这样做。 More info.

重复：***.com/questions/20303053/… 和 ***.com/questions/27280461/… 。这个问题有更多有用的答案。

【参考方案1】：

我发现没有“受支持”的方法。

我所做的是将密码内容复制到隐藏字段并在提交之前删除密码输入。

由于提交时页面上没有任何密码字段，因此浏览器从不要求保存。

这是我的 javascript 代码（使用 jquery）：

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

【讨论】：

感谢 Leon，我们正在使用您的解决方案并稍作修改：我们没有删除密码输入，而是删除了值并将类型设置为文本。 password.val(""); password.attr("type", "text");.

这实际上可能更好。我很高兴你发现它很有用！

@FerranMaylinch，将输入类型从密码更改为文本将显示密码；因此，请确保先停止显示输入。

【参考方案2】：

经过数小时的搜索，我想出了自己的解决方案，似乎可以在 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 类本质上使输入字段不可见且不可点击而不“隐藏”它们的原因。

【讨论】：

我认为这个答案实现起来最简单。

迄今为止我发现的唯一解决方案，它确实适用于最新的 Chrome（目前为 61 个）

【参考方案3】：

将<input type="password" style="display:none"/> 添加到表单顶部。 Chrome 的自动完成功能会填充它找到的第一个密码输入，以及之前的输入，所以使用这个技巧它只会填充一个无关紧要的不可见输入。

【讨论】：

这对我不起作用。同样，我指的是完全关闭用户保存密码的选项。我需要防止密码管理器气泡出现。

我可能做错了什么，但 Chrome（也许他们更新了浏览器）记住了我的变量名称并将密码附加到该名称。我尝试为隐藏和显示的密码字段提供相同的名称，但仍然无效。我最终为两个密码字段名称使用了一个空数组，name="password[]"。它仍然提示保存密码，但即使您告诉它保存密码，它也不会显示在登录页面的任何位置。在 Chrome 49 上测试。

【参考方案4】：

最好的解决方案是通过手动将值替换为星号或圆点来使用输入文本模拟输入密码。

【讨论】：

好主意，但不安全

是的，我想过，但 Alaeddine 是正确的。

输入文本和密码的唯一区别是星号和拒绝从密码复制，可以模拟，两个输入的数据都可以用js操作。为了确保发送数据的安全，您应该使用 https。

为什么说常规输入字段不安全？您似乎暗示密码字段更安全，但实际上并非如此。它只是一个显示点/星号而不是文本的常规输入字段，但其内容仍以纯文本形式发送，除非开发人员在发送表单之前进行一些额外的操作。因此，使用常规输入字段的安全性不亚于使用密码字段。唯一的问题可能是移动设备与此伪密码字段的兼容性。

【参考方案5】：

<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 中测试，按预期工作。

【讨论】：

从 2015 年 7 月 9 日开始，它的效果很好。其他解决方案不再适合我！谢谢！

【参考方案6】：

我使用以下标记处理了这个问题。

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

【参考方案7】：

我没有找到我需要的所有好处的替代品，所以创建了一个新的。

html

<input type="text" name="password" class="js-text-to-password-onedit">

jQuery（如果你不使用 jQuery，请替换为具有相同逻辑的 vanilla JS）

$('.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 上测试并运行

【参考方案8】：

首先我想告诉你一些事情。 当您使用[input type="text"] 和[input type="password"] 主要浏览器会为您提供弹出窗口。

现在，将 [input type="password"] 替换为 [input type="text"] 然后有那个css

#yourPassTextBoxId

-webkit-text-secutiry:disc

【讨论】：

在撰写本文时，该元素甚至没有 MDN 页面：developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

应该是-webkit-text-security。你打错字了。

【参考方案9】：

我使用 2 个常规文本框颠覆了这一点。一个包含实际密码，一个用作掩码。然后，我将密码框的不透明度设置为 0，并且禁用了掩码文本框 - 但背景颜色设置为白色，使其看起来已启用。然后我将密码框放在掩码框的顶部。在一个 jscript 函数中，我更新掩码的文本值，以在密码框中的每次按键时显示一串“*”字符。两个缺点：闪烁的光标现在可能会根据您的浏览器显示。它显示在 IE 中，但不显示在 Chrome 或 Firefox 中。用户输入时会有一点延迟。

我的代码 sn-p 在 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" />

【参考方案10】：

在常规页面中的仅支持登录页面上工作时，浏览器如何强制您使用密码行为有两个问题（永远不应保存支持登录）：

浏览器会建议从页面的其余部分登录。 浏览器会要求保存输入的技术密码。

所以我结合了我在各种 *** 帖子中找到的两个解决方案，并认为我会在这里发布它们。我用的是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>

截至 2017 年 9 月 12 日，这对我在 Firefox 和 Chrome 上有效。

【参考方案11】：

唯一对我有用的是在文档准备好后为输入值添加一个空格，然后在用户关注输入时删除该空格。

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

简单易行。适用于 Chrome 64。在 Firefox 中，您只需在输入中添加 autocomplete="off" 属性即可。

【参考方案12】：

我自己的解决方案 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 行和第 3 行：$(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith(''); $(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('');

【参考方案13】：

如果您选择让 Chrome 浏览器保存网站密码，则每次登录新网站时都会看到提示。如果您在提示中单击此站点的从不，则不会保存您的站点密码，并且该站点将添加到从不保存的密码列表中。

您可以编辑此列表并禁用提示：

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

【讨论】：

这不是原始发帖人所要求的。本网站面向开发人员，不面向最终用户。他需要的是一种以编程方式禁用提示的方法，而不是使用浏览器用户界面，因为无论如何用户都不会做所有这些事情。