防止自动填充所有浏览器的密码



Chrome和Firefox忽略了标准的autocomplete="关闭";属性,因为他们(谷歌)觉得它没有被正确使用。他们甚至想出了变通办法和自己的一组自动填充字段的值。

然而,我们需要防止我们正在开发的网站的用户密码被自动填充,谷歌提出的建议似乎都不起作用。

我们网站上的当前情况是,登录名和密码由浏览器存储,因此,当用户访问网站并被迫登录时,他们的用户名和密码会预先填充在相关字段中,他们只需单击登录按钮即可登录。

这被认为是不安全的,虽然infosec团队很高兴用户名被预先填充,但他们坚持认为密码字段不是。

首先,我尝试添加autocomplete=";关闭";属性,但密码仍然是预先填充的。经过一些谷歌搜索,我发现了这个链接,显示谷歌决定忽略这个值,并为自动完成属性列出了自己的值。。。

谷歌忽略自动完成=";关闭";

他们指出,如果我们添加自己的未识别值(例如自动填写="请不要自动填写我"),如果不应该自动填写,因为它不知道该值的用途。

然而,我添加了一些更有意义的东西-自动完成=";非填充值"-而且它仍然占据了这个领域。此后,我尝试了许多其他方法,例如重命名密码输入控件(从控件名称中删除单词"password")等,但似乎都不起作用。每次加载登录页面时,都会预先填充密码。

我遇到的问题是,当来自世界各地的不同用户登录时,我的登录表单将加载在多个浏览器上,我需要一个适用于所有浏览器的解决方案,而不仅仅是Chrome。

有人有这方面的经验吗?有一个有效的解决方案可以防止字段被预填充/自动填充,可以跨浏览器工作吗?我所尝试的一切(重命名字段、添加隐藏字段、设置模糊的自动完成属性值)都失败了,无论我尝试什么,密码都是预先填充的。

显然,我无法控制用户的实际浏览器设置,也不能强迫他们全部更改自己的个人设置。

新方法

我知道尝试所有解决方案,却看到用户和密码字段忽略它们是多么令人沮丧。

不幸的是,我还没有找到一种简单的方法来做到这一点,但我有一个解决方法来避免用户密码字段被自动填充。

问题

主要的问题是,如果设置输入类型="0";密码";,浏览器会自动尝试用保存的密码和用户自动填充该字段,但似乎没有什么能阻止它。

解决方案

我的方法是避免设置输入类型="0";passoword";,但是使字段看起来像密码字段。

我发现实现这一点的方法是构建一个仅由光盘组成的字体,因此当你在输入字段中键入任何内容时,它看起来像是一个密码字段,但永远不会提示你保存的用户和密码凭据。

我已经在Chrome、Firefox和Microsoft Edge上测试了这个解决方案,如果其他浏览器有问题,请告诉我。

我知道这个解决方案很糟糕,但似乎奏效了。

字体链接,由我使用font Forge制作:https://drive.google.com/file/d/1xWGciDI-cQVxDP_H8s7OfdJt44ukBWQl/view?usp=sharing

示例

浏览器将不会填充输入元素,因为它们中没有一个是type="0";密码";

将.ttf文件放在创建以下html文件的同一目录中:

<!DOCTYPE html>
<html>
<head>
<title>Font Test</title>
</head>
<body>
<span>Name: </span><input type="text"/>
<span>Password: </span><input class="disk-font" type="text"/>       
</body>
<style>
@font-face {
font-family: disks;
src: url(disks.ttf);
}
.disk-font{
font-family: disks;
}
</style>
</html>

希望这是有帮助的,请随时评论任何问题。

正如这篇MDN文章中所解释的,密码自动填充将忽略autocomplete="off",但autocomplete="new-password"可能会起作用,尽管它携带了额外的语义信息:

如果您正在定义一个用户管理页面,用户可以在该页面上为另一个人指定新密码,因此您希望阻止自动填充密码字段,则可以使用autocomplete="new-password"

这是一个提示,浏览器不需要遵守。然而,现代浏览器已经停止使用autocomplete="自动填充"来自动填充元素;"新密码";正是出于这个原因。例如,Firefox版本67(参见错误1119063)在这种情况下停止了自动填充;然而,Firefox 70(参见错误1565407)可以建议安全生成密码,但不能自动填充保存的密码。有关更多详细信息,请参阅自动完成兼容表。

事实上,我最近遇到了这个问题,一个对我有效的解决方法只是将值设置为方法上的空字符串(可以是onload,例如,如果输入在主屏幕中)。可能类似于:

let login = document.querySelector('#inputLogin');
let password = document.querySelector('#inputPassword');
function someFun () {
login.value = '';
password.value = '';
}

此外,我已经尝试过放置autocomplete="false",但没有成功。

最新更新