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

标签 html autocomplete

有据可查的是,Chrome 和 Firefox 会忽略 html 中的标准 autocomplete="off"属性,因为它们(Google)认为该属性没有被正确使用。他们甚至提出了解决方法和自己的自动填充字段值集。

但是,我们需要防止我们正在开发的网站自动填充用户密码,而 Google 提出的所有建议似乎都不起作用。

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

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

首先,我尝试将 autocomplete="off"属性添加到密码字段,但密码仍然是预先填充的。经过一番谷歌搜索后,我发现这个链接显示 Google 决定忽略这个值,并为自动完成属性提供了他们自己的值列表...

Google ignores autocomplete="off"

他们指出,如果我们添加自己的、无法识别的值(例如 autocomplete="please-dont-auto-fill-me"),则不应自动填充,因为它不知道该值的用途。

但是,我添加了一些更有意义的内容 - autocomplete="non-filled-value"- 并且它仍然填充了该字段。此后我尝试了许多其他方法,例如重命名密码输入控件(从控件名称中删除“密码”一词)等,但似乎没有任何效果。每次加载登录页面时,都会预先填充密码。

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

有谁有这方面的经验,并且有一个可行的解决方案来防止字段被预填充/自动填充,并且可以跨浏览器工作?我尝试过的所有方法(重命名字段、添加隐藏字段、设置晦涩的自动完成属性值)都无法正常工作,并且无论我尝试什么,密码都会预先填充。

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

最佳答案

新方法

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

不幸的是,我还没有找到一种简单的方法来执行此操作,但我有一个解决方法来避免自动填充用户密码字段。

问题

主要问题是,如果您设置输入类型=“密码”,浏览器会自动尝试使用网络应用程序保存的密码和用户自动填充该字段,并且似乎没有任何方法可以阻止它。

解决方案

我的方法是避免设置 input type="passoword",而是使该字段看起来像密码字段。

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

我已在 Chrome、Firefox 和 Microsoft Edge 上测试了此解决方案,请告诉我其他浏览器是否有问题。

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

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

示例

浏览器不会填写输入元素,因为它们都不是 type="password"

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

希望这对您有所帮助,如有任何问题,请随时发表评论。

关于html - 防止所有浏览器自动填充密码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63792397/

相关文章:

javascript - 通过 $(document).ready 传递范围

HTML 上的 Javascript 输入和输出

html - 消除 DIV 元素中的 overflow-y 跳转

Jquery 传递复选框值

Angular Material 自动完成 - 如何显示所选对象的指定属性

javascript - 抑制 <img> html 标签上的 404 图像未找到错误

安卓html解码

Django - 具有自动完成功能的 Javascript 动态内联 FormSet

search - 在 Liferay DXP 7 中自定义搜索 Portlet

javascript - 自动完成在我的 asp.net mvc 中不显示任何 CSS