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

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}

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

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));
 

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');
+ });
+});

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')}`);
+}

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}