fix(server): gate cost/log endpoints against cross-site requests and ship a full CSP

The cost-bearing endpoints (/api/realtime/token, /api/openai/hud-summary,
/api/google/nearby-places) and the voice debug log refuse cross-site browser
requests: a foreign or opaque Origin, a Sec-Fetch-Site other than
same-origin/none, or proxy forwarding headers. Loopback tools without an
Origin and the LAN opt-in keep working. The dev and preview servers send one
shared Content-Security-Policy, and embed-mode framing rewrites only the
frame-ancestors directive of it.

Salvaged from #242 onto current main.

Co-authored-by: Sameh Khamis <[email protected]>
Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

build/embed-framing.js

@@ -11,6 +11,15 @@
 
 const FRAMING_HEADERS = new Set(['x-frame-options', 'content-security-policy']);
 
+/** The directives of a CSP header value, minus any frame-ancestors rule. */
+function withoutFraming(value) {
+  return String(value ?? '')
+    .split(';')
+    .map((directive) => directive.trim())
+    .filter(Boolean)
+    .filter((directive) => !/^frame-ancestors\b/i.test(directive));
+}
+
 /** Whether a request is for an embed-mode document. */
 export function isEmbedDocumentRequest(url) {
   let parsed;
@@ -43,8 +52,13 @@ export function embedFramingPlugin({
       res.setHeader = (name, value) => {
         const key = String(name).toLowerCase();
         if (!FRAMING_HEADERS.has(key)) return setHeader(name, value);
-        if (key === 'content-security-policy' && !anywhere)
-          return setHeader(name, policy);
+        if (key === 'content-security-policy') {
+          // Keep every other directive of the server's policy (script-src,
+          // connect-src, ...) and only swap the framing rule.
+          const kept = withoutFraming(value);
+          const next = anywhere ? kept : [...kept, policy];
+          return next.length ? setHeader(name, next.join('; ')) : res;
+        }
         return res;
       };
       if (!anywhere) setHeader('Content-Security-Policy', policy);

build/vite.js

@@ -3,6 +3,40 @@ import cesium from 'vite-plugin-cesium';
 import { embedFramingPlugin } from './embed-framing.js';
 import { panelBuildPlugin } from './panel.js';
 
+/**
+ * Content-Security-Policy for every document the dev/preview server serves.
+ * No inline script and no foreign script origin is permitted. 'unsafe-eval' is
+ * required: Knockout (bundled inside @cesium/widgets) resolves the global
+ * object with `(0, eval)("this")` at module load, and without it the Cesium
+ * widget never initializes (verified in headless Chrome). It also covers
+ * Cesium's WASM decoders. `blob:` is required in the built app: Cesium's
+ * bundled workers bootstrap through `importScripts(blob:...)`, which a worker
+ * checks against script-src (the dev server loads them by URL instead).
+ * Widen any other directive only for a real violation.
+ */
+export const BROWSER_CSP = [
+  "default-src 'self'",
+  "script-src 'self' 'unsafe-eval' blob:",
+  "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+  "font-src 'self' data: https://fonts.gstatic.com",
+  "img-src 'self' data: blob: https:",
+  "media-src 'self' blob: https:",
+  "connect-src 'self' blob: data: https: wss: ws:",
+  "worker-src 'self' blob:",
+  "child-src 'self' blob:",
+  "manifest-src 'self'",
+  "object-src 'none'",
+  "base-uri 'self'",
+  "form-action 'self'",
+  "frame-ancestors 'none'",
+].join('; ');
+
+/** Response headers shared by the dev and preview servers. */
+export const BROWSER_HEADERS = Object.freeze({
+  'X-Frame-Options': 'DENY',
+  'Content-Security-Policy': BROWSER_CSP,
+});
+
 /** Build browser assets with explicit inputs; never load environment or providers. */
 export function createBrowserViteConfig({
   plugins = [],
@@ -46,13 +80,15 @@ export function createBrowserViteConfig({
       fs: {
         deny: ['.env', '.env.*', '*.{crt,pem}', '**/.git/**', '**/ENVIRONMENT'],
       },
-      // These headers protect the document containing Provider Settings.
-      // Embed-mode documents are framable instead; see embed-framing.js.
-      headers: {
-        'X-Frame-Options': 'DENY',
-        'Content-Security-Policy': "frame-ancestors 'none'",
-      },
+      // These headers protect the document containing Provider Settings and
+      // give the whole page a real Content-Security-Policy (BROWSER_CSP).
+      // Embed-mode documents are framable instead: embed-framing.js rewrites
+      // only the frame-ancestors directive and keeps the rest of the policy.
+      headers: BROWSER_HEADERS,
     },
+    // The preview server serves the same documents, so it carries the same
+    // framing + CSP hardening (one constant, no drift).
+    preview: { headers: BROWSER_HEADERS },
     define: {
       'import.meta.env.GOOGLE_MAPS_API_KEY': JSON.stringify(googleApiKey),
       'import.meta.env.CESIUM_ION_TOKEN': JSON.stringify(cesiumToken),