Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
Code Issues Activity

fix(ViewTransition): Disables View Transition form handling when the action property points to an external URL.(#9674) (#9693)

Browse source
This commit is contained in:
An Li 2024-01-15 15:28:40 +08:00 committed by GitHub
parent c7dbb9d5c0
commit d38b2a4fe8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/poor-cherries-buy.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Disables View Transition form handling when the `action` property points to an external URL

4
packages/astro/components/ViewTransitions.astro
View file

@ -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;
}

9
packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro Normal file
View file

@ -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>

7
packages/astro/e2e/view-transitions.test.js
View file

@ -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) => {