如何通过 JavaScript 禁用 Chrome 的已保存密码提示设置

Question

有没有办法借助 JavaScript 或 jQuery 来操作 Chrome 设置？我想使用 JavaScript 禁用保存密码弹出气泡。如何做到这一点？

Answer 1

还有另一种方法可以做到这一点。我认为它适用于所有框架。 由于我在Java Spring Boot中已经解决了，所以我先给出Java Spring Boot项目的解决方案。

您可以使用 autocomplete="off" 属性关闭自动完成功能。但在许多现代浏览器中，此属性不会产生任何影响。所以，在这种情况下，如果我们在输入字段下再使用一个东西，那么这个问题就可以解决了。

    <input type="text" readonly id="username" name="username">

在 Spring Boot 中我们应该这样写：

    <html:text property="username" styleId="username" readonly="readonly"></html:text>

现在，通过编写 readonly，我们禁用了保存提示。我们还必须使用 "text" 作为密码类型。所以，它会是这样的：

    <input type="text" readonly id="password" name="password">
    <html:text property="password" styleId="password" readonly="readonly"></html:text>

但这会使密码字段可见。我们需要在密码字段中显示 "********"。为此，我们将使用一个棘手的方法，即我们将使用一种使每个字符看起来像小点的字体。所以，我们需要改成css内容。

从here 下载“security-disc”字体文件/图像。在 Spring Boot 中，下载“security-disc”字体/图像文件，然后在 WEB-INF/fonts 下的 WebContent 中定义字体文件，在 WEB-INF/images 下定义字体图像>.

<style>
 
@font-face {
    font-family: 'text-security-disc';
    src: url('../WEB_INF/fonts/text-security-disc.eot');
    src: url('../WEB_INF/fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
        url('../WEB_INF/fonts/text-security-disc.woff') format('woff'),
        url('../WEB_INF/fonts/text-security-disc.ttf') format('truetype'),
        url('../WEB_INF/images/text-security-disc.svg#text-security') format('svg');
}
 
input.password {
    font-family: 'text-security-disc';
    width:15%;
    margin-bottom:5px
}
</style>

如果找不到您的目录路径，您可以使用

URL('<%=request.getContextPath()%>/WEB-INF/fonts/text-security-disc.eot');

方法二： 我们可以用来删除密码的另一种方法，以及表单中的其他值。这些值以 cookie 的形式存储在浏览器中，因此如果 cookie 被删除，那么密码以及其他值也会被删除。所以我们只需要添加一个函数来删除cookies。

<script type="text/javascript"> 
    function savePass() { 
        passVal = "password = " 
            + escape(document.Frm.passWord.value) 
            + ";"; 

        document.cookie = passVal 
            + "expires = Sun, 01-May-2021 14:00:00 GMT"; 

        document.getElementById("show").innerHTML = 
            "Password saved, " + document.cookie; 
    } 
    function dltPass() { 
        document.cookie = passVal 
            + "expires = Sun, 01-May-2005 14:00:00 GMT"; 
            // Set the expiration date to  
            // removes the saved password 

        document.getElementById("show").innerHTML = 
            "Password deleted!!!"; 
        // Removes the password from the browser 

        document.getElementById("pass").value = ""; 
        // Removes the password from the input box 
    } 
</script> 

在这里，我们在 dltPass 函数中添加了较旧的到期日期。因此，cookie 将被视为过期并被删除。

最后，防止浏览器记住密码的另一种最简单的方法是使用 autocomplete="new-password"。这样，浏览器将在以任何形式填写密码字段时给出随机密码建议。所以实际的密码不会保存在浏览器中。

Answer 2

使用 Ajax

                $.post("process.php", {
                    user: txtuser,
                    pass: txtpass
                }, function(data) {
                    //alert(data);
                    async: true //blocks window close
                    //location.reload();
                    //OR
                    //window.location.href = "your link";
                });

Answer 3

通过将type="button" 属性添加到启动事件的<button>，我已经成功阻止了此弹出窗口。

我已经理解浏览器伴随着“你想保存这个登录吗？”任何表单提交的弹出窗口，但即使使用<form> 之外的按钮，我也会收到此弹出窗口。我猜是因为默认的按钮是<button type="submit">，在某种程度上点击它会被识别为表单提交，即使你没有在<form>中使用它。

在最新版本的 Firefox、Chrome、Edge 中测试。

Answer 4

适用于 Chrome 和 Firefox 2018

仅当您使用 AJAX 时：

检查登录名和密码是否正确后，清除密码输入框：

$.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
   if (data == "auth is ok"){
     // clear password field
     $("#password").val(''); // <-- this will prevent browser to save password
   }
});

