CODEWITHSUNDEEP
htmlforms
GSnyder
GSnyder

Reputation: 480

Mystery .x and .y form fields - where do these come from?

Take a look at this login page, specifically, the form in the section labeled Returning Members. As you can verify by looking at the HTML or by digging with a tool such as Firebug, the actual form contains four tags: one each for the email address and password, an invisible input called "memberAlready" that contains the value "yes", and a submit button in the form an image. So far, perfectly generic.

However, if you inspect the form data at the point at which the form is submitted (using Tamper Data or its equivalent on another browser, you'll see that two additional form fields have been sneaked into the response: ACTION(loginCheckout).x and ACTION(loginCheckout).y.

They both have two-digit integer values, which suggests that they're only there to verify that the submitter is an actual web browser and not a robot. Presumably, they are related somehow to the submit button, which is defined as follows:

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

What's confusing to me is that these extra form fields appear even when JavaScript is disabled in the browser. So they presumably aren't just something inserted by an event handler somewhere.

Furthermore, if you submit the form programmatically (e.g., by running document.forms[1].submit() in the JavaScript console), the extra fields are not generated and the login attempt fails. That suggests to me that the insertion of the fields depends on something outside the basic HTML form submission mechanism. But what that "thing" could be if it's not JavaScript, I don't know.

Does anyone recognize this pattern or have a theory as to how the validation fields are inserted?

Upvotes: 1

Views: 1733

Answers (2)

Oliver Spryn
Oliver Spryn

Reputation: 17358

Take a look at the code you posted here:

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

Notice that this is an image input type which is used to submit the login form. The additional values that appear to be injected on submission are simply the x and y coordinates where the you clicked on the image to submit the form. They are not additional values which are injected by JavaScript on form submission, they are added by the browser itself.

Try clicking on different areas of the images and see the values change.

When you use JavaScript to submit the form, you do not click on the image, which is why the x and y values are not included on form submission.

Replacing the image for an <input type="submit" /> element will remove the x and y coordinates.

Hope that helps.

Upvotes: 4

blowdart
blowdart

Reputation: 56520

The X and Y values you are seeing are because the submit button is an an input type=image. They correspond to the X and Y locations within the image where the cursor was when the image was clicked. They're added by the browser itself, as the HTML specification requires it. Section 17.4.1 states that for an image input type

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

You'll note it only mentions the use of a pointing device. If you submit by using the keyboard the values won't be created.

Upvotes: 1

Related Questions