Safari 和 Chrome 后退按钮更改隐藏并在表单中提交值

Question

Safari 和 Chrome 都会出现以下问题，因此可能是 WebKit 问题。

页面 A：需要您登录才能查看的页面，包含一个具有 type=submit 按钮、name=submit 和 value=a 的表单

页面 B：其他页面

页面 C：要求用户登录页面，包含一个带有 type=submit 按钮的表单，name=submit 和 value=c

用户访问页面 A，然后访问页面 B。然后空闲并且用户的登录会话超时。用户点击返回按钮返回到页面 A。浏览器将用户重定向到页面 C。

在 Safari 和 Chrome 上，当 C 被渲染时，页面 C 上的表单有 type=submit 按钮，n​​ame=submit，但 value 显示为“a”。

如果您在页面 C 上重新加载，“c”将显示为 name=submit 按钮的值。

type=hidden 输入字段也会出现同样的问题；当用户点击后退按钮时，它们的值也会从其他形式更改为其他值。此外，这个问题也显示没有重定向，只需提交然后返回。在这种情况下，上一页呈现的隐藏和提交 CGI 变量的值不正确。

到目前为止，我能想到的唯一解决方法是在页面 C 加载后使用 Javascript 重置 type=hidden 和 type=submit 变量值，以确保值正确。但这并不干净和普遍适用。

WebKit 无法修复此错误，有人遇到过更好的解决方法吗？

谢谢。

Answer 1

经过大量挖掘，我找到了答案。好吧，不是答案，而是为什么会发生这种情况。我希望这可以节省其他人一些时间。

当前基于 WebKit 的浏览器（截至 2010 年 3 月 16 日），例如Safari 和 Chrome，表现出以下错误。也许有人可以看看。谢谢。

错误 1：如果页面 A 有多个表单元素 F1 和 F2，并且第一个（按 HTML 中出现的顺序）表单 F1 的自动完成设置为“关闭”（即 ），但 F2 的自动完成设置为“on”（默认行为），然后在离开页面 A 之后，然后点击浏览器返回按钮返回页面 A，F1 和 F2 可能会错误地自动完成。特别是，如果 F1 和 F2 都具有相同名称和类型的输入元素，例如 N 和 T（即 ），那么当使用返回按钮导航回页面 A 时，F1.N 的值将使用 F2.N 的值自动完成.

错误 2：首先，浏览器点击页面 A，服务器返回一个带有表单元素 F1 和 F2 的 HTML 页面（两个表单都设置了自动完成功能）。然后，用户导航离开页面 A，随后使用浏览器返回按钮返回页面 A。在第二次访问页面 A 时，WebKit 向服务器发出另一个对 A 的请求（这与 FireFox 的行为不同，在后退按钮上没有向服务器发出添加请求）。如果服务器返回不同的 HTML 页面（例如，因为用户会话已注销），表单元素 F3 和 F4 与 F1 和 F2 不同，但由具有相同名称和类型的输入元素组成，则 F3 和 F4 将是使用 F1 和 F2 输入元素值自动完成，即使对于隐藏和提交的输入元素类型也是如此。

解决方法

错误 1：永远不要使用 autocomplete="off"，除非您为同一 HTML 页面上的所有表单设置了此设置。

错误 2：具体情况，没有好的通用解决方案。我们通过包含隐藏表单来确保页面 A 的两个版本具有相似的表单，从而找到了一种可接受的解决方法；第一个版本有 F1、F2、F3，第二个版本有 F1、F2' 和 F3，其中 F2' 是 F2 的隐藏版本。如果我们不包含 F2'，那么页面 A 的第二个版本是 F1 和 F3，并且 F3 将使用 F2 的元素值自动完成，即使对于 F3 中的隐藏和提交元素也是如此。

WebKit 代码分析

这两个错误出现在代码的同一部分，但可能被视为两个独立的错误。代码位于 WebKit 代码树的 WebCore 子目录中。

