神秘的 .x 和 .y 表单域——它们从何而来？答案

【问题标题】：Mystery .x and .y form fields - where do these come from?神秘的 .x 和 .y 表单域——它们从何而来？
【发布时间】：2012-04-12 01:14:29
【问题描述】：

查看this login page，特别是标记为“返回成员”部分中的表格。您可以通过查看 HTML 或使用 Firebug 等工具进行挖掘来验证，实际表单包含四个标签：一个用于电子邮件地址和密码，一个名为“memberAlready”的不可见输入，其中包含值“yes”，和一个图像形式的提交按钮。到目前为止，完全通用。

但是，如果您在提交表单时检查表单数据（使用 Tamper Data 或其他浏览器上的等效项，您会看到两个额外的表单字段已潜入响应中：ACTION( loginCheckout).x 和 ACTION(loginCheckout).y.

它们都有两位整数值，这表明它们只是为了验证提交者是实际的网络浏览器而不是机器人。据推测，它们与提交按钮有关，其定义如下：

<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">

让我感到困惑的是，这些额外的表单字段即使在浏览器中禁用 JavaScript 时也会出现。因此，它们可能不仅仅是某个事件处理程序插入的东西。

此外，如果您以编程方式提交表单（例如，通过在 JavaScript 控制台中运行 document.forms[1].submit()），则不会生成额外字段并且登录尝试会失败.这向我表明，字段的插入取决于基本 HTML 表单提交机制之外的东西。但如果不是 JavaScript，那“东西”可能是什么，我不知道。

有没有人认识到这种模式或有关于如何插入验证字段的理论？

【问题讨论】：

标签： html forms

【解决方案1】：

看看您在此处发布的代码：

<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">

请注意，这是一个用于提交登录表单的图像输入类型。提交时似乎注入的附加值只是您单击图像以提交表单的 x 和 y 坐标。它们不是 JavaScript 在表单提交时注入的附加值，它们是由浏览器本身添加的。

尝试点击图像的不同区域并查看值的变化。

当您使用 JavaScript 提交表单时，您不会点击图像，这就是为什么表单提交时不包含 x 和 y 值的原因。

替换 <input type="submit" /> 元素的图像将删除 x 和 y 坐标。

希望对您有所帮助。

【讨论】：

【解决方案2】：

您看到的 X 和 Y 值是因为提交按钮是输入类型=图像。它们对应于图像中单击图像时光标所在的 X 和 Y 位置。它们是由浏览器本身添加的，因为 HTML specification 需要它。第 17.4.1 节指出对于图像输入类型

当使用定点设备点击图像时，提交表单并将点击坐标传递给服务器。 x 值以图像左侧的像素为单位，y 值以图像顶部的像素为单位。提交的数据包括name.x=x-value和name.y=y-value，其中“name”是name属性的值，x-value和y-value分别是x和y坐标值。

您会注意到它只提到了指点设备的使用。如果您使用键盘提交，则不会创建值。

【讨论】：