[AI] Fix path traversal, spaces in font URLs, and add embedThemeFonts tests

Reject path-traversal (../) and root-anchored (/) font paths in
embedThemeFonts to prevent URL manipulation. Fix URL regex to handle
quoted filenames with spaces (e.g. "Inter Variable.woff2"). Add unit
tests covering both security validations and normal embedding flow.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/desktop-client/index.html

@@ -31,7 +31,8 @@
       body,
       button,
       input {
-        font-family:
+        font-family: var(
+          --font-family,
           'Inter Variable',
           -apple-system,
           BlinkMacSystemFont,
@@ -45,7 +46,8 @@
           'Helvetica Neue',
           'Helvetica',
           'Arial',
-          sans-serif;
+          sans-serif
+        );
       }
 
       a {
@@ -67,7 +69,8 @@
       input,
       textarea {
         font-size: 1em;
-        font-family:
+        font-family: var(
+          --font-family,
           'Inter Variable',
           -apple-system,
           BlinkMacSystemFont,
@@ -81,7 +84,8 @@
           'Helvetica Neue',
           'Helvetica',
           'Arial',
-          sans-serif;
+          sans-serif
+        );
         font-feature-settings: 'ss01', 'ss04';
       }
 

packages/desktop-client/public/_headers

@@ -1,10 +1,10 @@
 /*
   Cross-Origin-Opener-Policy: same-origin
   Cross-Origin-Embedder-Policy: require-corp
-  Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; connect-src http: https:;
+  Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src http: https:;
 
 /kcab/*
-  Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; connect-src http: https:;
+  Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src http: https:;
 
 /*.wasm
   Content-Type: application/wasm

packages/desktop-client/src/components/settings/ThemeInstaller.tsx

@@ -17,6 +17,7 @@ import { Link } from '@desktop-client/components/common/Link';
 import { FixedSizeList } from '@desktop-client/components/FixedSizeList';
 import { useThemeCatalog } from '@desktop-client/hooks/useThemeCatalog';
 import {
+  embedThemeFonts,
   extractRepoOwner,
   fetchThemeCss,
   generateThemeId,
@@ -166,8 +167,12 @@ export function ThemeInstaller({
       setSelectedCatalogTheme(theme);
 
       const normalizedRepo = normalizeGitHubRepo(theme.repo);
+      // Fetch CSS and embed any referenced font files as data: URIs
+      const cssWithFonts = fetchThemeCss(theme.repo).then(css =>
+        embedThemeFonts(css, theme.repo),
+      );
       await installTheme({
-        css: fetchThemeCss(theme.repo),
+        css: cssWithFonts,
         name: theme.name,
         repo: normalizedRepo,
         id: generateThemeId(normalizedRepo),

packages/desktop-client/src/style/customThemes.test.ts

@@ -1,9 +1,23 @@
 // oxlint-disable eslint/no-script-url
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { parseInstalledTheme, validateThemeCss } from './customThemes';
+import {
+  embedThemeFonts,
+  MAX_FONT_FILE_SIZE,
+  parseInstalledTheme,
+  validateThemeCss,
+} from './customThemes';
 import type { InstalledTheme } from './customThemes';
 
+// Small valid woff2 data URI for testing (actual content doesn't matter for validation)
+const TINY_WOFF2_BASE64 = 'AAAAAAAAAA==';
+const TINY_WOFF2_DATA_URI = `data:font/woff2;base64,${TINY_WOFF2_BASE64}`;
+const FONT_FACE_BLOCK = `@font-face {
+  font-family: 'Test Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+  font-display: swap;
+}`;
+
 describe('validateThemeCss', () => {
   describe('valid CSS', () => {
     it('should accept valid :root with CSS variables', () => {
@@ -74,7 +88,7 @@ describe('validateThemeCss', () => {
       },
     ])('should reject $description', ({ css }) => {
       expect(() => validateThemeCss(css)).toThrow(
-        'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+        'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
       );
     });
   });
@@ -90,7 +104,7 @@ describe('validateThemeCss', () => {
         color: red;
       }`,
         expectedError:
-          'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+          'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
       },
       {
         description: 'multiple selectors',
@@ -101,7 +115,7 @@ describe('validateThemeCss', () => {
         --color-primary: #ffffff;
       }`,
         expectedError:
-          'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+          'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
       },
       {
         description: 'media queries',
@@ -114,7 +128,7 @@ describe('validateThemeCss', () => {
         }
       }`,
         expectedError:
-          'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+          'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
       },
       {
         description: 'custom selector before :root',
@@ -125,7 +139,7 @@ describe('validateThemeCss', () => {
         --color-primary: #007bff;
       }`,
         expectedError:
-          'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+          'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
       },
     ])('should reject CSS with $description', ({ css, expectedError }) => {
       expect(() => validateThemeCss(css)).toThrow(expectedError);
@@ -271,7 +285,7 @@ describe('validateThemeCss', () => {
       },
     ])('should reject $description', ({ css }) => {
       expect(() => validateThemeCss(css)).toThrow(
-        'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+        'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
       );
     });
   });
@@ -779,12 +793,6 @@ describe('validateThemeCss', () => {
         --spacing: 10px  20px;
       }`,
       },
-      {
-        description: 'value with comma-separated values',
-        css: `:root {
-        --font-family: Arial, sans-serif;
-      }`,
-      },
       {
         description: 'property name with invalid characters',
         css: `:root {
@@ -868,6 +876,337 @@ describe('validateThemeCss', () => {
   });
 });
 
+describe('validateThemeCss - font properties (--font-*)', () => {
+  describe('valid font-family values', () => {
+    it.each([
+      {
+        description: 'single generic family',
+        css: `:root { --font-family: sans-serif; }`,
+      },
+      {
+        description: 'single generic family (serif)',
+        css: `:root { --font-family: serif; }`,
+      },
+      {
+        description: 'single generic family (monospace)',
+        css: `:root { --font-family: monospace; }`,
+      },
+      {
+        description: 'system-ui keyword',
+        css: `:root { --font-family: system-ui; }`,
+      },
+      {
+        description: 'bundled font (Inter Variable)',
+        css: `:root { --font-family: Inter Variable; }`,
+      },
+      {
+        description: 'quoted bundled font',
+        css: `:root { --font-family: 'Inter Variable'; }`,
+      },
+      {
+        description: 'double-quoted bundled font',
+        css: `:root { --font-family: "Inter Variable"; }`,
+      },
+      {
+        description: 'web-safe font (Georgia)',
+        css: `:root { --font-family: Georgia; }`,
+      },
+      {
+        description: 'web-safe font (Times New Roman) quoted',
+        css: `:root { --font-family: 'Times New Roman'; }`,
+      },
+      {
+        description: 'comma-separated font stack',
+        css: `:root { --font-family: Georgia, serif; }`,
+      },
+      {
+        description: 'full font stack with multiple fonts',
+        css: `:root { --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }`,
+      },
+      {
+        description: 'monospace font stack',
+        css: `:root { --font-mono: 'Fira Code', Consolas, Monaco, monospace; }`,
+      },
+      {
+        description: 'case-insensitive matching (arial)',
+        css: `:root { --font-family: arial; }`,
+      },
+      {
+        description: 'case-insensitive matching (GEORGIA)',
+        css: `:root { --font-family: GEORGIA; }`,
+      },
+      {
+        description: 'macOS system font',
+        css: `:root { --font-family: 'SF Pro', -apple-system, sans-serif; }`,
+      },
+      {
+        description: 'mixed with color variables',
+        css: `:root {
+        --color-primary: #007bff;
+        --font-family: Georgia, serif;
+        --color-secondary: #6c757d;
+      }`,
+      },
+      {
+        description: '--font-mono property',
+        css: `:root { --font-mono: 'JetBrains Mono', 'Fira Code', monospace; }`,
+      },
+      {
+        description: '--font-heading property',
+        css: `:root { --font-heading: Palatino, 'Book Antiqua', serif; }`,
+      },
+    ])('should accept CSS with $description', ({ css }) => {
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+  });
+
+  describe('invalid font-family values - security', () => {
+    it.each([
+      {
+        description: 'empty value',
+        css: `:root { --font-family: ; }`,
+        expectedPattern: /value must not be empty/,
+      },
+      {
+        description: 'url() function in font value',
+        css: `:root { --font-family: url('https://evil.com/font.woff2'); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+      {
+        description: 'url() with data: URI',
+        css: `:root { --font-family: url(data:font/woff2;base64,abc123); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+      {
+        description: 'expression() in font value',
+        css: `:root { --font-family: expression(alert(1)); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+      {
+        description: 'empty font name between commas',
+        css: `:root { --font-family: Arial, , sans-serif; }`,
+        expectedPattern: /empty font name/,
+      },
+      {
+        description: 'Google Fonts URL attempt',
+        css: `:root { --font-family: url(https://fonts.googleapis.com/css2?family=Roboto); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+      {
+        description: 'local() function',
+        css: `:root { --font-family: local(Arial); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+      {
+        description: 'format() function',
+        css: `:root { --font-family: format('woff2'); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+      {
+        description: 'rgb() function in font property',
+        css: `:root { --font-family: rgb(0, 0, 0); }`,
+        expectedPattern: /function calls are not allowed/,
+      },
+    ])('should reject CSS with $description', ({ css, expectedPattern }) => {
+      expect(() => validateThemeCss(css)).toThrow(expectedPattern);
+    });
+  });
+
+  describe('any font name is valid (no allowlist)', () => {
+    it.each([
+      {
+        description: 'Comic Sans MS',
+        css: `:root { --font-family: 'Comic Sans MS'; }`,
+      },
+      {
+        description: 'custom font name',
+        css: `:root { --font-family: 'My Custom Font', sans-serif; }`,
+      },
+      {
+        description: 'arbitrary string',
+        css: `:root { --font-family: something-random; }`,
+      },
+      { description: 'Papyrus', css: `:root { --font-family: Papyrus; }` },
+    ])('should accept $description as a font name', ({ css }) => {
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+  });
+});
+
+describe('validateThemeCss - @font-face blocks', () => {
+  describe('valid @font-face with data: URIs', () => {
+    it('should accept @font-face with data: URI and :root', () => {
+      const css = `${FONT_FACE_BLOCK}
+:root { --font-family: 'Test Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept multiple @font-face blocks', () => {
+      const css = `@font-face {
+  font-family: 'Test Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Test Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+:root { --font-family: 'Test Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept @font-face with font/woff MIME type', () => {
+      const css = `@font-face {
+  font-family: 'Woff Font';
+  src: url('data:font/woff;base64,${TINY_WOFF2_BASE64}') format('woff');
+}
+:root { --font-family: 'Woff Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept @font-face with font/ttf MIME type', () => {
+      const css = `@font-face {
+  font-family: 'TTF Font';
+  src: url('data:font/ttf;base64,${TINY_WOFF2_BASE64}') format('truetype');
+}
+:root { --font-family: 'TTF Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept @font-face with application/font-woff2 MIME type', () => {
+      const css = `@font-face {
+  font-family: 'App Font';
+  src: url('data:application/font-woff2;base64,${TINY_WOFF2_BASE64}') format('woff2');
+}
+:root { --font-family: 'App Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept @font-face with font-stretch', () => {
+      const css = `@font-face {
+  font-family: 'Stretch Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+  font-stretch: condensed;
+}
+:root { --font-family: 'Stretch Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept @font-face with unicode-range', () => {
+      const css = `@font-face {
+  font-family: 'Unicode Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+  unicode-range: U+0000-00FF;
+}
+:root { --font-family: 'Unicode Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should allow custom font name in --font-family after @font-face declaration', () => {
+      const css = `@font-face {
+  font-family: 'My Custom Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+}
+:root { --font-family: 'My Custom Font', Georgia, serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should accept @font-face alongside color variables', () => {
+      const css = `${FONT_FACE_BLOCK}
+:root {
+  --color-primary: #007bff;
+  --font-family: 'Test Font', sans-serif;
+  --color-secondary: #6c757d;
+}`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+  });
+
+  describe('invalid @font-face - security', () => {
+    it('should reject @font-face with remote HTTP URL', () => {
+      const css = `@font-face {
+  font-family: 'Bad Font';
+  src: url('https://evil.com/font.woff2') format('woff2');
+}
+:root { --font-family: 'Bad Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
+    });
+
+    it('should reject @font-face with remote HTTPS URL', () => {
+      const css = `@font-face {
+  font-family: 'Bad Font';
+  src: url('https://fonts.example.com/custom.woff2') format('woff2');
+}
+:root { --font-family: 'Bad Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
+    });
+
+    it('should reject @font-face with relative URL (not embedded)', () => {
+      const css = `@font-face {
+  font-family: 'Bad Font';
+  src: url('./fonts/custom.woff2') format('woff2');
+}
+:root { --font-family: 'Bad Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
+    });
+
+    it('should reject @font-face with javascript: protocol', () => {
+      const css = `@font-face {
+  font-family: 'Bad Font';
+  src: url('javascript:alert(1)');
+}
+:root { --font-family: 'Bad Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
+    });
+
+    it('should accept any font name in --font-family (no allowlist)', () => {
+      const css = `@font-face {
+  font-family: 'Declared Font';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+}
+:root { --font-family: 'Undeclared Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should reject oversized font data', () => {
+      // Create a base64 string that would decode to > MAX_FONT_FILE_SIZE
+      const oversizedBase64 = 'A'.repeat(
+        Math.ceil((MAX_FONT_FILE_SIZE * 4) / 3) + 100,
+      );
+      const css = `@font-face {
+  font-family: 'Big Font';
+  src: url('data:font/woff2;base64,${oversizedBase64}') format('woff2');
+}
+:root { --font-family: 'Big Font', sans-serif; }`;
+      expect(() => validateThemeCss(css)).toThrow(/maximum size/);
+    });
+  });
+
+  describe('CSS without @font-face still works', () => {
+    it('should accept plain :root without @font-face', () => {
+      const css = `:root { --color-primary: #007bff; }`;
+      expect(() => validateThemeCss(css)).not.toThrow();
+    });
+
+    it('should reject other at-rules (not @font-face)', () => {
+      const css = `@import url('other.css');
+:root { --color-primary: #007bff; }`;
+      expect(() => validateThemeCss(css)).toThrow();
+    });
+
+    it('should reject @media outside :root', () => {
+      const css = `@media (max-width: 600px) { :root { --color-primary: #ff0000; } }
+:root { --color-primary: #007bff; }`;
+      expect(() => validateThemeCss(css)).toThrow();
+    });
+  });
+});
+
 describe('parseInstalledTheme', () => {
   describe('valid theme JSON', () => {
     it('should parse valid theme with all required fields', () => {
@@ -1133,3 +1472,102 @@ describe('parseInstalledTheme', () => {
     });
   });
 });
+
+describe('embedThemeFonts', () => {
+  const mockFetch = (
+    responseBody: ArrayBuffer,
+    ok = true,
+    status = 200,
+  ): typeof globalThis.fetch =>
+    vi.fn().mockResolvedValue({
+      ok,
+      status,
+      statusText: ok ? 'OK' : 'Not Found',
+      arrayBuffer: () => Promise.resolve(responseBody),
+    } as Partial<Response>);
+
+  const tinyBuffer = new Uint8Array([0, 0, 0, 0, 0, 0, 0, 0]).buffer;
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should rewrite url() references to data URIs', async () => {
+    vi.stubGlobal('fetch', mockFetch(tinyBuffer));
+
+    const css = `@font-face {
+  font-family: 'Test';
+  src: url('fonts/test.woff2') format('woff2');
+}
+:root { --color-primary: #007bff; }`;
+
+    const result = await embedThemeFonts(css, 'owner/repo');
+    expect(result).toContain('data:font/woff2;base64,');
+    expect(result).not.toContain('fonts/test.woff2');
+    expect(result).toContain(':root');
+  });
+
+  it('should handle quoted filenames with spaces', async () => {
+    vi.stubGlobal('fetch', mockFetch(tinyBuffer));
+
+    const css = `@font-face {
+  font-family: 'Inter';
+  src: url("Inter Variable.woff2") format('woff2');
+}
+:root { --color-primary: #007bff; }`;
+
+    const result = await embedThemeFonts(css, 'owner/repo');
+    expect(result).toContain('data:font/woff2;base64,');
+    expect(result).not.toContain('Inter Variable.woff2');
+  });
+
+  it('should reject path traversal with ".."', async () => {
+    const css = `@font-face {
+  font-family: 'Evil';
+  src: url('../escape/font.woff2') format('woff2');
+}
+:root { --color-primary: #007bff; }`;
+
+    await expect(embedThemeFonts(css, 'owner/repo')).rejects.toThrow(
+      'is not allowed',
+    );
+  });
+
+  it('should reject root-anchored paths', async () => {
+    const css = `@font-face {
+  font-family: 'Evil';
+  src: url('/etc/passwd') format('woff2');
+}
+:root { --color-primary: #007bff; }`;
+
+    await expect(embedThemeFonts(css, 'owner/repo')).rejects.toThrow(
+      'is not allowed',
+    );
+  });
+
+  it('should reject oversized font files', async () => {
+    const oversized = new ArrayBuffer(MAX_FONT_FILE_SIZE + 1);
+    vi.stubGlobal('fetch', mockFetch(oversized));
+
+    const css = `@font-face {
+  font-family: 'Big';
+  src: url('big.woff2') format('woff2');
+}
+:root { --color-primary: #007bff; }`;
+
+    await expect(embedThemeFonts(css, 'owner/repo')).rejects.toThrow(
+      'exceeds maximum size',
+    );
+  });
+
+  it('should return CSS unchanged when no url() refs exist', async () => {
+    const css = `@font-face {
+  font-family: 'Test';
+  src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
+}
+:root { --color-primary: #007bff; }`;
+
+    const result = await embedThemeFonts(css, 'owner/repo');
+    expect(result).toBe(css);
+  });
+});

packages/desktop-client/src/style/customThemes.ts

@@ -79,6 +79,63 @@ export async function fetchDirectCss(url: string): Promise<string> {
   return response.text();
 }
 
+/** Strip surrounding single or double quotes from a string. */
+function stripQuotes(s: string): string {
+  const t = s.trim();
+  if (
+    (t.startsWith("'") && t.endsWith("'")) ||
+    (t.startsWith('"') && t.endsWith('"'))
+  ) {
+    return t.slice(1, -1).trim();
+  }
+  return t;
+}
+
+/**
+ * Validate a font-family value for a --font-* CSS variable.
+ *
+ * Any font name is allowed — referencing a font the user doesn't have
+ * installed simply triggers the browser's normal fallback behaviour
+ * (no network requests). The only things we block are function calls
+ * (url(), expression(), etc.) because those could load external resources
+ * or execute expressions.
+ *
+ * Quoted or unquoted font names are both accepted.
+ *
+ * Examples of accepted values:
+ *   Georgia, serif
+ *   'Fira Code', monospace
+ *   "My Theme Font", sans-serif
+ */
+function validateFontFamilyValue(value: string, property: string): void {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    throw new Error(
+      `Invalid font-family value for "${property}": value must not be empty.`,
+    );
+  }
+
+  // Split on commas, then validate each font name
+  const families = trimmed.split(',');
+
+  for (const raw of families) {
+    const name = stripQuotes(raw);
+
+    if (!name) {
+      throw new Error(
+        `Invalid font-family value for "${property}": empty font name in comma-separated list.`,
+      );
+    }
+
+    // Reject anything that looks like a function call (url(), expression(), etc.)
+    if (/\(/.test(name)) {
+      throw new Error(
+        `Invalid font-family value for "${property}": function calls are not allowed. Only font names are permitted.`,
+      );
+    }
+  }
+}
+
 /** Only var(--custom-property-name) is allowed; no fallbacks. Variable name: -- then [a-zA-Z0-9_-]+ (no trailing dash). */
 const VAR_ONLY_PATTERN = /^var\s*\(\s*(--[a-zA-Z0-9_-]+)\s*\)$/i;
 
@@ -92,8 +149,15 @@ function isValidSimpleVarValue(value: string): boolean {
 /**
  * Validate that a CSS property value only contains allowed content (allowlist approach).
  * Allows: colors (hex, rgb/rgba, hsl/hsla), lengths, numbers, keywords, and var(--name) only (no fallbacks).
+ * Font properties (--font-*) are validated against a safe font family allowlist instead.
  */
 function validatePropertyValue(value: string, property: string): void {
+  // Font properties use a dedicated validator that accepts any font name
+  // but rejects function calls (url(), expression(), etc.).
+  if (/^--font-/i.test(property)) {
+    validateFontFamilyValue(value, property);
+    return;
+  }
   if (!value || value.length === 0) {
     return; // Empty values are allowed
   }
@@ -145,79 +209,152 @@ function validatePropertyValue(value: string, property: string): void {
   );
 }
 
+// ─── @font-face validation ──────────────────────────────────────────────────
+
+/** Maximum size of a single base64-encoded font (bytes of decoded data). 2 MB. */
+export const MAX_FONT_FILE_SIZE = 2 * 1024 * 1024;
+
+/** Maximum total size of all embedded font data across all @font-face blocks. 10 MB. */
+export const MAX_TOTAL_FONT_SIZE = 10 * 1024 * 1024;
+
 /**
- * Validate that CSS contains only :root { ... } with CSS custom property (variable) declarations.
- * Must contain exactly :root { ... } and nothing else.
- * Returns the validated CSS or throws an error.
+ * Extract @font-face blocks from CSS. Returns the blocks and the remaining CSS.
+ * Only matches top-level @font-face blocks (not nested inside other rules).
  */
-export function validateThemeCss(css: string): string {
-  // Strip multi-line comments before validation
-  // Note: Single-line comments (//) are not stripped to avoid corrupting CSS values like URLs
-  const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+function extractFontFaceBlocks(css: string): {
+  fontFaceBlocks: string[];
+  remaining: string;
+} {
+  const fontFaceBlocks: string[] = [];
+  let remaining = css;
 
-  // Must contain exactly :root { ... } and nothing else
-  // Find :root { ... } and extract content, then check there's nothing after
-  const rootMatch = cleaned.match(/^:root\s*\{/);
-  if (!rootMatch) {
-    throw new Error(
-      'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
-    );
+  // Extract @font-face { ... } blocks one at a time using indexOf-based
+  // parsing. Each iteration removes the matched block from `remaining`.
+  for (;;) {
+    const atIdx = remaining.indexOf('@font-face');
+    if (atIdx === -1) break;
+
+    const openBrace = remaining.indexOf('{', atIdx);
+    if (openBrace === -1) break;
+
+    const closeBrace = remaining.indexOf('}', openBrace + 1);
+    if (closeBrace === -1) break;
+
+    fontFaceBlocks.push(remaining.substring(openBrace + 1, closeBrace).trim());
+    remaining =
+      remaining.substring(0, atIdx) + remaining.substring(closeBrace + 1);
   }
 
-  // Find the opening brace after :root
-  const rootStart = cleaned.indexOf(':root');
-  const openBrace = cleaned.indexOf('{', rootStart);
-
-  if (openBrace === -1) {
-    throw new Error(
-      'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
-    );
+  return { fontFaceBlocks, remaining: remaining.trim() };
 }
 
-  // Find the first closing brace (nested blocks will be caught by the check below)
-  const closeBrace = cleaned.indexOf('}', openBrace + 1);
+/**
+ * Validate @font-face blocks: only data: URIs allowed (no remote URLs).
+ * Enforces size limits to prevent DoS.
+ */
+function validateFontFaceBlocks(fontFaceBlocks: string[]): void {
+  let totalSize = 0;
+  // Match url() with quoted or unquoted content. Quoted URLs use a non-greedy
+  // match up to the closing quote; unquoted URLs match non-whitespace/non-paren.
+  const urlRegex = /url\(\s*(?:'([^']*)'|"([^"]*)"|([^'")\s]+))\s*\)/g;
 
-  if (closeBrace === -1) {
+  for (const block of fontFaceBlocks) {
+    urlRegex.lastIndex = 0;
+    let match;
+    while ((match = urlRegex.exec(block)) !== null) {
+      const uri = (match[1] ?? match[2] ?? match[3]).trim();
+      if (!uri.startsWith('data:')) {
         throw new Error(
-      'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+          'Invalid font src: only data: URIs are allowed in @font-face. ' +
+            'Remote URLs (http/https) are not permitted to protect user privacy. ' +
+            'Font files are automatically embedded when installing from GitHub.',
         );
       }
+      // Estimate decoded size from base64 content
+      const base64Match = uri.match(/;base64,(.+)$/);
+      if (base64Match) {
+        const size = Math.ceil((base64Match[1].length * 3) / 4);
+        if (size > MAX_FONT_FILE_SIZE) {
+          throw new Error(
+            `Font file exceeds maximum size of ${MAX_FONT_FILE_SIZE / 1024 / 1024}MB.`,
+          );
+        }
+        totalSize += size;
+      }
+    }
+  }
 
-  // Extract content inside :root { ... }
-  const rootContent = cleaned.substring(openBrace + 1, closeBrace).trim();
+  if (totalSize > MAX_TOTAL_FONT_SIZE) {
+    throw new Error(
+      `Total embedded font data exceeds maximum of ${MAX_TOTAL_FONT_SIZE / 1024 / 1024}MB.`,
+    );
+  }
+}
 
-  // Check for forbidden at-rules first (before nested block check, since at-rules with braces would trigger that)
-  // Comprehensive list of CSS at-rules that should not be allowed
-  // This includes @import, @media, @keyframes, @font-face, @supports, @charset,
-  // @namespace, @page, @layer, @container, @scope, and any other at-rules
+/**
+ * Split CSS declarations by semicolons, but respect quoted strings and url() contents.
+ * This is needed because data: URIs contain semicolons (e.g., "data:font/woff2;base64,...").
+ */
+function splitDeclarations(content: string): string[] {
+  const declarations: string[] = [];
+  let start = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let parenDepth = 0;
+
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i];
+
+    if (ch === "'" && !inDoubleQuote && parenDepth === 0) {
+      inSingleQuote = !inSingleQuote;
+    } else if (ch === '"' && !inSingleQuote && parenDepth === 0) {
+      inDoubleQuote = !inDoubleQuote;
+    } else if (ch === '(' && !inSingleQuote && !inDoubleQuote) {
+      parenDepth++;
+    } else if (
+      ch === ')' &&
+      !inSingleQuote &&
+      !inDoubleQuote &&
+      parenDepth > 0
+    ) {
+      parenDepth--;
+    }
+
+    if (ch === ';' && !inSingleQuote && !inDoubleQuote && parenDepth === 0) {
+      const trimmed = content.substring(start, i).trim();
+      if (trimmed) declarations.push(trimmed);
+      start = i + 1;
+    }
+  }
+
+  const trimmed = content.substring(start).trim();
+  if (trimmed) declarations.push(trimmed);
+
+  return declarations;
+}
+
+// ─── :root block validation ─────────────────────────────────────────────────
+
+/**
+ * Validate the content inside a :root { ... } block.
+ * Only CSS custom properties (--*) with safe values are allowed.
+ */
+function validateRootContent(rootContent: string): void {
+  // Check for forbidden at-rules inside :root
   if (/@[a-z-]+/i.test(rootContent)) {
     throw new Error(
       'Theme CSS contains forbidden at-rules (@import, @media, @keyframes, etc.). Only CSS variable declarations are allowed inside :root { ... }.',
     );
   }
 
-  // Check for nested blocks (additional selectors) - should not have any { after extracting :root content
+  // Check for nested blocks
   if (/\{/.test(rootContent)) {
     throw new Error(
       'Theme CSS contains nested blocks or additional selectors. Only CSS variable declarations are allowed inside :root { ... }.',
     );
   }
 
-  // Check that there's nothing after the closing brace
-  const afterRoot = cleaned.substring(closeBrace + 1).trim();
-  if (afterRoot.length > 0) {
-    throw new Error(
-      'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
-    );
-  }
-
-  // Parse declarations and validate each one
-  const declarations = rootContent
-    .split(';')
-    .map(d => d.trim())
-    .filter(d => d.length > 0);
-
-  for (const decl of declarations) {
+  for (const decl of splitDeclarations(rootContent)) {
     const colonIndex = decl.indexOf(':');
     if (colonIndex === -1) {
       throw new Error(`Invalid CSS declaration: "${decl}"`);
@@ -271,9 +408,214 @@ export function validateThemeCss(css: string): string {
     const value = decl.substring(colonIndex + 1).trim();
     validatePropertyValue(value, property);
   }
+}
 
-  // Return the original CSS (with :root wrapper) so it can be injected properly
-  return css.trim();
+// ─── Main validation entry point ────────────────────────────────────────────
+
+/**
+ * Validate theme CSS. Accepts:
+ * 1. Optional @font-face blocks (with data: URI fonts only)
+ * 2. Exactly one :root { ... } block with CSS variable declarations
+ *
+ * @font-face blocks must appear before :root.
+ * Returns the validated CSS or throws an error.
+ */
+export function validateThemeCss(css: string): string {
+  // Strip multi-line comments before validation
+  const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+
+  // Extract @font-face blocks (if any) from the CSS
+  const { fontFaceBlocks, remaining } = extractFontFaceBlocks(cleaned);
+
+  // Validate @font-face blocks (reject remote URLs, enforce size limits)
+  validateFontFaceBlocks(fontFaceBlocks);
+
+  // Now validate the remaining CSS (should be exactly :root { ... })
+  const rootMatch = remaining.match(/^:root\s*\{/);
+  if (!rootMatch) {
+    // If there are @font-face blocks but no :root, that's an error
+    // If there's nothing at all, that's also an error
+    throw new Error(
+      'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+    );
+  }
+
+  const rootStart = remaining.indexOf(':root');
+  const openBrace = remaining.indexOf('{', rootStart);
+
+  if (openBrace === -1) {
+    throw new Error(
+      'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+    );
+  }
+
+  const closeBrace = remaining.indexOf('}', openBrace + 1);
+
+  if (closeBrace === -1) {
+    throw new Error(
+      'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+    );
+  }
+
+  const rootContent = remaining.substring(openBrace + 1, closeBrace).trim();
+
+  // Validate :root content
+  validateRootContent(rootContent);
+
+  // Check nothing after :root
+  const afterRoot = remaining.substring(closeBrace + 1).trim();
+  if (afterRoot.length > 0) {
+    throw new Error(
+      'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
+    );
+  }
+
+  // Return the comment-stripped CSS — this is what was actually validated,
+  // so we inject exactly what we checked (defense-in-depth).
+  return cleaned;
+}
+
+// ─── Font embedding (install-time) ─────────────────────────────────────────
+
+/** Map of file extensions to font MIME types for data: URI construction. */
+const FONT_EXTENSION_MIME: Record<string, string> = {
+  '.woff2': 'font/woff2',
+  '.woff': 'font/woff',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/opentype',
+};
+
+/** Convert an ArrayBuffer to a base64 string using chunked processing. */
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  const chunks: string[] = [];
+  // Process in 8 KB chunks to avoid excessive string concatenation
+  for (let i = 0; i < bytes.length; i += 8192) {
+    const chunk = bytes.subarray(i, Math.min(i + 8192, bytes.length));
+    chunks.push(String.fromCharCode(...chunk));
+  }
+  return btoa(chunks.join(''));
+}
+
+/**
+ * Embed fonts referenced in @font-face blocks by fetching them from a GitHub
+ * repo and converting to data: URIs.
+ *
+ * This runs at install time only. Relative URL references like
+ * `url('./fonts/MyFont.woff2')` are resolved relative to the repo's root
+ * directory and fetched from GitHub's raw content API.
+ *
+ * The returned CSS has all font URLs replaced with self-contained data: URIs,
+ * so no network requests are needed at runtime.
+ *
+ * @param css - The raw theme CSS (may contain relative url() references)
+ * @param repo - GitHub repo in "owner/repo" format
+ * @returns CSS with all font URLs replaced by data: URIs
+ */
+export async function embedThemeFonts(
+  css: string,
+  repo: string,
+): Promise<string> {
+  const baseUrl = `https://raw.githubusercontent.com/${repo}/refs/heads/main/`;
+
+  // Collect all url() references that need fetching across all @font-face blocks
+  const urlRegex = /url\(\s*(?:(['"])([^'"]*?)\1|([^'")\s]+))\s*\)/g;
+  type FontRef = {
+    fullMatch: string;
+    quote: string;
+    path: string;
+    cleanPath: string;
+    mime: string;
+  };
+  const fontRefs: FontRef[] = [];
+
+  // Use extractFontFaceBlocks-style indexOf parsing to find @font-face blocks
+  // and their url() references, without duplicating the regex approach
+  let searchCss = css;
+  let offset = 0;
+  for (;;) {
+    const atIdx = searchCss.indexOf('@font-face', 0);
+    if (atIdx === -1) break;
+
+    const openBrace = searchCss.indexOf('{', atIdx);
+    if (openBrace === -1) break;
+
+    const closeBrace = searchCss.indexOf('}', openBrace + 1);
+    if (closeBrace === -1) break;
+
+    const blockContent = searchCss.substring(openBrace + 1, closeBrace);
+
+    // Find url() references within this block
+    let urlMatch;
+    urlRegex.lastIndex = 0;
+    while ((urlMatch = urlRegex.exec(blockContent)) !== null) {
+      const fullMatch = urlMatch[0];
+      const quote = urlMatch[1] || '';
+      const path = urlMatch[2] ?? urlMatch[3];
+
+      // Skip data: URIs — already embedded
+      if (path.startsWith('data:')) continue;
+
+      if (/^https?:\/\//i.test(path)) {
+        throw new Error(
+          `Remote font URL "${path}" is not allowed. Only relative paths to fonts in the same GitHub repo are supported.`,
+        );
+      }
+
+      const cleanPath = path.replace(/^\.\//, '');
+
+      if (cleanPath.startsWith('/') || cleanPath.includes('..')) {
+        throw new Error(
+          `Font path "${path}" is not allowed. Only relative paths within the repo are supported (no "/" prefix or ".." segments).`,
+        );
+      }
+
+      const ext = cleanPath.substring(cleanPath.lastIndexOf('.')).toLowerCase();
+      const mime = FONT_EXTENSION_MIME[ext];
+      if (!mime) {
+        throw new Error(
+          `Unsupported font file extension "${ext}". Supported: ${Object.keys(FONT_EXTENSION_MIME).join(', ')}.`,
+        );
+      }
+
+      fontRefs.push({ fullMatch, quote, path, cleanPath, mime });
+    }
+
+    offset = closeBrace + 1;
+    searchCss = searchCss.substring(offset);
+  }
+
+  if (fontRefs.length === 0) return css;
+
+  // Fetch all fonts in parallel
+  const fetched = await Promise.all(
+    fontRefs.map(async ref => {
+      const fontUrl = baseUrl + ref.cleanPath;
+      const response = await fetch(fontUrl);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch font file "${ref.cleanPath}" from ${fontUrl}: ${response.status} ${response.statusText}`,
+        );
+      }
+      const buffer = await response.arrayBuffer();
+      if (buffer.byteLength > MAX_FONT_FILE_SIZE) {
+        throw new Error(
+          `Font file "${ref.cleanPath}" exceeds maximum size of ${MAX_FONT_FILE_SIZE / 1024 / 1024}MB.`,
+        );
+      }
+      const base64 = arrayBufferToBase64(buffer);
+      return { ref, dataUri: `data:${ref.mime};base64,${base64}` };
+    }),
+  );
+
+  // Replace each url() reference with its data: URI
+  let result = css;
+  for (const { ref, dataUri } of fetched) {
+    const q = ref.quote || "'";
+    result = result.replace(ref.fullMatch, `url(${q}${dataUri}${q})`);
+  }
+
+  return result;
 }
 
 /**

packages/sync-server/src/app.ts

@@ -128,6 +128,10 @@ app.get('/metrics', (_req, res) => {
 app.use((req, res, next) => {
   res.set('Cross-Origin-Opener-Policy', 'same-origin');
   res.set('Cross-Origin-Embedder-Policy', 'require-corp');
+  res.set(
+    'Content-Security-Policy',
+    "default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src http: https:;",
+  );
   next();
 });
 if (process.env.NODE_ENV === 'development') {

upcoming-release-notes/7239.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Custom Themes: allow using a custom font