如何制作HTML登录表单让Chrome识别同域名下不同服务登录凭证不通用

方法1：使用autocomplete的section-*前缀（优先推荐） #

这是W3C HTML标准中专门用于区分同域名下不同业务场景表单的方案，Chrome 86及以上版本均原生支持。
你只需要给不同服务的登录表单中，账号、密码输入框的autocomplete属性加上不同的section-前缀即可：

• phpMyAdmin登录页的输入框配置（可修改phpMyAdmin模板实现）：

<input type="text" name="username" autocomplete="section-phpmyadmin username">
<input type="password" name="password" autocomplete="section-phpmyadmin current-password">

• 新增独立服务的登录页输入框配置：

<input type="text" name="username" autocomplete="section-yournewservice username">
<input type="password" name="password" autocomplete="section-yournewservice current-password">

该配置会明确告知Chrome密码管理器，两类表单属于完全独立的业务分区，凭证需要分开存储和匹配，不会出现跨服务填充的问题。

方法2：自定义差异化的表单字段属性 #

如果不方便修改autocomplete属性，你可以给不同服务的登录表单的账号、密码输入框设置完全不同的name和id属性，不要全用通用的username、password：

• 比如phpMyAdmin默认的字段名是pma_username、pma_password
• 你的新服务可以设置为svc_user、svc_pass
  Chrome的密码匹配逻辑会结合字段名做校验，差异化的字段名可以大幅降低凭证混淆的概率。

方法3：区分HTTP认证领域（仅适用于HTTP Basic Auth场景） #

如果你用的是HTTP Basic Auth做登录验证，只需要给不同服务设置不同的realm（认证领域）参数，浏览器会自动按域名 + realm的组合独立存储凭证，完全不会出现混淆。

方法4：二级域名区分（最稳妥方案） #

如果你的部署条件允许，给不同服务分配独立的二级域名（比如pma.example.com、newservice.example.com），浏览器默认按二级域名作为凭证隔离边界，无需额外修改代码即可实现完全独立的密码存储。

内容的提问来源于stack exchange，提问作者Anders Karlsson