Revert "Revert "feat(server-islands): only encode ETAGO delimiter (#11513)"" (#13031)

florian-lefebvre · web-flow · commit f5765196e9cd · 2025-01-21T15:09:57.000+01:00
diff --git a/.changeset/fifty-socks-end.md b/.changeset/fifty-socks-end.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Updates the server islands encoding logic to only escape the script end tag open delimiter and opening HTML comment syntax
diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts
@@ -15,13 +15,19 @@ export function containsServerDirective(props: Record<string | number, any>) {
 	return 'server:component-directive' in props;
 }
 
+const SCRIPT_RE = /<\/script/giu;
+const COMMENT_RE = /<!--/gu;
+const SCRIPT_REPLACER = '<\\/script';
+const COMMENT_REPLACER = '\\u003C!--';
+
+/**
+ * Encodes the script end-tag open (ETAGO) delimiter and opening HTML comment syntax for JSON inside a `<script>` tag.
+ * @see https://mathiasbynens.be/notes/etago
+ */
 function safeJsonStringify(obj: any) {
 	return JSON.stringify(obj)
-		.replace(/\u2028/g, '\\u2028')
-		.replace(/\u2029/g, '\\u2029')
-		.replace(/</g, '\\u003c')
-		.replace(/>/g, '\\u003e')
-		.replace(/\//g, '\\u002f');
+		.replace(SCRIPT_RE, SCRIPT_REPLACER)
+		.replace(COMMENT_RE, COMMENT_REPLACER);
 }
 
 function createSearchParams(componentExport: string, encryptedProps: string, slots: string) {
diff --git a/packages/astro/test/fixtures/server-islands/ssr/src/pages/empty-props.astro b/packages/astro/test/fixtures/server-islands/ssr/src/pages/empty-props.astro
@@ -0,0 +1,12 @@
+---
+import Island from '../components/Island.astro';
+---
+<html>
+<head>
+  <title>Testing</title>
+</head>
+<body>
+  <h1>Testing</h1>
+  <Island server:defer />
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/server-islands/ssr/src/pages/index.astro b/packages/astro/test/fixtures/server-islands/ssr/src/pages/index.astro
@@ -1,12 +1,14 @@
 ---
 import Island from '../components/Island.astro';
+
+const xssMe ="</script><script>alert('xss')</script><!--"
 ---
 <html>
 <head>
   <title>Testing</title>
 </head>
 <body>
   <h1>Testing</h1>
-  <Island server:defer />
+  <Island server:defer message={xssMe} />
 </body>
 </html>
diff --git a/packages/astro/test/server-islands.test.js b/packages/astro/test/server-islands.test.js
@@ -37,6 +37,13 @@ describe('Server islands', () => {
 				assert.equal(serverIslandEl.length, 0);
 			});
 
+			it('HTML escapes scripts', async () => {
+				const res = await fixture.fetch('/');
+				assert.equal(res.status, 200);
+				const html = await res.text();
+				assert.equal(html.includes("</script><script>alert('xss')</script><!--"), false);
+			});
+
 			it('island is not indexed', async () => {
 				const res = await fixture.fetch('/_server-islands/Island', {
 					method: 'POST',
@@ -62,7 +69,7 @@ describe('Server islands', () => {
 				assert.equal(works, 'true', 'able to set header from server island');
 			});
 			it('omits empty props from the query string', async () => {
-				const res = await fixture.fetch('/');
+				const res = await fixture.fetch('/empty-props');
 				assert.equal(res.status, 200);
 				const html = await res.text();
 				const fetchMatch = html.match(/fetch\('\/_server-islands\/Island\?[^']*p=([^&']*)/);
@@ -135,7 +142,7 @@ describe('Server islands', () => {
 			});
 			it('omits empty props from the query string', async () => {
 				const app = await fixture.loadTestAdapterApp();
-				const request = new Request('http://example.com/');
+				const request = new Request('http://example.com/empty-props');
 				const response = await app.render(request);
 				assert.equal(response.status, 200);
 				const html = await response.text();
