fix(astro,tanstack-react-start): Fix XSS via user-controlled JSON (#9166)

dominic-clerk · web-flow · commit bcbdda6d7d6c · 2026-07-16T12:35:01.000Z
diff --git a/.changeset/open-buckets-bake.md b/.changeset/open-buckets-bake.md
@@ -0,0 +1,7 @@
+---
+'@clerk/tanstack-react-start': patch
+'@clerk/shared': patch
+'@clerk/astro': patch
+---
+
+Escape `<`, `>`, and `/` when serializing the Clerk auth state into SSR `<script>` tags, preventing a `</script>` sequence inside user-controllable session claims from breaking out of the script element (stored XSS). The embedded JSON still parses to identical values on the client.
diff --git a/packages/astro/src/server/clerk-middleware.ts b/packages/astro/src/server/clerk-middleware.ts
@@ -15,6 +15,7 @@ import {
   signedOutAuthObject,
   TokenType,
 } from '@clerk/backend/internal';
+import { htmlSafeJson } from '@clerk/shared/htmlSafeJson';
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { handleNetlifyCacheInDevInstance } from '@clerk/shared/netlifyCacheHandler';
 import { isMalformedURLError } from '@clerk/shared/pathMatcher';
@@ -382,10 +383,10 @@ function decorateRequest(locals: APIContext['locals'], res: Response): Response
     const encoder = new TextEncoder();
     const closingHeadTag = encoder.encode('</head>');
     const clerkAstroData = encoder.encode(
-      `<script id="__CLERK_ASTRO_DATA__" type="application/json">${JSON.stringify(locals.auth())}</script>\n`,
+      `<script id="__CLERK_ASTRO_DATA__" type="application/json">${htmlSafeJson(locals.auth())}</script>\n`,
     );
     const clerkSafeEnvVariables = encoder.encode(
-      `<script id="__CLERK_ASTRO_SAFE_VARS__" type="application/json">${JSON.stringify(getClientSafeEnv(locals))}</script>\n`,
+      `<script id="__CLERK_ASTRO_SAFE_VARS__" type="application/json">${htmlSafeJson(getClientSafeEnv(locals))}</script>\n`,
     );
     const hotloadScript = encoder.encode(buildClerkHotloadScript(locals));
 
diff --git a/packages/shared/src/__tests__/htmlSafeJson.spec.ts b/packages/shared/src/__tests__/htmlSafeJson.spec.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+
+import { htmlSafeJson } from '../htmlSafeJson';
+
+describe('htmlSafeJson', () => {
+  it('escapes </script> breakout sequences so they cannot terminate a script element', () => {
+    const payload = { bio: '</script><script>alert(1)</script>' };
+    const out = htmlSafeJson(payload);
+
+    expect(out).not.toContain('</');
+    expect(out).not.toContain('<');
+    expect(out).not.toContain('>');
+    expect(out).not.toContain('/');
+    expect(JSON.parse(out)).toEqual(payload);
+  });
+
+  it('escapes U+2028 and U+2029 line terminators', () => {
+    const payload = { sep: '  ' };
+    const out = htmlSafeJson(payload);
+
+    expect(out).toContain('\\u2028');
+    expect(out).toContain('\\u2029');
+    expect(out).not.toContain(' ');
+    expect(out).not.toContain(' ');
+    expect(JSON.parse(out)).toEqual(payload);
+  });
+
+  it('round-trips arbitrary nested values', () => {
+    const payload = { a: 1, b: 'plain', c: { d: ['x', '</script>', null] }, e: true };
+    expect(JSON.parse(htmlSafeJson(payload))).toEqual(payload);
+  });
+
+  it('returns "undefined" when JSON.stringify yields undefined', () => {
+    expect(htmlSafeJson(undefined)).toBe('undefined');
+    expect(htmlSafeJson(() => {})).toBe('undefined');
+  });
+});
diff --git a/packages/shared/src/htmlSafeJson.ts b/packages/shared/src/htmlSafeJson.ts
@@ -0,0 +1,19 @@
+// `<`, `>`, `/` (to neutralize `</script>` breakouts) plus the U+2028/U+2029 line
+// terminators, which are valid in JSON strings but break executable script contexts.
+const ESCAPE_REGEX = /[<>/\u2028\u2029]/g;
+
+/**
+ * `JSON.stringify` that is safe to embed directly inside an HTML `<script>` element.
+ *
+ * `JSON.stringify` leaves `<`, `>` and `/` untouched, so a `</script>` substring in any
+ * string value would break out of the surrounding script block (XSS). Escaping those
+ * characters to their `\uXXXX` forms keeps the value byte-identical after `JSON.parse`
+ * while preventing the HTML parser from terminating the element early.
+ */
+export function htmlSafeJson(value: unknown): string {
+  const json = JSON.stringify(value);
+  if (json === undefined) {
+    return 'undefined';
+  }
+  return json.replace(ESCAPE_REGEX, ch => `\\u${ch.charCodeAt(0).toString(16).padStart(4, '0')}`);
+}
diff --git a/packages/tanstack-react-start/src/client/ClerkProvider.tsx b/packages/tanstack-react-start/src/client/ClerkProvider.tsx
@@ -1,4 +1,5 @@
 import { InternalClerkProvider as ReactClerkProvider, type Ui } from '@clerk/react/internal';
+import { htmlSafeJson } from '@clerk/shared/htmlSafeJson';
 import { ScriptOnce } from '@tanstack/react-router';
 import { getGlobalStartContext } from '@tanstack/react-start';
 import { useEffect } from 'react';
@@ -49,7 +50,7 @@ export function ClerkProvider<TUi extends Ui = Ui>({
 
   return (
     <>
-      <ScriptOnce>{`window.__clerk_init_state = ${JSON.stringify(clerkInitialState)};`}</ScriptOnce>
+      <ScriptOnce>{`window.__clerk_init_state = ${htmlSafeJson(clerkInitialState)};`}</ScriptOnce>
       <ClerkOptionsProvider options={mergedProps}>
         <ReactClerkProvider
           initialState={clerkSsrState}
