如何让Chrome浏览器在HTTPS站点下提示保存并自动填充登录密码

前置检查 #

• 首先确认当前https://localhost:port/xxxxx站点在Chrome地址栏左侧显示为安全锁标识，无「不安全」警告。Chrome不会在被标记为不安全的HTTPS站点触发密码保存逻辑。

具体解决步骤 #

1. 证书问题修复（优先操作） #

本地自签名HTTPS证书默认不被Chrome信任，两种修复方案：

• 永久方案：打开chrome://settings/security，进入「管理证书」页面，将本地自签名证书导入到「受信任的根证书颁发机构」分组，重启Chrome后站点即可显示安全标识。
• 临时测试方案：打开chrome://flags/#allow-insecure-localhost，将选项设置为Enabled后重启Chrome，Chrome会默认信任所有localhost下的HTTPS站点，无需校验证书有效性。

2. 表单属性校验 #

HTTPS环境下Chrome对自动填充/密码保存的表单规则远严格于HTTP环境，需确认表单符合以下要求：

• 用户名输入框添加autocomplete="username"属性，密码输入框添加autocomplete="current-password"（登录场景）或autocomplete="new-password"（注册/改密场景）属性，禁止给任意输入框设置autocomplete="off"。
• 必须用原生<form>标签包裹所有账号密码输入框，提交行为优先走原生submit事件。如果使用AJAX提交，不要完全阻止submit的默认事件，或者提交后返回302跳转（跳转至同站点任意页面即可，包括当前页）。
• 提交表单后不要立即清空账号密码输入框，至少延迟300ms再执行清空逻辑，避免Chrome还未读取输入值就被清空，无法触发保存提示。

3. Chrome密码设置校验 #

打开chrome://settings/passwords，下拉到「不保存密码」列表，确认https://localhost:port没有被加入屏蔽列表，如有则删除对应条目即可。

4. 响应头校验 #

确认站点没有返回以下会干扰密码识别的响应头：

• 没有在Content-Security-Policy的form-action指令中限制表单提交地址
• 没有自定义Autofill: off类的私有响应头

内容的提问来源于stack exchange，提问作者Godnyl Pula