网站自动填充失效原因及修复方法

golang学习网今天将给大家带来《网站自动填充失效原因及Tampermonkey修复方法》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

某些网站即使未设置`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"，但自动填充依然失效时，最常见的原因就是其<input>元素缺少了对浏览器至关重要的name属性。

自动填充失效的常见原因

除了开发者明确设置autocomplete="off"外，以下是导致自动填充失效的常见原因：

1. 缺少 name 属性： 这是本教程主要关注的问题。许多现代前端框架（如Angular, React, Vue）在生成表单时，可能更依赖于内部的formcontrolname或其他自定义属性来管理表单状态，而忽略了标准的name属性。当name属性缺失时，浏览器难以识别字段类型。
2. 动态加载的表单： 对于单页应用（SPA）或通过JavaScript动态加载的表单，浏览器可能在页面加载初期无法捕获到所有字段，导致自动填充失效。
3. autocomplete 属性设置不当： 尽管本例中未出现，但autocomplete="new-password"或autocomplete="one-time-code"等特定值也可能干扰常规的密码填充。
4. type 属性被篡改： 有些网站可能会为了某种目的，将密码输入框的type属性设置为text，然后通过JavaScript在用户输入时切换回password，这也会混淆浏览器。
5. 浏览器自身设置或扩展冲突： 用户在浏览器偏好设置中禁用了特定网站的自动填充，或者安装的浏览器扩展与自动填充功能发生冲突。

使用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秒后执行
})();

脚本说明：

1. @match： 务必将其修改为目标网站的URL模式，以确保脚本只在该网站上运行。*是通配符，表示匹配该路径下的所有子路径。
2. document.getElementById('mat-input-1')： 使用id属性查找密码输入框。如果id不可用，可以尝试使用document.querySelector结合其他属性，例如：
   • document.querySelector('input[type="password"][formcontrolname="password"]')
   • document.querySelector('input[type="password"].mat-input-element')
3. !passwordInput.name： 检查元素是否已经存在name属性，避免重复设置。
4. passwordInput.setAttribute('name', 'password')： 为找到的密码输入框设置name="password"属性。
5. MutationObserver： 考虑到许多现代网站会动态加载内容，直接在DOMContentLoaded或window.onload时查找元素可能失败。MutationObserver能够监听DOM树的变化，当目标元素被添加到页面时，脚本就能及时捕获并进行修改，这比简单的setTimeout更健壮。
6. 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"），从而有效地恢复自动填充功能。这种方法提供了一种强大的客户端解决方案，帮助用户在面对开发者未充分考虑自动填充兼容性的网站时，改善其浏览体验。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~