From a4c3ac9781c3081e36f554c077cb879b3be65fa3 Mon Sep 17 00:00:00 2001
From: Roomote <roomote@roomote.dev>
Date: Fri, 17 Jul 2026 03:55:12 +0000
Subject: [PATCH] fix: escape theme boot storage key for script-context
 embedding

Apply CodeQL-recommended post-JSON.stringify escapes so the inline FOUC
theme boot script cannot break out of a JavaScript/HTML script context.
---
 apps/web/src/lib/shared/theme-boot.test.ts | 30 +++++++++++++++++++---
 apps/web/src/lib/shared/theme-boot.ts      | 28 +++++++++++++++++---
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/lib/shared/theme-boot.test.ts b/apps/web/src/lib/shared/theme-boot.test.ts
index dda5ed571..c386af099 100644
--- a/apps/web/src/lib/shared/theme-boot.test.ts
+++ b/apps/web/src/lib/shared/theme-boot.test.ts
@@ -1,4 +1,9 @@
-import { getThemeBootScript, resolveBootColorTheme } from './theme-boot';
+import {
+  escapeJsonForJsCode,
+  getThemeBootScript,
+  resolveBootColorTheme,
+} from './theme-boot';
+import { PERSONAL_THEME_STORAGE_KEY } from '@/types/preferences';
 
 describe('theme boot helpers', () => {
   it('resolves explicit light and dark values directly', () => {
@@ -11,7 +16,26 @@ describe('theme boot helpers', () => {
     expect(resolveBootColorTheme('sepia', false)).toBe('light');
   });
 
-  it('includes the Roomote storage key in the bootstrap script', () => {
-    expect(getThemeBootScript()).toContain('roomote-color-theme');
+  it('escapes script-breakout characters after JSON.stringify', () => {
+    const breakout = JSON.stringify('</script><script>alert(1)//');
+    const escaped = escapeJsonForJsCode(breakout);
+
+    expect(escaped).not.toContain('<');
+    expect(escaped).not.toContain('>');
+    expect(escaped).not.toContain('/');
+    expect(JSON.parse(escaped)).toBe('</script><script>alert(1)//');
+  });
+
+  it('embeds a script-context-safe storage key that still resolves correctly', () => {
+    const script = getThemeBootScript();
+    const match = script.match(/localStorage\.getItem\(([\s\S]*?)\);/);
+    const embeddedLiteral = match?.[1];
+
+    expect(embeddedLiteral).toBeDefined();
+    expect(JSON.parse(embeddedLiteral!)).toBe(PERSONAL_THEME_STORAGE_KEY);
+    expect(embeddedLiteral).toBe(
+      escapeJsonForJsCode(JSON.stringify(PERSONAL_THEME_STORAGE_KEY)),
+    );
+    expect(script).toContain('localStorage.getItem(');
   });
 });
diff --git a/apps/web/src/lib/shared/theme-boot.ts b/apps/web/src/lib/shared/theme-boot.ts
index f960fe072..ab30212de 100644
--- a/apps/web/src/lib/shared/theme-boot.ts
+++ b/apps/web/src/lib/shared/theme-boot.ts
@@ -7,6 +7,27 @@ import {
 
 type ResolvedPersonalColorTheme = Exclude<PersonalColorTheme, 'system'>;
 
+const UNSAFE_JS_CODE_CHARS: Record<string, string> = {
+  '<': '\\u003C',
+  '>': '\\u003E',
+  '/': '\\u002F',
+  '\b': '\\b',
+  '\f': '\\f',
+  '\n': '\\n',
+  '\r': '\\r',
+  '\t': '\\t',
+  '\0': '\\0',
+  '\u2028': '\\u2028',
+  '\u2029': '\\u2029',
+};
+
+export function escapeJsonForJsCode(json: string): string {
+  return json.replace(
+    /[<>/\b\f\n\r\t\0\u2028\u2029]/g,
+    (ch) => UNSAFE_JS_CODE_CHARS[ch] ?? ch,
+  );
+}
+
 export function resolveBootColorTheme(
   storedTheme: unknown,
   systemPrefersDark: boolean,
@@ -23,7 +44,8 @@ export function resolveBootColorTheme(
 }
 
 export function getThemeBootScript(): string {
-  return `(function(){try{var d=document.documentElement;var t=localStorage.getItem(${JSON.stringify(
-    PERSONAL_THEME_STORAGE_KEY,
-  )});var r=t==="light"||t==="dark"||t==="system"?t:"system";var c=r==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":r==="system"?"light":r;d.classList.remove("light","dark");d.classList.add(c);d.style.colorScheme=c;}catch(e){}})();`;
+  const storageKeyLiteral = escapeJsonForJsCode(
+    JSON.stringify(PERSONAL_THEME_STORAGE_KEY),
+  );
+  return `(function(){try{var d=document.documentElement;var t=localStorage.getItem(${storageKeyLiteral});var r=t==="light"||t==="dark"||t==="system"?t:"system";var c=r==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":r==="system"?"light":r;d.classList.remove("light","dark");d.classList.add(c);d.style.colorScheme=c;}catch(e){}})();`;
 }