输入type=password，不要让浏览器记住密码

Posted 2023-02-24

【中文标题】输入type=password，不要让浏览器记住密码

【英文标题】：Input type=password, don't let browser remember the password

【发布时间】：2010-10-02 20:51:17

【问题描述】：

我记得有一种方法可以让<input type="password" /> 浏览器不提示用户保存密码。但我正在画一个空白。是否有 html 属性或一些 javascript 技巧可以做到这一点？

【问题讨论】：

***.com/questions/32369/… 的副本

【参考方案1】：

尝试使用autocomplete="off"。不过，不确定是否每个浏览器都支持它。 MSDN 文档here。

编辑：注意：大多数浏览器已经放弃了对这个属性的支持。见Is autocomplete="off" compatible with all modern browsers?

这可以说应该留给用户而不是网站设计者。

【讨论】：

您还可以使用 HTTPS 并通过 HTTP 标头或 META 标签来防止缓存。这样，密码也不会被存储（至少在 Internet Explorer 中）。

关于验证，HTML5 在规范中添加了 autocomplete 属性，所以现在可以了

未来读者请注意：所有主流浏览器都在朝着忽略该属性的方向发展。 （见***.com/a/21348793/37706）

@RyanDansie 感谢您指出这一点。我已经更新了答案。旧答案是……旧的。

“这可以说应该留给用户而不是网站设计者。”有这个的技术和非技术原因。例如，不应记住一次性密码。具有“输入您的 PIN 的第一位”的银行网站是另一个。不要忘记，业务分析师可能会决定他想要一个密码字段并取消开发人员的选择。

【参考方案2】：

<input type="password" autocomplete="off" />

我想补充一点，作为用户，我认为这非常很烦人，而且是一个需要克服的麻烦。我强烈建议不要使用它，因为它很可能会激怒您的用户。

MRU中已经没有存储密码了，正确配置的公用机甚至不会保存用户名。

【讨论】：

+1 表示“不要惹恼您的用户”。这正是这种功能的作用。就像网站强制关闭缓存一样，后退按钮会清除表单。非常刺激。

+1 我完全同意。它适用于管理员编辑客户资料页面，如果您打算更改密码，您只需在其中输入密码。这样管理员就不会在每次编辑客户信息时都更改密码。

对于信用卡号字段非常有用。 PayPal 的表单存储在每个浏览器中，任何使用您计算机的人都可以重新输入所有数据，因此您必须手动删除所有记住的字段。

在用户可以设置与登录无关的密码的表单上，启用自动完成实际上是更烦人的选项 - 浏览器可能会提供保存实际上无法保存的密码做任何事。此外，如果安全是一个敏感问题，我不会假设所有公共机器都已正确配置。

我用这个一次性使用密码。正如jrb所说，如果浏览器存储它会很烦人。

【参考方案3】：

你可以使用JQuery，通过id选择项目：

$("input#Password").attr("autocomplete","off");

或按类型选择项目：

$("input[type='password']").attr("autocomplete","off");

也可以：

你可以使用纯Javascript：

document.getElementById('Password').autocomplete = 'off';

【参考方案4】：

至于安全问题，以下是安全顾问将就整个现场问题告诉您的内容（这是来自实际的独立安全审计）：

启用 HTML 自动完成 - HTML 表单中的密码字段已启用自动完成。大多数浏览器都具有记住在 HTML 表单中输入的用户凭据的功能。

相对风险：低

受影响的系统/设备： o https://*******/

我也同意这应该涵盖包含真正私人数据的任何字段。我认为，只要该站点要访问任何应保持安全的内容[普遍或符合法律合规要求]，就可以强制一个人始终输入他们的信用卡信息、CVC 代码、密码、用户名等。例如：购买表格、银行/信贷网站、税务网站、医疗数据、联邦、核等 - 不是 Stack Overflow 或 Facebook 等网站。

其他类型的网站 - 例如TimeStar Online 用于上班和下班 - 这很愚蠢，因为我总是在工作中使用相同的 PC/帐户，我无法在该网站上保存凭据 - 奇怪的是，我可以在我的 android 上但不能在 iPad 上。即使是共享的个人电脑，这也不会太糟糕，因为替别人打卡/打卡除了惹恼你的主管之外没有任何作用。 （他们必须进去删除错误的拳头——只是选择不保存在公共电脑上）。

【讨论】：

只是在此处添加评论是出于不想要保存密码的原因。我维护一个带有用户帐户的网站，管理员可以在其中更改用户的密码。客户目前对 Chrome 提出每个用户每次保存“更改密码”表单中输入的密码感到愤怒，因为它错误地将编辑用户表单识别为登录表单。显然，给出诸如“只需单击永远不要记住密码”之类的简单说明已经超出了他们的范围。

@charredUtensil “永远不要记住密码”通常不是意味着“永远不要记住此站点的密码”吗？

老实说，当我写这篇评论时，我真的不知道它是否早在 2014 年。

【参考方案5】：

你也可以像下面这样使用它

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);

【参考方案6】：

我用另一种方式解决了。你可以试试这个。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function()                                               
    setTimeout(function()
        $("input#passfld").attr("type","password");
    ,10);
);


// or in pure javascript
 window.onload=function()                                              
    setTimeout(function()  
        document.getElementById('passfld').type = 'password';
    ,10);
     
</script>

#另一种方式

 <script type="text/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>

//你需要添加属性autocomplete="off"或者你可以在输入框中添加类.auto-complete-off来享受

