diff options
4 files changed, 24 insertions, 1 deletions
diff --git a/.changeset/poor-cherries-buy.md b/.changeset/poor-cherries-buy.md new file mode 100644 index 000000000..d14cff158 --- /dev/null +++ b/.changeset/poor-cherries-buy.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Disables View Transition form handling when the `action` property points to an external URL diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 05911fca7..bf372f15c 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -109,7 +109,9 @@ const { fallback = 'animate' } = Astro.props; // the "dialog" method is a special keyword used within <dialog> elements // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method - if (method === 'dialog') { + if (method === 'dialog' || location.origin !== new URL(action, location.href).origin) { + // No page transitions in these cases, + // Let the browser standard action handle this return; } diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro new file mode 100644 index 000000000..9ff08db42 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro @@ -0,0 +1,9 @@ +--- +import Layout from '../components/Layout.astro'; + +--- +<Layout> + <form action="https://example.com/" method="POST"> + <button id="submit">Submit</button> + </form> +</Layout> diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 04eab79c1..0da1010b2 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -932,6 +932,13 @@ test.describe('View Transitions', () => { ).toEqual(1); }); + test('form POST that action for cross-origin is opt-out', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/form-five')); + page.on('request', (request) => expect(request.method()).toBe('POST')); + // Submit the form + await page.click('#submit'); + }); + test('form GET that redirects to another page is handled', async ({ page, astro }) => { const loads = []; page.addListener('load', async (p) => { |