浏览器是不是支持 ajax 加载的登录表单的自动完成？

Posted 2023-02-24

【中文标题】浏览器是不是支持 ajax 加载的登录表单的自动完成？

【英文标题】：Do browsers support autocomplete for ajax loaded login forms at all?浏览器是否支持 ajax 加载的登录表单的自动完成？

【发布时间】：2011-01-17 01:47:57

【问题描述】：

我的问题是，浏览器的 (IE&FF) 自动完成功能不适用于我的登录表单。

我有一个带有 Cakephp 和 jQuery 的 webapp。允许访问者不显眼地登录/注册。登录表单位于通过 AJAX 加载的 div 中。 （这可以在不重新加载页面的情况下登录。）

浏览器确实将其识别为登录字段，因为它们会在单击登录时提示我保存凭据。他们确实保存了用户名/密码，因为它们出现在浏览器设置中已保存的用户名/密码之间。但保存的用户名/密码永远不会自动输入。当页面加载时，它们不会出现预先输入。当我开始输入用户名时，用户名显示为建议，但即使您选择它，也不会在其旁边输入密码。为什么？我怎样才能让它工作？

你可以自己测试一下，这里有一个简单的AJAX登录表单：

http://gablog.eu/test/ajaxlogin.html

它会加载以下登录表单，如果您转到下面的 url，自动完成功能仅适用于普通表单，因此这不是表单本身的问题，而是它加载了 AJAX： http://gablog.eu/test/loginform.html

布局：

<div id="user-bar">
    <script type="text/javascript">
        $(function() 
           $("#user-bar").load('loginform.html').html();
        );
    </script>
</div>

加载的视图（未登录时）：

<form id="form-login" action="" onsubmit="login(); return false;">
    <input type="text" id="username" name="username"/>
    <input type="password" id="password" name="password"/>
    <input type="submit" value="Login"/>
    <div id="login-error" class="error-message"></div>
</form>

<script type="text/javascript">
    function login() 
        $.post('/ajax/login', $("#form-login").serialize(), function(data) 
            if (data.success) 
                $("#user-bar").load('userbar.html').html();
             else 
                $("#login-error").html(data.message);
            
        , "json");
    
</script>

澄清一下：我不想使用 AJAX 自动完成功能，我希望浏览器的自动完成功能适用于我的登录表单。这是我的表单和浏览器之间的问题。 jQuery 提交似乎扮演了一个次要角色，因为用户名/密码被保存了。它们只是不会为 ajax 加载的 HTML 元素自动输入！（测试站点不使用 jQuery 提交。）相关问题：browser autocomplete/saved form not work in ajax request

【问题讨论】：

更新：向表单元素添加 ID 属性并不能解决问题

它不能在哪些浏览器中运行？你试过 IE / FF / Chrome 吗？

FF&IE 同样的结果：登录的时候提示保存数据，确实保存了数据，但是下次登录的时候不填表。更准确地说，您必须开始输入用户名，然后它会显示为建议。但密码永远不会自动完成。没试过用 Chrome。

会不会是安全问题？您是否尝试过从自己的域中提供 jQuery 库？

在 mozilla 上报告的错误：bugzilla.mozilla.org/show_bug.cgi?id=547035 我期待了解这是一个错误还是缺少的功能。

【参考方案1】：

如果有帮助，msdn 说（朝向页面底部）：

注意：如果以下两种情况 条件为真：

页面通过 HTTPS 传递 页面带有标题或 META 标记，可防止 缓存

...自动完成功能是 禁用，无论是否存在 或自动完成的值 属性。此备注适用于IE5， IE6、IE7 和 IE8。

我让有趣的部分更加大胆。

.

【讨论】：

不是这样，在 FF 中也不起作用。用户名/密码提交被识别，提示我是否要保存数据（IE&FF）。如果我列出它们，它们确实会正确显示在浏览器保存的正确站点的密码列表中。他们“只是”没有输入表格。

@sibidiba - 对于这些输入元素，我会尝试 name="password" 和 name="username 看看是否会有所不同。

