Html 如何防止浏览器存储密码

Question

提问by Sree

I need to stop browsers from storing the username & password values, because I'm working on a web application which contains more secure data. My client asked me to do this.

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

I tried the autocomplete="off"attribute in the HTML form & password fields. But it is not working in the latest browsers like Chrome 55, Firefox 38+, IE 11...etc.

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

What is the best solution for this?

什么是最好的解决方案？

Answer 1

采纳答案by Sree

Thank you for giving a reply to me. I followed the below link

谢谢你给我答复。我按照下面的链接

Disable browser 'Save Password' functionality

禁用浏览器“保存密码”功能

I resolved the issue by just adding readonly& onfocus="this.removeAttribute('readonly');"attributes besides autocomplete="off"to the inputs as shown below.

我通过在输入之外添加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');" >

This is working fine for me.

这对我来说很好用。

Answer 2

回答by 4castle

This is not possible in modern browsers, and for good reason. Modern browsers offer password managers, which enable users to use stronger passwords than they would usually.

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

As explained by MDN: How to Turn Off Form Autocompletion:

正如MDN所解释的：如何关闭表单自动完成：

Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.
Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.
Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.
For this reason, many modern browsers do not support autocomplete="off"for login fields:
If a site sets autocomplete="off"for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
If a site sets autocomplete="off"for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
If an author would like to prevent the autofilling of password fields in user management pages where a user can specify a new password for someone other than themself, autocomplete="new-password"should be specified, though support for this has not been implemented in all browsers yet.

现代浏览器实现了集成的密码管理：当用户输入网站的用户名和密码时，浏览器会为用户记住它。当用户再次访问该站点时，浏览器会使用存储的值自动填充登录字段。
此外，浏览器允许用户选择主密码，浏览器将使用该密码来加密存储的登录详细信息。
即使没有主密码，浏览器内密码管理通常也被视为安全的净收益。由于用户不必记住浏览器为他们存储的密码，因此他们可以选择比其他方式更强的密码。
出于这个原因，许多现代浏览器不支持autocomplete="off"登录字段：
如果站点设置autocomplete="off"了一个表单，并且该表单包含用户名和密码输入字段，那么浏览器仍然会记住这次登录，如果用户同意，浏览器将在用户下次访问该页面时自动填充这些字段。
如果站点设置autocomplete="off"了用户名和密码输入字段，那么浏览器仍会提供记住此登录信息，如果用户同意，浏览器将在用户下次访问该页面时自动填充这些字段。
这是 Firefox（自版本 38）、Google Chrome（自 34）和 Internet Explorer（自版本 11）中的行为。
如果作者想阻止在用户管理页面中自动填充密码字段，用户可以在其中为自己以外的人指定新密码，autocomplete="new-password"则应指定，尽管尚未在所有浏览器中实现对此的支持。

Answer 3

回答by Natro90

Here is a pure HTML/CSSsolution for Chrometested in Version 65.0.3325.162 (Official Build) (64-bit).

这是在版本 65.0.3325.162 (Official Build) (64-bit) 中测试的Chrome纯HTML/CSS解决方案。

Set the input type="text"and use CSStext-security:discto mimic type="password".

设置输入type="text"并使用CSStext-security:disc来模仿type="password".

<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">

Note: Works in FireFoxbut CSSmoz-text-securityis Deprecated/Removed. To fix this create a CSSfont-facemade only of dots and use font-family: 'dotsfont';.
Source: Get input type=text to look like type=password
The Source above contains a link to a work-around for CSSmoz-text-securityand -webkit-text-securityproperty.
Source: https://github.com/kylewelsby/dotsfont
As far as i have tested this solution works for Chrome, FireFox Version 59.0 (64-bit), IE Version 11.0.9600aswell as the IE Emulators ie5and greater.

注意：适用于FireFox，但CSSmoz-text-security已弃用/删除。要解决此问题，请创建一个仅由点组成的CSSfont-face并使用font-family: 'dotsfont';.
来源：让输入类型=文本看起来像类型=密码
上面的 Source 包含指向CSSmoz-text-security和-webkit-text-security属性变通方法的链接。
来源：https: //github.com/kylewelsby/dotsfont
据我测试，此解决方案适用于Chrome、FireFox 版本 59.0（64 位）、IE 版本 11.0.9600以及IE Emulators ie5及更高版本。

Answer 4

回答by Simon Briggs

You should be able to make a fake hidden password box to prevent it.

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

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

Answer 5

回答by Gaurav Singh

By default there is not any proper answer to disable saving password in your browser. But luckily there is a way around and it works on almost all the browsers.

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

To achieve this add a dummy input just before the actual input with autocomplete="off" and some custom styling to hide it and providing tabIndex. Browser's(Chrome) autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.

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

Answer 6

回答by Andrew Andrew

< 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');
  });
}

Answer 7

回答by Ivan Moran

This worked for me:

这对我有用：

<form action='/login' class='login-form' autocomplete='off'>
  User:
  <input type='user' name='user-entry'>
  <input type='hidden' name='user'>

  Password:
  <input type='password' name='password-entry'>
  <input type='hidden' name='password'>
</form>

Answer 8

回答by CubicleSoft

I needed this a couple of years ago for a specific situation: Two people who know their network passwords access the same machine at the same time to sign a legal agreement. You don't want either password saved in that situation because saving a password is a legal issue not a technical one where both the physical and temporal presence of both individuals is mandatory. Now, I'll agree that this is a rare situation to encounter, but such situations do exist and built-in password managers in web browsers are unhelpful.

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

My technicalsolution to the above was to swap between passwordand texttypes and make the background color match the text color when the field is a plain text field (thereby continuing to hide the password). Browsers don't ask to save passwords that are stored in plain text fields.

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

jQuery plugin:

jQuery 插件：

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

Relevant source code from the above link:

来自上述链接的相关源代码：

(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));

Demo:

演示：

https://barebonescms.com/demos/admin_pack/admin.php

Click "Add Entry" in the menu and then scroll to the bottom of the page to "Module: Stop Password Manager".

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

Answer 9

回答by HirenMangukiya

try this it may be help you, for more information visit 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">

Answer 10

回答by HirenMangukiya

One way would be to generate random input names and work with them.

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

This way, browsers will be presented with the newform each time and wont be able to pre-populate the input fields. If you provide us with some sample code (do you have a js spa app or some server side rendering) i would be happy to help you in the implementation.

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

Regards,

问候，

Html 如何防止浏览器存储密码

提问by Sree

采纳答案by Sree

回答by 4castle

回答by Natro90

回答by Simon Briggs

回答by Gaurav Singh

回答by Andrew Andrew

回答by Ivan Moran

回答by CubicleSoft

回答by HirenMangukiya

回答by HirenMangukiya

相关推荐

最近更新

标签

Html 如何防止浏览器存储密码

提问by Sree

采纳答案by Sree

回答by 4castle

回答by Natro90

回答by Simon Briggs

回答by Gaurav Singh

回答by Andrew Andrew

回答by Ivan Moran

回答by CubicleSoft

回答by HirenMangukiya

回答by HirenMangukiya

相关推荐

Html 使用 HTML5 和 JavaScript 从视频中捕获帧

在 HTML 中创建只有底部边框的表格

Html IE8 CSS 旋转

Html 查找 Slack 团队 ID 和频道 ID 的最简单方法是什么？

相关推荐

最近更新

标签