如何防止在网页浏览器中保存登录页面的凭据

Question

我正在寻找一些解决办法，以禁用在填写完表单后在Web浏览器中保存凭据的功能。我已经找到了几个解决方案，但其中没有一个能在所有浏览器中都工作（所有解决方案都比较老，作者是在旧版浏览器中测试这些“技巧”的）。我已经在Chrome，FF，Opera和IE（当前版本）上进行了测试。在大多数情况下只有FF存在问题，它总是想要保存凭据。有人可以帮我吗？

以下是一些适用于除FF之外所有浏览器的解决方案。

<form action="test.php"  method="post" autocomplete="off">
  Username:
  <input type="text" name="username" autocomplete="off" readonly 
   onfocus="this.removeAttribute('readonly');" >
  Password:
  <input type="password" name="password" autocomplete="off" readonly 
  onfocus="this.removeAttribute('readonly');" >
  <input type="submit" value="Login">
</form> //works for Chrome, IE, Opera; doesn't work FF.

2.)

 <form action="test.php"  method="post" autocomplete="off">
    <div style="display:none">
        <input type="password" tabindex="-1"/>
      </div>
      Username:
     <input type="text" name="username" placeholder="username"/>
    Password:  
    <input type="password" name="password" placeholder="password"/>
      <input type="submit" value="Login">
    </form> //works for Chrome, IE, Opera; doesn't work FF.

3.)

<form action='test.php' class='login-form' autocomplete='off'>
  Username:
  <input type='user' name='username'>
  <input type='hidden' name='user'>

  Password:
  <input type='password' name='password'>
  <input type='hidden' name='password'>
</form> //works for Chrome, IE, Opera; doesn't work FF.

4.)

    <form action="test.php"  method="post" autocomplete="off">
  Username:
  <input type="text" name="username" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
   onfocusout="this.setAttribute('readonly','readonly');" >

  Password:
  <input type="password" name="password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
  onfocusout="this.setAttribute('readonly','readonly');" >
  <input type="submit" value="Login">
</form> //works for Chrome, IE, Opera; doesn't work FF.

5.)

 Username: 
<input type="text" id="username" name="username"/>
 Password:
<input type="password" id="password" name="password"/>


<form id="theForm" action="test.php" method="post">
  <input type="hidden" id="hiddenUsername" name="username"/>
  <input type="hidden" id="hiddenPassword" name="password"/>
  <input type="submit" value="Login"/>
</form>


<script type="text/javascript" language="JavaScript">
  $("#theForm").submit(function() {
    $("#hiddenUsername").val($("#username").val());
    $("#hiddenPassword").val($("#password").val());
  });
  $("#username,#password").keypress(function(e) {
    if (e.which == 13) {
      $("#theForm").submit();
    }
  });
</script>

- lkip912

---

你好，欢迎来到Stackoverflow。请进一步说明你已经尝试过哪些解决方案。也许结合起来能解决你的问题？ - Lumnezia

这个回答解决了你的问题吗？如何在Chrome中禁用保存密码提示。 - Pushprajsinh Chudasama

@BhavikKalariya 谢谢，它有效。但是我想问一下，你提到的线程中提供的解决方案是否安全？<input type="text" id="password" style="-webkit-text-security: disc;"/> - lkip912

@BhavikKalariya，好的，我刚刚将FF从版本71更新到72。密码在版本72中没有隐藏，它显示为普通文本。 - lkip912

Answer 1

在第一个解决方案中，您需要添加：

：

onfocusout="this.setAttribute('readonly','readonly');"

- A.Baudouin

---

我应该把它添加到哪里？ - lkip912

在两个输入框（用户名和密码）上添加onfocus。 - A.Baudouin

谢谢你的回答。我已经尝试了，也编辑了我的问题。请检查第四个解决方案是否正确。在火狐浏览器中仍然无法正常工作。 - lkip912

Answer 2

你尝试过使用：

<form autocomplete="off"> 
  <input type="text" id="username" autocomplete="none"/> 
  <input type="text" id="password" autocomplete="none"/>
</form>

或者您可以尝试使用这个jQuery插件。https://terrylinooo.github.io/jquery.disableAutoFill/

这是Mozilla网站上列出的另一种选择。mozilla site。

- Deckerz

---

第一种解决方案 - 密码不隐藏。我会尝试查看你提到的jQuery插件。 - lkip912

Answer 3

你可以使用JavaScript拦截提交过程并通过AJAX发送详细信息，一旦收到响应就重定向，这样可以防止浏览器存储凭据，代码可能如下（使用jQuery）：

<script type="text/javascript">
$(document).on("ready", function(){
    $("form").on("submit", function(){
        var action = $(this).attr("action");
        var username = $(this).find("[name=username]").val();
        var password = $(this).find("[name=password]").val();
        $.post(action, {username: username, password: password}, function(response){
            if(response=="ok"){
                // go to logged in page
            }else{
                //present error
            }
        });
        return false;
    });
});
</script>

假设成功登录后来自 test.php 的响应为 ok

- Bloafer