VIewTransitions break on presence of <input name="action">

[robertvanhoesel]

Astro Info

Astro                    v4.6.1
Node                     v18.20.2
System                   macOS (arm64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/solid-js
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When using ViewTransitions and having semantically valid HTML Inputs with a name attribute that's either method or action, submitting a form results in a broken route: 404 /[object%20HTMLInputElement] not found

This is caused by a concept called DOM clobbering and by incorrectly (but totally intuitively and understandably) assuming form.action is always the same a <form action="">

Where usually you'd except form.action to be foo, the following DOM results in form.action to point to the HTMLInputElement instead.

<form action="foo">
 <input name="action" value="bar">
</form>

When trying to submit the form, it will read this element as the destination url instead.

What's the expected result?

The submit handler in View Transitions reading method and action should not assume reading form.action and form.method are safe to read in user land. Instead is should explicitly read the attribute. This follows the same pattern browser behavior without ViewTranstions enabled.

Suggested changes in workaround.

astro/packages/astro/components/ViewTransitions.astro

Lines 112 to 113 in 8d5f3e8

	let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
	const method = submitter?.getAttribute('formmethod') ?? form.method;

const form = el as HTMLFormElement;
const submitter = ev.submitter;
const formData = new FormData(form, submitter);
// Use the form action, if defined, otherwise fallback to current path.
- 	let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
+ let action = submitter?.getAttribute('formaction') ?? form.getAttribute('action') ?? location.pathname;
-  const method = submitter?.getAttribute('formmethod') ?? form.method;
+  const method = submitter?.getAttribute('formmethod') ?? form.getAttribute('method') ?? 'get'

Happy to create my first PR to Astro for this.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-3nkr3h?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Wow, I didn't know about this feature. Yes, PR very much welcome, thank you!

[robertvanhoesel]

@matthewp PR submitted at #10856