某些网站即使未设置`autocomplete=”off”`，也可能导致密码自动填充功能失效，这通常是由于输入字段缺少关键的`name`属性所致。本文将深入探讨浏览器自动填充的识别机制，并提供一个使用tampermonkey/greasemonkey用户脚本来恢复自动填充功能的实用解决方案，通过动态添加缺失的`name`属性来纠正此问题。
浏览器自动填充机制解析
现代浏览器为了提升用户体验，普遍提供了表单自动填充功能，尤其是在登录页面。当用户首次在一个网站输入用户名和密码并成功登录后，浏览器通常会询问是否保存这些凭据，以便下次访问时自动填充。然而，这一功能的实现并非仅仅依赖于autocomplete属性。
浏览器在识别哪些输入字段应该被自动填充时，会综合考虑多个html属性，包括：
- name 属性： 这是最关键的识别依据之一。浏览器通常会根据name属性的值（如username、password、email等）来判断字段的类型。即使没有autocomplete属性，只要name属性命名得当，浏览器也能很好地识别。
- id 属性： 作为字段的唯一标识，id属性在某些情况下也能辅助浏览器识别字段类型，尤其是在结合其他上下文信息时。
- type 属性： type=”password”明确指示这是一个密码字段，对于浏览器识别密码输入至关重要。
- autocomplete 属性： 尽管不是唯一因素，但autocomplete属性（如autocomplete=”username”、autocomplete=”current-password”或autocomplete=”off”）可以直接指示或禁止自动填充。
- 表单结构和上下文： 浏览器还会分析
当一个网站的密码输入框没有autocomplete=”off”，但自动填充依然失效时，最常见的原因就是其元素缺少了对浏览器至关重要的name属性。
自动填充失效的常见原因
除了开发者明确设置autocomplete=”off”外，以下是导致自动填充失效的常见原因：
- 缺少 name 属性： 这是本教程主要关注的问题。许多现代前端框架（如angular, react, vue）在生成表单时，可能更依赖于内部的formcontrolname或其他自定义属性来管理表单状态，而忽略了标准的name属性。当name属性缺失时，浏览器难以识别字段类型。
- 动态加载的表单： 对于单页应用（SPA）或通过javaScript动态加载的表单，浏览器可能在页面加载初期无法捕获到所有字段，导致自动填充失效。
- autocomplete 属性设置不当： 尽管本例中未出现，但autocomplete=”new-password”或autocomplete=”one-time-code”等特定值也可能干扰常规的密码填充。
- type 属性被篡改： 有些网站可能会为了某种目的，将密码输入框的type属性设置为text，然后通过javascript在用户输入时切换回password，这也会混淆浏览器。
- 浏览器自身设置或扩展冲突： 用户在浏览器偏好设置中禁用了特定网站的自动填充，或者安装的浏览器扩展与自动填充功能发生冲突。
使用Tampermonkey/Greasemonkey恢复自动填充
当网站开发者未提供name属性导致自动填充失效时，我们可以利用Tampermonkey或Greasemonkey等用户脚本管理器，通过JavaScript动态地向输入字段添加缺失的name属性，从而欺骗浏览器使其重新识别并启用自动填充。
步骤一：识别目标输入字段
首先，我们需要通过浏览器的开发者工具（F12）检查目标网站的HTML结构，找到密码输入框的唯一标识。根据提供的HTML片段：
<input type="password" id="mat-input-1" class="mat-input-element mat-form-field-autofill-control ng-tns-c57-2 ng-pristine ng-invalid cdk-text-field-autofill-monitored ng-touched" matinput="" formcontrolname="password" aria-invalid="true" aria-required="false" _ngcontent-hyb-c164="" >我们可以看到密码输入框具有id=”mat-input-1″和formcontrolname=”password”。id属性是最好的选择，因为它通常是唯一的。
步骤二：编写Tampermonkey脚本
以下是一个Tampermonkey脚本示例，用于查找并修改密码输入框的name属性。
// ==UserScript== // @name Enable Password Autofill // @namespace http://tampermonkey.net/ // @version 0.1 // @description Restores password autofill by adding missing 'name' attributes. // @author Your Name // @match https://ac.windtre.it/oa/auth/login* // 根据实际网址修改 // @grant none // ==/UserScript== (function() { 'use strict'; // 等待dom加载完成 // 由于目标元素可能通过JavaScript动态生成，我们可能需要更复杂的等待机制 // 这里使用MutationObserver来监听DOM变化，确保元素出现后再进行修改 const targetnode = document.body; // 监听整个body的变化 const config = { childList: true, subtree: true }; // 监听子节点和子树变化 const callback = function(mutationsList, observer) { // 尝试查找密码输入框 const passwordInput = document.getElementById('mat-input-1'); if (passwordInput && !passwordInput.name) { // 如果找到密码输入框且它没有name属性 passwordInput.setAttribute('name', 'password'); console.log('Password input name attribute added for autofill.'); // 如果还需要处理用户名输入框，可以类似地查找并添加name属性 // const usernameInput = document.getElementById('username-input-id'); // 假设的ID // if (usernameInput && !usernameInput.name) { // usernameInput.setAttribute('name', 'username'); // console.log('Username input name attribute added for autofill.'); // } // 一旦修改完成，就可以停止观察，避免不必要的性能开销 observer.disconnect(); } }; // 创建一个MutationObserver实例并传入回调函数 const observer = new MutationObserver(callback); // 开始观察目标节点 observer.observe(targetNode, config); // 也可以设置一个定时器作为备用或补充，以防MutationObserver未能捕获到 // setTimeout(() => { // const passwordInput = document.getElementById('mat-input-1'); // if (passwordInput && !passwordInput.name) { // passwordInput.setAttribute('name', 'password'); // console.log('Password input name attribute added via timeout.'); // } // }, 2000); // 2秒后执行 })();脚本说明：
- @match： 务必将其修改为目标网站的URL模式，以确保脚本只在该网站上运行。*是通配符，表示匹配该路径下的所有子路径。
- document.getElementById(‘mat-input-1’)： 使用id属性查找密码输入框。如果id不可用，可以尝试使用document.querySelector结合其他属性，例如：
- document.querySelector(‘input[type=”password”][formcontrolname=”password”]’)
- document.querySelector(‘input[type=”password”].mat-input-element’)
- !passwordInput.name： 检查元素是否已经存在name属性，避免重复设置。
- passwordInput.setAttribute(‘name’, ‘password’)： 为找到的密码输入框设置name=”password”属性。
- MutationObserver： 考虑到许多现代网站会动态加载内容，直接在DOMContentLoaded或window.onload时查找元素可能失败。MutationObserver能够监听DOM树的变化，当目标元素被添加到页面时，脚本就能及时捕获并进行修改，这比简单的setTimeout更健壮。
- observer.disconnect()： 一旦目标元素被成功修改，就应该断开观察器，以节省资源。
处理用户名输入框：
如果用户名输入框也存在类似问题，你需要找到其对应的元素，并为其添加name=”username”属性。例如，如果用户名输入框的ID是mat-input-0（常见于Angular Material），则可以添加类似的代码：
const usernameInput = document.getElementById('mat-input-0'); if (usernameInput && !usernameInput.name) { usernameInput.setAttribute('name', 'username'); console.log('Username input name attribute added for autofill.'); }注意事项与最佳实践
- 目标网站的URL： 确保@match规则准确无误，避免脚本在不相关的网站上运行。
- 元素选择器的健壮性： 网站的HTML结构可能会更新，导致你使用的id或class失效。尽量选择那些看起来比较稳定、不常变化的属性（如id或特定的formcontrolname）。如果网站经常更新，可能需要定期检查并更新脚本。
- 脚本执行时机： 对于动态加载的表单，确保脚本在目标元素存在时才执行修改。MutationObserver是处理这种情况的有效方法。
- 安全性： 用户脚本可以修改网页内容，请仅安装来自可信来源的脚本，并仔细审查你自行编写的脚本，避免引入安全漏洞。
- 浏览器兼容性： 自动填充行为在不同浏览器之间可能存在细微差异。测试你的脚本在目标浏览器上的效果。
- 避免过度修改： 仅修改必要的属性。不相关的修改可能导致意想不到的副作用。
总结
当网站的密码自动填充功能失效，且没有明显的autocomplete=”off”属性时，通常是由于输入字段缺少name属性所致。通过深入理解浏览器识别表单字段的机制，我们可以利用Tampermonkey/Greasemonkey用户脚本，动态地为这些缺失name属性的输入框添加相应的属性（如name=”password”），从而有效地恢复自动填充功能。这种方法提供了一种强大的客户端解决方案，帮助用户在面对开发者未充分考虑自动填充兼容性的网站时，改善其浏览体验。