From b9bb6c9b24d5c35a57ad57a803b9398e82ffa17c Mon Sep 17 00:00:00 2001 From: Louis Escher <66965600+louisescher@users.noreply.github.com> Date: Mon, 23 Dec 2024 01:27:58 +0100 Subject: [PATCH 1/3] Fix server island script breaking when charset is added to content-type --- packages/astro/src/runtime/server/render/server-islands.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts index 97bf1d3314e5..7059218287c8 100644 --- a/packages/astro/src/runtime/server/render/server-islands.ts +++ b/packages/astro/src/runtime/server/render/server-islands.ts @@ -120,7 +120,10 @@ let response = await fetch('${serverIslandUrl}', { ` } if (script) { - if(response.status === 200 && response.headers.get('content-type') === 'text/html') { + if( + response.status === 200 + && response.headers.has('content-type') + && response.headers.get('content-type').split(";")[0].trim() === 'text/html') { let html = await response.text(); // Swap! From 60c83c4c60b89d2344792ac53734dfafd7ea2902 Mon Sep 17 00:00:00 2001 From: Louis Escher Date: Mon, 23 Dec 2024 01:38:45 +0100 Subject: [PATCH 2/3] Add changeset --- .changeset/six-pumpkins-act.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/six-pumpkins-act.md diff --git a/.changeset/six-pumpkins-act.md b/.changeset/six-pumpkins-act.md new file mode 100644 index 000000000000..9221af960c90 --- /dev/null +++ b/.changeset/six-pumpkins-act.md @@ -0,0 +1,7 @@ +--- +'astro': patch +--- + +Fixes server islands failing to check content-type header under certain circumstances + +Sometimes a reverse proxy or similar service might modify the content-type header to include the charset or other parameters in the media type of the response. This previously wasn't handled by the client-side server island script and thus removed the script without actually placing the requested content in the DOM. This fix makes it so the script checks if the header starts with the proper content type instead of exactly matching `text/html`, so the following will still be considered a valid header: `text/html; charset=utf-8` From 953b4dc3efbfda559005fcd3d90ef4488d572be7 Mon Sep 17 00:00:00 2001 From: Louis Escher Date: Mon, 23 Dec 2024 11:05:04 +0100 Subject: [PATCH 3/3] Add test --- .../src/components/MediaTypeInHeader.astro | 5 +++++ .../e2e/fixtures/server-islands/src/pages/index.astro | 3 +++ packages/astro/e2e/server-islands.test.js | 9 +++++++++ 3 files changed, 17 insertions(+) create mode 100644 packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro diff --git a/packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro b/packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro new file mode 100644 index 000000000000..179b97723d0a --- /dev/null +++ b/packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro @@ -0,0 +1,5 @@ +--- +Astro.response.headers.set('content-type', 'text/html;charset=utf-8'); +--- + +

I'm an island with a different content-type response header

diff --git a/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro b/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro index 3caf452bc026..f15cc53449c9 100644 --- a/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro @@ -3,6 +3,7 @@ import Island from '../components/Island.astro'; import Self from '../components/Self.astro'; import HTMLError from '../components/HTMLError.astro'; import { generateLongText } from '../lorem'; +import MediaTypeInHeader from '../components/MediaTypeInHeader.astro'; const content = generateLongText(5); @@ -22,6 +23,8 @@ export const prerender = false; + +
diff --git a/packages/astro/e2e/server-islands.test.js b/packages/astro/e2e/server-islands.test.js index 24ac7b918443..a877212bc084 100644 --- a/packages/astro/e2e/server-islands.test.js +++ b/packages/astro/e2e/server-islands.test.js @@ -44,6 +44,15 @@ test.describe('Server islands', () => { await expect(el).toHaveText('test'); }); + test("content-type header with media type still allows the island to be displayed", async ({ + page, + astro, + }) => { + await page.goto(astro.resolveUrl('/base/')); + let el = page.locator('#charset-in-content-type'); + await expect(el).toHaveCount(1); + }); + test('Self imported module can server defer', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/base/')); let el = page.locator('.now');