HTML-safe JSON serialization

Author: koculu

frontend/theme/studioColorHead.test.ts

@@ -0,0 +1,74 @@
+import { Script } from 'node:vm'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { buildSiteColorInitScript } from './studioColorHead'
+
+const config = vi.hoisted(() => ({
+  defaultColor: 'cobalt',
+  storageKey: 'purestack-site-color',
+  ids: ['cobalt', 'violet'],
+}))
+
+vi.mock('./studioColorPresets', () => ({
+  get DEFAULT_SITE_COLOR() {
+    return config.defaultColor
+  },
+  get SITE_COLOR_STORAGE_KEY() {
+    return config.storageKey
+  },
+  get studioColorPresets() {
+    return config.ids.map((id) => ({ id }))
+  },
+}))
+
+function runStartup(stored: string | null, unavailable = false) {
+  const attributes = new Map<string, string>()
+  const getItem = vi.fn((key: string) => {
+    expect(key).toBe(config.storageKey)
+    if (unavailable) throw new Error('Storage unavailable')
+    return stored
+  })
+  new Script(buildSiteColorInitScript()).runInNewContext({
+    localStorage: { getItem },
+    document: {
+      documentElement: {
+        setAttribute: (name: string, value: string) =>
+          attributes.set(name, value),
+      },
+    },
+  })
+  expect(getItem).toHaveBeenCalledOnce()
+  return attributes.get('data-site-color')
+}
+
+describe('site color startup serialization', () => {
+  beforeEach(() => {
+    config.defaultColor = 'cobalt'
+    config.storageKey = 'purestack-site-color'
+    config.ids = ['cobalt', 'violet']
+  })
+
+  it('keeps script-closing markup inside serialized configuration strings', () => {
+    const payload =
+      '</ScRiPt><script>throw new Error("injected")</script><!--\u2028\u2029"\\'
+    config.defaultColor = payload
+    config.storageKey = payload
+    config.ids = [payload, 'violet']
+
+    expect(buildSiteColorInitScript()).not.toMatch(/[<\u2028\u2029]/)
+    expect(runStartup(null)).toBe(payload)
+    expect(runStartup(payload)).toBe(payload)
+    expect(runStartup('violet')).toBe('violet')
+  })
+
+  it.each([
+    ['violet', 'violet'],
+    [null, 'cobalt'],
+    ['</script><script>throw new Error("injected")</script>', 'cobalt'],
+  ])('validates the stored color %j', (stored, expected) => {
+    expect(runStartup(stored)).toBe(expected)
+  })
+
+  it('applies the default when storage is unavailable', () => {
+    expect(runStartup(null, true)).toBe('cobalt')
+  })
+})

frontend/theme/studioColorHead.ts

@@ -12,8 +12,20 @@ import {
 
 /** Runs before the stylesheet links and body, independently of the picker module. */
 export function buildSiteColorInitScript() {
-  const ids = JSON.stringify(studioColorPresets.map((preset) => preset.id))
-  return `(()=>{let c=${JSON.stringify(DEFAULT_SITE_COLOR)};try{let s=localStorage.getItem(${JSON.stringify(SITE_COLOR_STORAGE_KEY)});if(${ids}.includes(s))c=s}catch{}document.documentElement.setAttribute("data-site-color",c)})();`
+  const ids = serializeInlineScriptValue(
+    studioColorPresets.map((preset) => preset.id),
+  )
+  const defaultColor = serializeInlineScriptValue(DEFAULT_SITE_COLOR)
+  const storageKey = serializeInlineScriptValue(SITE_COLOR_STORAGE_KEY)
+  return `(()=>{let c=${defaultColor};try{let s=localStorage.getItem(${storageKey});if(${ids}.includes(s))c=s}catch{}document.documentElement.setAttribute("data-site-color",c)})();`
+}
+
+/** JSON string escaping alone does not prevent an HTML </script> terminator. */
+function serializeInlineScriptValue(value: string | readonly string[]) {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
 }
 
 const criticalStyles = new Map<boolean, string>()