如何防止浏览器存储密码

问题描述 投票：41回答：16

我需要阻止浏览器存储用户名和密码值，因为我正在处理包含更多安全数据的Web应用程序。我的客户要我这样做。

我在HTML表单和密码字段中尝试了autocomplete="off"属性。但它不适用于Chrome 55，Firefox 38 +，IE 11等最新浏览器。

什么是最好的解决方案？

html security browser gxt
16个回答
30
投票

这在现代浏览器中是不可能的，并且有充分的理由。现代浏览器提供密码管理器，使用户能够使用比通常更强的密码。

正如MDN: How to Turn Off Form Autocompletion所解释的那样：

现代浏览器实现集成的密码管理：当用户输入站点的用户名和密码时，浏览器会为用户记住它。当用户再次访问该站点时，浏览器会使用存储的值自动填充登录字段。

此外，浏览器允许用户选择浏览器将用于加密存储的登录详细信息的主密码。

即使没有主密码，浏览器内的密码管理通常被视为安全的净收益。由于用户不必记住浏览器为其存储的密码，因此他们可以选择比其他方式更强的密码。

出于这个原因，许多现代浏览器不支持登录字段的autocomplete="off"：

  • 如果网站为表单设置autocomplete="off"，并且表单包含用户名和密码输入字段，则浏览器仍会提供记住此登录信息，如果用户同意，则浏览器将在用户下次访问该页面时自动填充这些字段。
  • 如果站点为用户名和密码输入字段设置autocomplete="off"，则浏览器仍然会提供记住此登录名，如果用户同意，则浏览器将在用户下次访问该页面时自动填充这些字段。

这是Firefox（自版本38以来），Google Chrome（自34版本）和Internet Explorer（自版本11以来）以来的行为。

如果作者想要阻止用户管理页面中的密码字段自动填充，用户可以为其他人指定新密码，则应指定autocomplete="new-password"，但尚未在所有浏览器中实现对此的支持。

0
投票

您可以做的一件事是要求您的用户禁用为您的网站保存密码。这可以在浏览器范围内或原始范围内完成。

有些东西，否则你可以做的是在加载页面后（以及浏览器自动完成字段后）强制输入为空。将此脚本放在<body>元素的末尾。

userIdInputElement.value = "";
userPasswordInputElement.value = "";
0
投票

几年前我需要这个特定情况：两个知道他们的网络密码的人同时访问同一台机器签署法律协议。您不希望在这种情况下保存任何密码，因为保存密码是一个法律问题，而不是技术问题，其中两个人的身体和时间存在都是强制性的。现在，我同意这是一种罕见的情况，但是这种情况确实存在，并且Web浏览器中的内置密码管理器是无益的。

我的上述技术解决方案是在password和text类型之间进行交换，并在字段为纯文本字段时使背景颜色与文本颜色匹配（从而继续隐藏密码）。浏览器不会要求保存存储在纯文本字段中的密码。

jQuery插件：

https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js

以上链接的相关源代码：

(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

单击菜单中的“添加条目”，然后滚动到页面底部的“模块：停止密码管理器”。

0
投票

这是我的解决方案，从1天前开始（从这篇文章的日期开始）它将监听器添加到所选的密码ID，而不依赖于隐藏的表单字段是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>
0
投票

我读了所有答案，我几乎准备不自己做，因为我已经看到了几个答案，但后来我决定总结以上所有内容。

基于HTML语言和规则的简短答案是你做不到的。但这只是懒人使用的答案。任何技术熟练的程序员都知道创建软件意味着90％的时间都在思考。

编程语言就像木匠工具一样，他们没有决定最终的结果，他们只是帮助木匠到达那里。

有了我们的问题，有两种解决方案：纯HTML和Javascript。首先，您必须了解浏览器如何确定您拥有的输入类型。它总是在寻找一对文本和密码，电子邮件和密码，在某些罕见的情况下，还有电话和密码。

正如Gaurav Singh所回答的那样，纯HTML解决方案是在密码上方放置一个虚拟（隐藏）输入字段，浏览器将尝试与密码字段配对。某些浏览器已经知道这种类型的解决方法，因此隐藏字段不再起作用。在这种情况下，您只需添加一些CSS规则来将虚拟输入定位在屏幕外部并使其大小为0像素。

Javascript解决方案用于在文档加载后生成并向用户显示字段，例如浏览器不再关注的情况。它是如何完成的，取决于你想要多少安全性（真的），以及你希望有多少代码跟踪（如果你不知道JS代码可以完全跟踪）。

后来编辑：我忘了提，为了工作，你不能在表单中使用clasic提交，你必须通过JS，AJAX或其他方式发送值，但是，再次，它可以被跟踪。

Personaly，我喜欢使用虚拟输入，只是因为没有安全问题。顺便说一句，保护登录页面是一项简单的任务，只有“专家”才会说它不复杂。登录过程的真正问题是处理脚本的安全性，以确保用户不会尝试在那里注入一些东西。除此之外，根本没有任何东西。

希望能帮助到你 ！

甚至以后编辑：

对不起，我忘记提及HTML解决方案了。您需要至少2-3个虚拟密码输入，否则浏览器将只选择实际的密码输入。在我看来，浏览器做得最好，他们可以选择你的数据....有点奇怪。

0
投票
< 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');
  });
}
-1
投票

密码字段工作正常，以防止记住其历史记录

$('#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">
-8
投票

您可以通过设置/密码和表单>禁用[启用自动填充功能，只需单击一次即可填写网页表单]，在谷歌浏览器中执行此操作。并禁用[通过Google智能锁密码保存密码。]

28
投票

谢谢你回复我。我按照以下链接

Disable browser 'Save Password' functionality

我通过在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');" >

这对我来说很好。

6
投票

这是针对Chrome的纯HTML / CSS解决方案，在65.0.3325.162版（官方版本）（64位）中进行了测试。

设置输入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';。 资料来源：Get input type=text to look like type=password 上面的Source包含一个指向CSS moz-text-security和-webkit-text-security属性的解决方法的链接。 资料来源：https://github.com/kylewelsby/dotsfont 据我测试，此解决方案适用于Chrome，FireFox版本59.0（64位），IE版本11.0.9600以及IE仿真器ie5及更高版本。
4
投票

你应该能够制作一个假的隐藏密码框来防止它。

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

默认情况下，没有任何正确的答案可以在浏览器中禁用保存密码。但幸运的是，有一种方法，它适用于几乎所有的浏览器。

为了实现这一点，在实际输入之前添加一个虚拟输入，使用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>
0
投票

我认为在最新的浏览器中是不可能的。只有这样你可以使用另一个隐藏的密码字段并在从可见密码字段中获取值后将其用于逻辑，同时提交并将虚拟字符串放入可见密码字段中。在这种情况下，浏览器可以存储虚拟字符串而不是实际密码

0
投票

虽然上面给出的解决方案是非常正确的，但如果您绝对需要该功能，那么您可以使用text-field和javascript来模拟自定义输入的情况。

为了安全使用，您可以使用任何加密技术。因此，这样您就可以绕过浏览器的密码保存行为。

如果您想了解更多有关这个想法的信息，我们可以在聊天中讨论这个问题。但上面讨论了要点，你可以得到这个想法。

0
投票

试试这可能对你有所帮助，欲了解更多信息，请访问Input type=password, don't let browser remember the password

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">
0
投票

一种方法是生成随机输入名称并使用它们。

这样，浏览器每次都会显示new表单，并且无法预先填充输入字段。如果您向我们提供一些示例代码（您是否有js spa应用程序或某些服务器端呈现），我很乐意帮助您实施。

问候，

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.