例子：

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />

【讨论】：

这会阻止浏览器存储密码，而不是阻止自动完成，这在我的场景中是一个更好的解决方案。

谢谢，在最新的 chrome 上为我工作请注意：在只允许使用 Chrome 的内部系统上使用，如果在生产站点中使用，请进行更多测试。

@AntoVinish，我希望我的最后一个解决方案可以在 Firefox 40 中使用。

【参考方案7】：

我尝试了以下方法，似乎适用于任何浏览器：

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function()  
        var passElem = $("input#passfld");
        passElem.focus(function()  
            passElem.prop("type", "password");                                             
        );
    );
</script>

这种方式比使用超时技术更安全，因为它保证了当用户聚焦时输入字段将屈服于密码。

【参考方案8】：

这是最好的答案，也是最简单的！在您的 input 字段前面放置一个额外的密码字段并设置 display:none ，这样当浏览器填写它时，它会在您不关心的 input 中执行它。

改变这个：

<input type="password" name="password" size="25" class="input" id="password" value="">

到这里：

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

【讨论】：

实际上，如果表单中有 2 个密码字段，它可以工作，但是如果不可见并启用，新浏览器会忽略第二个密码；(

使用display:none 对我不起作用（Chrome 61 OSX），但这样做：<input type="password" style="position: absolute; top: -1000px;">

【参考方案9】：

在大多数主流浏览器的情况下，在外部输入且未连接到任何表单都会使浏览器误以为没有提交。在这种情况下，您必须使用纯 JS 验证来登录，并且还需要对密码进行加密。

之前：

<form action="..."><input type="password"/></form>

之后：

<input type="password"/>

【讨论】：

顺便说一句，这是一个你可能不应该使用的技巧。如果不使用表单标签，您的代码默认会变为 HTML4，从而更难验证您的用户帐户。

【参考方案10】：

我在 Firefox 和 Chrome 上发现了以下作品。

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

所有这些都在表单部分中。 "person" 和 "mypswd" 是你想要的，但是浏览器会保存一次 "userid" 和 "passwd"，因为它们不会改变。如果您真的不需要它，您可以消除“人员”字段。在这种情况下，您只需要“mypswd”字段，该字段可能会以某种方式为您的网页用户所知。

【参考方案11】：

我可以让 firefox、edge 和 Internet Explorer 关闭自动完成功能的唯一方法是在我的表单语句中添加 autocomplete="false"，例如：

  <form action="postingpage.php" autocomplete="false" method="post">

我必须将 autocomplete="off" 添加到我的表单输入中并将类型更改为 text Like:

     <input type="text" autocomplete="off">

看来这个html代码需要用浏览器标准化。应修改表单类型 = 密码，使其覆盖浏览器设置。 我唯一的问题是我丢失了输入屏蔽。但从好的方面来说，烦人的“这个网站不安全”并没有出现在 Firefox 中。

对我来说，这没什么大不了的，因为用户已经过身份验证，并且是我更改的用户名和密码部分

【讨论】：

不要这样做。数据仍将通过网络以明文形式发送，这首先是 HTTP（不是 HTTPS）的全部问题，因此是您的“烦人”警告消息。用户已经通过身份验证没有区别，因为中间人仍然可以看到明文数据，并且服务器端日志记录可能配置不同（可以存储请求标头，而如果存储 POST 则完全有其他问题HTTPS 下的数据）。

https 加密流量。如果您将其用作公开的 Internet 应用程序的一部分，则无论如何都可以这样做。 Post 方法可以防止书签，HTML 中的多个 Iframe 的 php 代码可以防止 URL 注入。从技术上讲，您应该输入完整路径。如果您正在部署，那么我建议使用以文本编写的基本 url 加载 $_SESSION 变量，而不是查看 $_SERVER 变量。 $_SERVER['HTTP_HOST'] 和 $_SERVER['PHP_SELF'] 应该只在非公共环境中使用，因为它们都有几个漏洞。

顺便说一句，我的示例适用于未以任何方式连接到互联网的封闭系统

没有人提到过使用“java onclick”执行的加密方案，然后在加密例程后提交表单。

【参考方案12】：

另请阅读this answer，他正在使用这种适用于任何地方的简单解决方案（另请参阅 Safari 移动版的修复）：

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

【参考方案13】：

<input type="password" placeholder="Enter New Password" autocomplete="new-password">

给你。

【讨论】：

这就是方法，有很多解决方法，就这么简单，用最新版本的 Firefox (v67) 和 Chrome (75) 测试。

Chrome 80 在提交表单后仍会提供记住密码的功能。

【参考方案14】：

鉴于 autocomplete=off 已被弃用，我建议使用更新的解决方案。

将您的密码字段设置为普通文本字段，并使用 CSS 用“光盘”屏蔽您的输入。代码应如下所示：

<input type="text" class="myPassword" /> 

input .myPassword
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;

请注意，这在 Firefox 浏览器上可能无法正常工作，需要额外的解决方法。在此处阅读更多信息：https://***.com/a/49304708/5477548。

解决方案取自this link，但为了遵守 SO“无热链接”，我在这里总结了它。

【参考方案15】：

你可以使用这个： 自动完成=“新密码”

例子：

<input type="password" placeholder="Enter New Password" autocomplete="new-password">

【讨论】：

这个答案已经存在于这个问题中。您应该在发布自己的答案之前查看所有答案。