Answer 5

此方法在 chrome 和 mozilla 中适用于我，在我的项目中使用此方法：

<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">

在您的输入类型中添加onfocus="this.removeAttribute('readonly');"，之后它不会记住任何保存的密码。

Answer 6

我想我找到了粗略的，但防止浏览器保存密码提示的工作方法。这可能不是很漂亮的解决方案，但它对我有用。

使用 jQuery 制作。

希望对你有帮助。

$('#modified span').on('click', function(e){
  e.preventDefault();
  $('#modified').submit();
});


//Clear the form on submit
$('form').on('submit', function(){
  $('form input[type="text"], form input[type="password"]').val('');
});

#modified input[type="submit"]{
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form>
  <h1>Browser IS asking to save password</h1>
  
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <input type="submit" value="Submit"/>
</form>

<form id="modified">
  <h1>Browser IS NOT asking to save password</h1>
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <span>
    <input type="submit" value="Submit"/>
  </span>
</form>

Answer 7

现在我要回答我自己的问题。

它可以在 chrome 和 Mozilla fire fox 中完成。

对于 Chrome

首先你必须删除输入类型的属性“密码”。

这背后的主要原因是当你输入输入类型=“文本”和输入类型=“密码”主要浏览器显示弹出。因为浏览器具有内置功能，可以在您输入 type = "password" 时显示弹出窗口。

现在我们可以从中操作 chrome。

这是一个例子

<html>
<head>
   <title> Remove Save Password Pop Up For Chrome </title>
   <style>
       #txtPassword{
           -webkit-text-security:disc;
       }
   </style>
</head>
<body>
   <input type="text" id="txtUserName" />
   <br />
   <input type="text" id="txtPassword" />
   <br />
</body>
</html>

这是用于将文本更改为项目符号的 css 属性。

对于 Mozilla

您不能在 Mozilla 中执行此操作。因为 -moz-text-security 已过时。它在 Mozilla 中不起作用。

但我们也可以操纵 Mozilla。

现在所有主流浏览器都支持的 html 中的字符代码列表。

从那个符号的字符代码是'•'。当您在 html 中编写此代码时，它将像这样打印项目符号“•”

现在我们可以用这些项目符号替换文本字段

但这有一个限制。您不能在文本框中打印项目符号。但也有解决该限制的方法。因为在编程世界中一切皆有可能。

针对这个限制，我们可以制作 fake div，在您输入密码时显示项目符号。

这是一个例子。

<html>
<head>
  <title> Remove Save Password Pop Up For Mozilla </title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
  <script>
      function RemoveSavedPassword() {
         if (jQuery.browser.webkit == undefined) {
             inputValue = $('.real-input').val();
             numChars = inputValue.length;
             showText = "";
        for (i = 0; i < numChars; i++) {
            showText += "&#8226;";
        }
        $('.fake-input').html(showText);
    }
 }
  </script>
</head>
<body>
    <div class="input-box">
       <label>Enter password:</label>
       <div class="fake-input"></div>
       <input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
    </div>
</body>
</html>

现在有了 CSS 的魔力。魔术意味着我们可以操纵用户的边距、填充、不透明度和位置属性的力量。

这是链接：

http://codepen.io/jay191193/pen/bVBPVa

安全问题

对于 input type="text" 而不是 input type="password" 的安全问题，您可以访问此链接：

Security issue of changing type="password" into type="text"

Answer 8

没有办法直接从 JavaScript 更改 Chrome 设置，因此以下答案将重点介绍如何防止该对话框出现在特定 HTML form。

---

据我所知，没有什么好方法可以做到这一点 - 根据我的阅读，HTML5 autocomplete="off" 属性在 Chrome 中被忽略，因此即使你提供了它也会提示保存密码属性。

但有一个解决方法 - 如果您将 password 字段设置为只读，直到它获得焦点，Chrome 将不会提示保存凭据。不幸的是，我所知道的没有好的干净的解决方案，所以这就是我发布的解决方案有点老套的原因。

请在 Chrome 中查看 JSFiddle 并尝试提交每个表单以查看实际的解决方案（每次提交后都需要重新加载 fiddle）：https://jsfiddle.net/g0e559yn/2/

完整代码：

/* Chrome does not ask to save the password from this form */

<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>

/*Chrome asks to save the password from this form */

<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>