Fix an XSS in Server Islands. (#11508)

* Fix an XSS in Server Islands. Discussed with @FredKSchott that this is OK to disclose since Server Islands are still experimental. It's generally not safe to use `JSON.stringify` to interpolate potentially attacker controlled data into `<script>` tags as JSON doesn't escape `<>"'` and so one can use it to break out of the script tag and e.g. make a new one with controlled content. See https://pragmaticwebsecurity.com/articles/spasecurity/json-stringify-xss * Format * Create smart-snakes-promise.md * Switch to manual encoding --------- Co-authored-by: Matt Kane <[email protected]>
withastro · Jul 19, 2024 · ca335e1 · ca335e1
1 parent 026e8ba
commit ca335e1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/.changeset/smart-snakes-promise.md b/.changeset/smart-snakes-promise.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Escapes HTML in serialized props
diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts
@@ -14,6 +14,15 @@ export function containsServerDirective(props: Record<string | number, any>) {
 	return 'server:component-directive' in props;
 }
 
+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');
+}
+
 export function renderServerIsland(
 	result: SSRResult,
 	_displayName: string,
@@ -53,13 +62,13 @@ export function renderServerIsland(
 			const hostId = crypto.randomUUID();
 
 			destination.write(`<script async type="module" data-island-id="${hostId}">
-let componentId = ${JSON.stringify(componentId)};
-let componentExport = ${JSON.stringify(componentExport)};
+let componentId = ${safeJsonStringify(componentId)};
+let componentExport = ${safeJsonStringify(componentExport)};
 let script = document.querySelector('script[data-island-id="${hostId}"]');
 let data = {
 	componentExport,
-	props: ${JSON.stringify(props)},
-	slots: ${JSON.stringify(renderedSlots)},
+	props: ${safeJsonStringify(props)},
+	slots: ${safeJsonStringify(renderedSlots)},
 };
 
 let response = await fetch('/_server-islands/${componentId}', {