From dd79ebbb536f79c21dbc9d0111e2ee3387a10625 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Fri, 17 Jul 2026 20:09:18 +0800
Subject: [PATCH 1/2] fix(server): allow inline styles in CSP so web math
 renders on non-loopback binds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The security CSP fell back to default-src 'self' for styles, which strips
the inline style attributes that KaTeX (injected via innerHTML) uses for
all glyph positioning — formulas collapsed into overlapping characters on
any non-loopback-served web UI. Shiki highlighting and Mermaid diagrams
hit the same mechanism. Add style-src 'self' 'unsafe-inline'; scripts
remain strictly restricted.
---
 .changeset/great-math-spoons.md               |  5 ++
 .../src/middleware/securityHeaders.ts         |  8 ++-
 .../kap-server/test/hostExposure.e2e.test.ts  |  2 +-
 .../kap-server/test/securityExposure.test.ts  |  2 +-
 .../kap-server/test/securityHeaders.test.ts   | 52 +++++++++++++++++++
 5 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/great-math-spoons.md
 create mode 100644 packages/kap-server/test/securityHeaders.test.ts

diff --git a/.changeset/great-math-spoons.md b/.changeset/great-math-spoons.md
new file mode 100644
index 0000000000..74e301a442
--- /dev/null
+++ b/.changeset/great-math-spoons.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Fix LaTeX formulas rendering as garbled overlapping text when the web UI is accessed over the network; the server's content security policy now allows the inline styles that math and code highlighting rely on, while scripts remain strictly restricted.
diff --git a/packages/kap-server/src/middleware/securityHeaders.ts b/packages/kap-server/src/middleware/securityHeaders.ts
index 6df53f7502..b1bab92d02 100644
--- a/packages/kap-server/src/middleware/securityHeaders.ts
+++ b/packages/kap-server/src/middleware/securityHeaders.ts
@@ -20,6 +20,12 @@
  *     Invariant: the served bundle must contain no inline scripts (guarded
  *     by a kimi-web test), so plain `script-src` falling back to
  *     `default-src 'self'` suffices.
+ *     `style-src` needs 'unsafe-inline': KaTeX math and Shiki highlighting
+ *     are rendered off-thread and injected via innerHTML with per-glyph
+ *     `style="…"` attributes (KaTeX carries ALL vertical/font sizing in
+ *     them — stripping collapses formulas into overlapping glyphs), and
+ *     Mermaid embeds an inline <style> in its SVG. Only styles are
+ *     relaxed; script-src stays strict.
  *   - `Strict-Transport-Security` — ONLY when `opts.tls === true`. In this
  *     phase TLS is terminated by a reverse proxy (Caddy/nginx), so `start.ts`
  *     passes `tls: false` and HSTS is omitted here; the proxy is responsible
