Question

我有登录表格。标准，用户，密码。我有一个按钮，它启动对Web服务的AJAX请求，该服务登录用户。这是一个建立在旧网站之上的新部分，它不使用AJAX或Web服务。因此，在对Web服务进行AJAX调用之后，将运行提交表单的旧功能。

关键部分是JavaScript必须读取登录名和密码值并将它们传递给Web服务。它适用于除基于WebKit的所有浏览器。

在基于WebKit的浏览器中，我读取的密码字段的值始终为空。当我将密码输入的类型更改为＆＃39; text＆＃39; - 我看到了我记得的密码。但是，如果我尝试用JavaScript读取它的价值 - 它是空的。

当您点击此字段时 - 您可以阅读它。但是用户将点击提交按钮，网站将中断，因为它无法使用网络服务和AJAX。

当然，你无法从JS点击它。没有已知方法在这里工作。我甚至试图拦截形式的提交活动 - 没有快乐。我只能读空值。

（干得好的WebKit工作人员！伟大的反AJAX！让我们回到石器时代。）上面真的冒犯了你吗？随意进一步downvote。我可以自由地说明浏览器引擎的变化会破坏与某些网站的兼容性而没有相当大的好处是一个糟糕的选择。

无论如何，我问是否有人为此找到了解决方法？（如果你冒犯了＃34; hack＆＃34; - 我只是将其改为解决方法。）

此处的测试代码显示了我正在谈论的内容：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('#form1').on('submit', function(e) {
        console.dir($('#x').val());
        console.dir($('#y').val());
    });
});
</script>
</head>
<body>
    <form id="form1" action="http://www.google.com" method="post">
        <label for="x">Login:</label><input id="x" type="text">
        <label for="y">Password:</label><input id="y" type="password">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

要测试它，请使用控制台从Chrome上的硬盘运行它。不要从JSFiddle测试它，因为它从那里起根本不起作用。记得检查＆＃34;保留导航日志＆＃34;选项。输入＆＃34; 123＆＃34; as＆＃34;登录＆＃34;和＆＃34; 456＆＃34; as＆＃34;密码＆＃34;。点击＆＃34;提交＆＃34;按钮。回答＆＃34;是＆＃34;到＆＃34; ...记住密码......＆＃34;题。你应该看到＆＃34; 123＆＃34;和＆＃34; 456＆＃34;在控制台上。再次运行测试。请勿触摸记住的登录名和密码字段。结果应符合预期＆＃34; 123＆＃34;和＆＃34; 456＆＃34;。再次运行测试。在控制台中输入$('#form1').submit()，然后按Enter键。控制台输出将是＆＃34; 123＆＃34;和＆＃34;＆＃34;。

所以这就是挑战。 Rip＆＃34; 456＆＃34;来自Chrome。

To＆＃34; help＆＃34; downvoters：我已经完成了我的家庭作业，比如在SO和其他网站上阅读类似的主题，我自己尝试了很多理论上的工作。我不会要求任何人为我做我的工作。我陷入困境，为同伴/黑客留下了挑战。当然是白帽子:)）

主要更新：

今天我再次测试了我的测试代码。现在它的作品令人难以置信！现在，基于Web工具包的浏览器基本上都会返回＆＃34; 456＆＃34;作为非webkit的。我甚至没有重启我的电脑！

但问题仍然存在，因为我们的一些客户仍在Chrome上报告我们的登录表单问题。如果它是一个功能，而不是错误，为什么它表现得如此不稳定？而作为一个假想的坏人 - 为什么我单击时仍然能够读取密码或只是将字段类型更改为密码中的文本？作为合法的网站开发人员，我唯一能做的就是将密码发送到我的WCF Web服务，而不需要我的用户先点击密码字段，这纯属无稽之谈。不安全的事情是首先存储敏感密码AT ALL。但是用户可以选择是否存储密码。我希望它能保持这种状态。

必须有一个解决方法，我会以同样的方式找到它，智能开发人员如何找到使AJAX上传成为可能的解决方法，以及当浏览器还不支持CORS时的JSONP，因为这是一个对于某些人来说，这些奇怪的想法很奇怪。或者你更好，并在我面前找到它:)无论如何，双赢。

Answer 1

在编写示例代码时，我似乎意外地找到了解决方案。我只是不知道为什么我第一次测试时它没有工作。

以下是解释部分的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('#submit1').on('mousedown', function(e) {
        console.dir($('#x').val());
        console.dir($('#y').val());
    });
    $('#form1').on('submit', function(e) {
        console.dir($('#x').val());
        console.dir($('#y').val());
    });
});
</script>
</head>
<body>
    <form id="form1" action="http://www.google.com" method="post">
        <label for="x">Login:</label><input id="x" type="text">
        <label for="y">Password:</label><input id="y" type="password">
        <input id="submit1" type="submit" value="Submit">
    </form>
</body>
</html>

以下是Chrome控制台的说法：

>123
>
>123
>456

所以我实际上能够在submit事件中读取密码字段，但在之前的任何事件中都没有。这使得所有这些奇怪的＆＃34;安全功能＆＃34;更无意义;）

最终解决方案：

这一切似乎都是WebKit中的一个奇怪的错误。也许是，也许它不是。完整的解决方法包括两件事。首先 - 使用submit事件开始读取密码字段。第二 - 如果您使用JavaScript触发submit事件 - 请勿在{{1}}事件中立即执行此操作，否则会随机失败。如果我在mousedown和mousedown事件之间应用了500毫秒的超时 - 它似乎每次都有效。在将submit事件替换为mousedown事件时，我也将其设为有效，以触发click事件。

当用submit替换mousedown时，更奇怪的是 - 两个读取都返回正确的密码值。但是在我的生产代码中，我发现click和mousedown序列更好（对其他代码的更改要求更少）。

如何读取chrome（或任何基于WebKit的浏览器）用JavaScript记住的密码字段？

1 个答案: