对于现代浏览器,是否可以真正禁用密码字段的自动填充和自动填充功能?

时间:2019-06-26 10:16:45

标签: html css angular typescript cross-browser

在现代浏览器中,自动填充和自动完成的标准是完全忽略autocomplete="off"中放置在form中的密码字段。并插入保存的密码,即使它位于用户管理页面中也是如此。尽管原因出在正确的地方,但这使创建用户管理页面非常麻烦。

我的团队的Web应用程序以angular 7运行,目前仅支持chrome。但是我们很有可能需要支持其他浏览器,例如Internet Explorer,Edge,Firefox等。

我知道这是一个深受感动的主题,并且我可以找到很多问题,并且答案都与此问题类似(like thisor this)。但是到目前为止,我发现的每个解决方案都有至少一个大缺陷。

到目前为止我在chrome上尝试过的东西

1)使用autocomplete="new-password"

对于type="password",铬/铬开发人员似乎也忽略了这一点。

2)对星号字体系列使用type="text" autocomplete="new-password"

这会禁止Chrome自动填充输入字段并隐藏字母。但是最大的缺点是它的价值仍然存在,并且可以复制粘贴到其他字体系列中。输入字段也失去了type="password"的安全性,任何黑客都可以轻松获得该值。

3)使用-webkit-text-security

这与以前的解决方案几乎相同,但这甚至不是CSS标准,并且很少有浏览器支持它。

4)将值替换为*

这是我到目前为止尝试过的最棘手的解决方案。输入值更改后,我在打字稿中调用一个函数:将新字符添加到本地字符串,将DOM值更改为*等于字符数,在(blur)上返回本地保存的值。

这给我留下了很多问题要处理,包括:删除字符串中的任何字符都会始终删除最后一个字符,除了最后一个问题以外,即使值被完全删除,第一个字符也将始终保持不变,必须知道字符串中要删除字符的位置。

此解决方案不理想。

5)在浏览器设置中禁用域密码管理

这确实不是解决问题的方法,因为这意味着我希望用户关闭域的密码管理。还会导致许多用户可能需要的密码无法保存在登录页面上。

6)随机化[name][autocomplete]

通过一种将所述值绑定到基于当前时间的随机字符串的方法,我可以确保密码字段与浏览器保存的任何字段都不匹配。尽管许多人报告说这在所有浏览器之间都有效,但使用chrome时似乎根本不适合我。对于我来说,只要输入的是type="password",Chrome就会显示推荐的密码。


到目前为止我所看到的解决方案:

1)使用两个输入字段

在我看来,这与我自己的解决方案4)相同。并且可能会同样麻烦。

2)使用jQuery禁用自动填充插件

这似乎与我要寻找的非常接近,但问题是它使用jQuery。我只能说我被告知我们没有使用jQuery,而且我可能将无法直接使用该插件。

我目前正在寻找一种使用角度实现此方法的方法,希望在此方面获得任何帮助或指导。


如果您知道我上面没有提到的任何解决方案,请发布答案或在评论中给我链接。

1 个答案:

答案 0 :(得分:1)

到目前为止,我找到的最佳解决方案是在密码字段上使用type="text",并在表单及其中的每个输入字段上使用autocomplete="off"

不过,我不会将其标记为答案,因为它仍然存在失去type="password"安全功能的巨大缺陷。文本字段还允许使用spellcheck="false"禁用拼写检查。但是我已经读到,可以用浏览器设置覆盖它。

在提出更好的解决方案之前,这个问题将一直没有得到解决。