@@ -35,7 +41,7 @@ export interface SecurityHeadersOptions {
 
 const HSTS_VALUE = 'max-age=31536000';
 const CONTENT_SECURITY_POLICY =
-  "default-src 'self'; img-src 'self' data: blob:; font-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'self'";
+  "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'self'";
 
 /**
  * Build the `onSend` hook. Returns the payload unchanged so Fastify continues
diff --git a/packages/kap-server/test/hostExposure.e2e.test.ts b/packages/kap-server/test/hostExposure.e2e.test.ts
index bdf6e7d2e4..cccdde2928 100644
--- a/packages/kap-server/test/hostExposure.e2e.test.ts
+++ b/packages/kap-server/test/hostExposure.e2e.test.ts
@@ -116,7 +116,7 @@ describe('real password path (verifyPassword)', () => {
     expect(res.status).toBe(200);
     expect(res.headers.get('x-content-type-options')).toBe('nosniff');
     expect(res.headers.get('content-security-policy')).toBe(
-      "default-src 'self'; img-src 'self' data: blob:; font-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'self'",
+      "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'self'",
     );
   });
 
diff --git a/packages/kap-server/test/securityExposure.test.ts b/packages/kap-server/test/securityExposure.test.ts
index acef7b23a7..5b25995802 100644
--- a/packages/kap-server/test/securityExposure.test.ts
+++ b/packages/kap-server/test/securityExposure.test.ts
@@ -73,7 +73,7 @@ describe('server-v2 exposure hardening hooks', () => {
     expect(res.headers['x-content-type-options']).toBe('nosniff');
     expect(res.headers['referrer-policy']).toBe('no-referrer');
     expect(res.headers['content-security-policy']).toBe(
-      "default-src 'self'; img-src 'self' data: blob:; font-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'self'",
+      "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; form-action 'self'; base-uri 'none'; frame-ancestors 'self'",
     );
     expect(res.headers['strict-transport-security']).toBeUndefined();
   });
diff --git a/packages/kap-server/test/securityHeaders.test.ts b/packages/kap-server/test/securityHeaders.test.ts
new file mode 100644
index 0000000000..ecb4de3026
--- /dev/null
+++ b/packages/kap-server/test/securityHeaders.test.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+
+import { createSecurityHeadersHook } from '../src/middleware/securityHeaders';
+
+function captureHeaders() {
+  const headers = new Map<string, string>();
+  const reply = {
+    header(name: string, value: string) {
+      headers.set(name.toLowerCase(), value);
+      return reply;
+    },
+  };
+  return { headers, reply };
+}
+
+describe('createSecurityHeadersHook', () => {
+  it('stamps the defensive headers and returns the payload unchanged', async () => {
+    const { headers, reply } = captureHeaders();
+    const hook = createSecurityHeadersHook({ tls: false });
+    const payload = { ok: true };
+    const result = await hook({} as never, reply as never, payload);
+    expect(result).toBe(payload);
+    expect(headers.get('x-content-type-options')).toBe('nosniff');
+    expect(headers.get('referrer-policy')).toBe('no-referrer');
+    expect(headers.get('content-security-policy')).toBeDefined();
+  });
+
+  // KaTeX math and Shiki highlighting are injected via innerHTML with
+  // per-glyph `style="…"` attributes (KaTeX carries ALL vertical/font sizing
+  // in them — stripping collapses formulas into overlapping glyphs), and
+  // Mermaid embeds an inline <style> in its SVG. style-src must therefore
+  // allow inline styles; script-src must stay strict.
+  it('allows inline styles while keeping inline scripts forbidden', async () => {
+    const { headers, reply } = captureHeaders();
+    const hook = createSecurityHeadersHook({ tls: false });
+    await hook({} as never, reply as never, 'payload');
+    const csp = headers.get('content-security-policy');
+    expect(csp).toContain("style-src 'self' 'unsafe-inline'");
+    expect(csp).not.toContain("script-src 'self' 'unsafe-inline'");
+    expect(csp).toContain("default-src 'self'");
+  });
+
+  it('emits HSTS only when TLS is terminated at the server', async () => {
+    const plain = captureHeaders();
+    await createSecurityHeadersHook({ tls: false })({} as never, plain.reply as never, '');
+    expect(plain.headers.has('strict-transport-security')).toBe(false);
+
+    const tls = captureHeaders();
+    await createSecurityHeadersHook({ tls: true })({} as never, tls.reply as never, '');
+    expect(tls.headers.get('strict-transport-security')).toBe('max-age=31536000');
+  });
+});

From f3aa87c7c95232e352f950429ff9d87e009870b7 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Fri, 17 Jul 2026 20:17:10 +0800
Subject: [PATCH 2/2] test(server): assert the effective script-src in the CSP
 regression test

A negative substring check only rejects one exact string: default-src
gaining 'unsafe-inline' (inline <script> allowed via fallback) or an
explicit script-src 'unsafe-inline' would both slip through. Parse the
directives and assert the effective script policy (script-src, falling
back to default-src) excludes 'unsafe-inline'/'unsafe-eval'/data:.
---
 .../kap-server/test/securityHeaders.test.ts   | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/kap-server/test/securityHeaders.test.ts b/packages/kap-server/test/securityHeaders.test.ts
index ecb4de3026..ab32cbf8ee 100644
--- a/packages/kap-server/test/securityHeaders.test.ts
+++ b/packages/kap-server/test/securityHeaders.test.ts
@@ -13,6 +13,17 @@ function captureHeaders() {
   return { headers, reply };
 }
 
+/** Split a CSP header value into directive → source-list tokens. */
+function parseCsp(csp: string): Map<string, string[]> {
+  const directives = new Map<string, string[]>();
+  for (const part of csp.split(';')) {
+    const tokens = part.trim().split(/\s+/).filter((t) => t.length > 0);
+    if (tokens.length === 0) continue;
+    directives.set(tokens[0] as string, tokens.slice(1));
+  }
+  return directives;
+}
+
 describe('createSecurityHeadersHook', () => {
   it('stamps the defensive headers and returns the payload unchanged', async () => {
     const { headers, reply } = captureHeaders();
@@ -35,9 +46,20 @@ describe('createSecurityHeadersHook', () => {
     const hook = createSecurityHeadersHook({ tls: false });
     await hook({} as never, reply as never, 'payload');
     const csp = headers.get('content-security-policy');
-    expect(csp).toContain("style-src 'self' 'unsafe-inline'");
-    expect(csp).not.toContain("script-src 'self' 'unsafe-inline'");
-    expect(csp).toContain("default-src 'self'");
+    expect(csp).toBeDefined();
+    const directives = parseCsp(csp ?? '');
+    const styleSrc = directives.get('style-src');
+    expect(styleSrc).toContain("'self'");
+    expect(styleSrc).toContain("'unsafe-inline'");
+    // Assert the EFFECTIVE script policy — script-src, falling back to
+    // default-src when absent — rather than matching an exact substring, so
+    // regressions like default-src gaining 'unsafe-inline' (which would
+    // allow inline <script> through the fallback) also fail here.
+    const effectiveScriptSrc = directives.get('script-src') ?? directives.get('default-src');
+    expect(effectiveScriptSrc).toBeDefined();
+    expect(effectiveScriptSrc).not.toContain("'unsafe-inline'");
+    expect(effectiveScriptSrc).not.toContain("'unsafe-eval'");
+    expect(effectiveScriptSrc).not.toContain('data:');
   });
 
   it('emits HSTS only when TLS is terminated at the server', async () => {