试过了，还是一样。

@sibidiba - 我完全没有想法。在删除之前，我会在这里留下我的答案，以防其他人有同样的想法。很抱歉帮助有限:(

【参考方案2】：

如果您通过 ajax 加载表单，我认为您无法让表单自动完成工作（安全方面我不知道它是否真的会被滥用，但脚本可以启动的事实将字段加载到页面中以查看插入的数据对我来说看起来不太好）。

如果可以，最好的选择是在 php 文件中添加一个条件块，并根据用户是否登录来包含或不包含表单。如果由于某种原因你不能这样做，你可能想尝试做一个 document.write() 而不是 ajax 调用（是的，使用 document.write 很丑:)

【讨论】：

您关于安全的论点是正确的。但是如果没有 AJAX 表单，您就不能以同样的方式窃取信息吗？将表单绑定到 PHP 中的条件对我来说不是一个解决方案，因为我需要在不重新加载页面的情况下更改表单。考虑一个像 *** 这样的网站，您开始输入一个问题并意识到您需要注册或登录。我希望允许访问者注册或登录而无需导航。

AJAX 表单的问题是 javascript 可能来自与 HTML（跨站点脚本）不同的来源。如果您从这里注销，您会发现如果您未登录，*** 确实包含登录表单。与我发现的大多数其他网站一样，它只是将用户和密码字段添加到评论表单中，以便您可以发表评论并同时登录。您可以尝试的另一种解决方案是将表单包含在页面中（隐藏），并使用 jQuery 显示它，而不是使用 Ajax 调用加载它。

这可能属于 xss 和点击劫持之类的东西，因此可能会应用 javascripts 安全限制。如果另一个域脚本可以生成一个外观类似的表单并将其放置在原始表单之上怎么办？另一个域会收到 un/pw。

我不明白，如果这是一个安全问题，那么为什么不使用普通的静态表单呢？从不同域加载的脚本可以读取以相同方式自动完成的静态表单的密码字段的值（但当然无法加载任何表单，我明白了）。

@sibida。正如我认为您在上一条评论中提到的那样，问题在于您可以在页面中大量创建输入（想象一下，不仅要创建“登录”和“密码”等字段，还可以创建“地址”、“电话号码”等字段） "，以及浏览器可能自动完成的任何内容）。但是，我确实同意，当您实际开始输入字段时，无论它们是如何创建的，它都不会自动完成字段，这很愚蠢！

【参考方案3】：

自动完成，至少在 Firefox 中，在页面加载期间触发。事后添加内容会错过机会之窗。

登录表单很小。我会从一开始就将它包含在页面中，并考虑使用 CSS 将其隐藏，直到需要它为止。

【讨论】：

谢谢，现在登录表单是静态的，只有它的可见性被切换。像魅力一样工作。

要完全隐藏表单及其足迹，请直接向包含表单和其他将位置设置为绝对位置的元素的 div 添加样式属性（或等效类）：.

【参考方案4】：

我看到必须使用 ajax 提取登录表单的情况 - 如果网站的其余部分加载为静态 html（缓存）。登录表单（或已验证的用户信息）无法静态显示。

因此，您的解决方案是在 DOM 元素的声明（结束标记）之后立即拉取表单，该 DOM 元素用作 ajax 拉取登录表单的 html 的父元素，例如：

<div id="loginforms_parent"></div>
<script language="javascript">
    /* ajax request and insert into DOM */
</script>

并且浏览器在 DOM onLoad 中有表单。经过测试，Firefox 在这种情况下会自动完成。

【参考方案5】：

我不满意在加载时将登录表单加载到我的页面中，因此我向 Chrome 提出了问题；

http://code.google.com/p/chromium/issues/detail?id=123955&thanks=123955&ts=1334713139

【参考方案6】：

给出了答案：http://www.webmasterworld.com/javascript/4532397.htm。它使用 submit 方法执行某些操作，然后使用 click 方法。据我所知，如果未提交表单，则不会保存值。我认为该解决方案的作者只是将其提交，尽管用户未单击提交按钮。