错误 1：在 Document::formElementsState 中，已打开自动完成功能的输入元素（通过 HTMLInputElement::saveFormControlState 检查）将其状态保存在向量中。但是，在 HTMLFormControlElementWithState::finishParsingChildren 中，每个表单元素，无论自动完成是打开还是关闭，都会从上述向量恢复状态。这会导致错误 1。

错误 1 ​​修复：这应该是一个相当直接的修复 - 如果元素已关闭自动完成功能，finishParsingChildren 不应恢复状态。

免责声明：我不在 Mac 上开发。我只使用它，我们开发了一个网站。我今天只是浏览 WebKit 代码。因此，我没有创建或测试过补丁。

错误 2。这要复杂得多。

我假设在与自动完成无关的设计决策中，如果用户使用后退按钮返回历史页面 A，WebKit 旨在重新获取页面 A。

（我也有兴趣听听这个）

从根本上说，WebKit 做出了错误的假设，即第二次获取页面 A 会产生与第一次获取相同的 HTML，或者至少是相同的表单集。如果不是这种情况，则自动完成逻辑不再产生正确/预期的行为。

当 WebKit 为页面保存状态时，它会调用 Document::formElementsState，它只是创建一个对的映射，并将每个输入元素的名称+类型和值对放入映射中。如果两个不同表单中的两个输入元素具有相同的名称和类型，则两个值都会被保存。

例如，假设页面 A 具有表单 F1 和 F2，并且 F1 具有名称为 a1 和 a2 的输入元素，类型为 t1 和 t2，值分别为 v1 和 v2。 F2 具有名称为 a3 和 a2 的输入元素，类型为 t1 和 t2，值分别为 v3 和 v4。 WebKit 将此页面的状态保存为（以 JSON 表示）

{ "a1,t1" : [ v1 ], "a2,t2" : [ v2, v4 ], "a3,t1" : [ v3 ] }

如果用户使用浏览器后退按钮重新访问页面 A，WebKit 将尝试使用上述状态在从服务器获取的新版本页面 A 上自动完成表单。如果新版本的页面 A 具有与上一个完全相同的形式，那么一切正常。如果不是，那么 WebKit 会产生不正确的行为。例如，假设第二次获取页面 A，服务器仅返回一个表单 F3，并且 F3 具有名称为 a4 和 a2，类型为 t1 和 t2 的输入元素，则 F3 的 a2 元素将填充 v2，从上一个保存页面。

（注：代码中使用的存储状态和恢复状态的实际逻辑略有不同，但思路是一样的）

当用户会话可能过期时，此问题会在网站上表现出来，并且在会话过期后，点击页面 A 可能会产生稍微不同的 HTML。例如。可能会给您一个“请登录”表单，或者可能会给您大致相同的内容，但会出现一个登录表单，而不是顶部的搜索用户数据表单。在这些情况下，可见文本输入元素、隐藏输入元素和提交输入元素的值都可能被 WebKit 更改。

Bug 2 修复：这很困难，因为当用户使用返回按钮时，WebKit 会重新获取页面 A。如果页面 A 的新版本与旧版本不同，WebKit 无法轻松地将旧版本页面中的表单状态匹配到新版本上的某个表单（即使它存在）。您实际上不能要求所有表单都具有相同的 DOM id，即使您这样做，这仍然不完全正确，因为 DOM id 在 HTML 页面中必须是唯一的，但在不同的 HTML 文档中不需要是唯一的。

我能想到的唯一解决方法是：当您保存第一次访问页面 A 的状态时，获取页面的 MD5 或 SHA1 哈希，并将其与输入元素状态一起存储。返回页面 A 时，仅在 MD5 或 SHA1 哈希相同的情况下恢复状态。

Answer 2

我不确定，但请尝试将 autocomplete = 'off' 添加到所有表单。

<form .... autocomplete = 'off'>

Answer 3

autocomplete="off"

对我不起作用。我找到了另一种解决方法，可以使用text 字段，使用

隐藏这些字段

DIV style="display:none"

并在DIV 标签中添加input_type="text" value="s" 字段

Answer 4

对此的一种解决方案是在加载文档时重置表单

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

function resetForm() {
   document.forms["myForm"].reset()
}
ready(resetForm)