@lowdefy/server-dev 6.1.0 → 7.1.0

package/src/html/renderDevPage.js

@@ -17,6 +17,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
+import { addNonceToElements, createContentSecurityPolicy } from '@lowdefy/api';
+import { appStorageKey, serializer, type } from '@lowdefy/helpers';
+
+import isRecordingEnabled from '../../lib/server/recording/isRecordingEnabled.js';
 import safeScriptJson from '../lib/safeScriptJson.js';
 
 // Dev HTML shell — config-free: the client fetches root config and page
@@ -26,7 +30,9 @@ import safeScriptJson from '../lib/safeScriptJson.js';
 //
 // @hono/vite-dev-server injects /@vite/client into this response; the
 // react-refresh preamble must be inlined here for @vitejs/plugin-react.
-const layerOrderScript = `(function(){var s=document.createElement("style");s.id="__lf-layer-order";s.textContent="@layer theme, base, antd, components, utilities;";document.head.prepend(s);new MutationObserver(function(){if(document.head.firstChild!==s)document.head.prepend(s)}).observe(document.head,{childList:true})})();`;
+// The layer order style takes its script's nonce, which a Content-Security-Policy
+// needs to apply it.
+const layerOrderScript = `(function(){var s=document.createElement("style");s.id="__lf-layer-order";var n=document.currentScript&&document.currentScript.nonce;if(n)s.nonce=n;s.textContent="@layer theme, base, antd, components, utilities;";document.head.prepend(s);new MutationObserver(function(){if(document.head.firstChild!==s)document.head.prepend(s)}).observe(document.head,{childList:true})})();`;
 
 function readBuildJson(name) {
   try {
@@ -36,9 +42,47 @@ function readBuildJson(name) {
   }
 }
 
+// Vite's dev server needs no source beyond the page's own origin: /@vite/client
+// and the modules load from 'self', Vite's style tags take the nonce from the
+// csp-nonce meta tag, and the hot reload socket connects back to the page's
+// host, which allowWebSocket names in connect-src for every dev page.
+function getContentSecurityPolicy(c) {
+  const security = serializer.deserialize(readBuildJson('security'));
+  if (type.isNone(security.contentSecurityPolicy)) {
+    return null;
+  }
+  return createContentSecurityPolicy({
+    policy: security.contentSecurityPolicy,
+    requestUrl: c.req.url,
+    allowWebSocket: true,
+  });
+}
+
 function renderDevPage(c, { basePath = '' }) {
+  // The resolved caller, injected like the production server's template.js —
+  // the client's Auth provider seeds _user from it (roles, organization_id).
+  const user = c.get('lowdefyContext')?.user ?? null;
   const themeConfig = readBuildJson('theme');
   const appJson = readBuildJson('app');
+  // The client reads the slug before root config arrives, to key the dark mode and locale
+  // preferences per app.
+  const slug = readBuildJson('appMeta').slug ?? null;
+  const recording = { enabled: isRecordingEnabled(c.req.header('cookie')) };
+
+  // Off unless config.security.contentSecurityPolicy is set. Each render gets its own nonce.
+  let nonceAttribute = '';
+  let nonceMeta = '';
+  let appendHead = appJson.html?.appendHead ?? '';
+  let appendBody = appJson.html?.appendBody ?? '';
+  const policy = getContentSecurityPolicy(c);
+  if (!type.isNull(policy)) {
+    const { nonce } = policy;
+    c.header(policy.name, policy.value);
+    nonceAttribute = ` nonce="${nonce}"`;
+    nonceMeta = `<meta property="csp-nonce" nonce="${nonce}" />`;
+    appendHead = addNonceToElements({ html: appendHead, nonce });
+    appendBody = addNonceToElements({ html: appendBody, nonce });
+  }
 
   const VALID_COLOR_MODES = ['system', 'light', 'dark'];
   const configColorMode = VALID_COLOR_MODES.includes(themeConfig.darkMode)
@@ -47,36 +91,44 @@ function renderDevPage(c, { basePath = '' }) {
   const darkBg = themeConfig?.antd?.darkToken?.colorBgLayout ?? '#000';
   const lightBg = themeConfig?.antd?.lightToken?.colorBgLayout ?? '';
 
+  const darkModeStorageKey = appStorageKey({ basePath, name: 'lowdefy_darkMode', slug });
+
   const darkModeScript = `(function(){var c=${safeScriptJson(
     configColorMode
-  )};var db=${safeScriptJson(darkBg)};var lb=${safeScriptJson(
-    lightBg
-  )};var d;if(c==="dark")d=true;else if(c==="light")d=false;else{try{var p=localStorage.getItem("lowdefy_darkMode");if(p==="dark")d=true;else if(p==="light")d=false;else d=window.matchMedia("(prefers-color-scheme:dark)").matches}catch(e){d=window.matchMedia("(prefers-color-scheme:dark)").matches}}var bg=d?db:lb;document.documentElement.style.colorScheme=d?"dark":"light";if(bg)document.documentElement.style.backgroundColor=bg})();`;
+  )};var db=${safeScriptJson(darkBg)};var lb=${safeScriptJson(lightBg)};var k=${safeScriptJson(
+    darkModeStorageKey
+  )};var d;if(c==="dark")d=true;else if(c==="light")d=false;else{try{var p=localStorage.getItem(k);if(p===null)p=localStorage.getItem("lowdefy_darkMode");if(p==="dark")d=true;else if(p==="light")d=false;else d=window.matchMedia("(prefers-color-scheme:dark)").matches}catch(e){d=window.matchMedia("(prefers-color-scheme:dark)").matches}}var bg=d?db:lb;document.documentElement.style.colorScheme=d?"dark":"light";if(bg)document.documentElement.style.backgroundColor=bg})();`;
 
   const html = `<!DOCTYPE html>
 <html class="lowdefy">
   <head>
     <meta charset="utf-8" />
-    <script>${layerOrderScript}</script>
-    <script>${darkModeScript}</script>
+    ${nonceMeta}
+    <script${nonceAttribute}>${layerOrderScript}</script>
+    <script${nonceAttribute}>${darkModeScript}</script>
     <link rel="manifest" href="${basePath}/manifest.webmanifest" />
     <link rel="icon" type="image/svg+xml" href="${basePath}/icon.svg" />
     <link rel="apple-touch-icon" href="${basePath}/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script type="module">
+    <script type="module"${nonceAttribute}>
 import RefreshRuntime from '${basePath}/@react-refresh';
 RefreshRuntime.injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;
 window.__vite_plugin_react_preamble_installed__ = true;
     </script>
-    ${appJson.html?.appendHead ?? ''}
+    ${appendHead}
   </head>
   <body>
     <div id="root"></div>
-    <script id="__LOWDEFY_CONFIG__" type="application/json">${safeScriptJson({ basePath })}</script>
-    ${appJson.html?.appendBody ?? ''}
-    <script type="module" src="${basePath}/client/main.jsx"></script>
+    <script id="__LOWDEFY_CONFIG__" type="application/json"${nonceAttribute}>${safeScriptJson({
+      basePath,
+      recording,
+      slug,
+      user,
+    })}</script>
+    ${appendBody}
+    <script type="module" src="${basePath}/client/main.jsx"${nonceAttribute}></script>
   </body>
 </html>`;
 

package/src/html/renderDevPage.test.mjs

@@ -0,0 +1,138 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+const { default: renderDevPage } = await import('./renderDevPage.js');
+const { JOURNEY_COOKIES, writeJourneyCookie } = await import('../../lib/server/journeyCookies.js');
+
+function render({ cookie } = {}) {
+  let html;
+  const c = {
+    get: () => undefined,
+    req: { header: (name) => (name === 'cookie' ? cookie : undefined) },
+    html: (value) => {
+      html = value;
+      return value;
+    },
+  };
+  renderDevPage(c, { basePath: '' });
+  const match = /<script id="__LOWDEFY_CONFIG__" type="application\/json">(.*?)<\/script>/.exec(
+    html
+  );
+  return JSON.parse(match[1]);
+}
+
+afterEach(() => {
+  delete process.env.LOWDEFY_DEV_RECORD;
+});
+
+test('renderDevPage enables recording in a developer tab by default', () => {
+  expect(render().recording).toEqual({ enabled: true });
+});
+
+test('renderDevPage disables recording for a context whose recording cookie is off', () => {
+  const written = writeJourneyCookie({
+    name: JOURNEY_COOKIES.recording.name,
+    payload: 'off',
+    origin: 'http://localhost:3001',
+  });
+  expect(render({ cookie: `${written.name}=${written.value}` }).recording).toEqual({
+    enabled: false,
+  });
+});
+
+test('renderDevPage disables recording when LOWDEFY_DEV_RECORD is false', () => {
+  process.env.LOWDEFY_DEV_RECORD = 'false';
+  expect(render().recording).toEqual({ enabled: false });
+});
+
+function renderWithHeaders() {
+  const headers = {};
+  let html;
+  const c = {
+    get: () => undefined,
+    header: (name, value) => {
+      headers[name] = value;
+    },
+    req: { header: () => undefined, url: 'http://localhost:3122/home' },
+    html: (value) => {
+      html = value;
+      return value;
+    },
+  };
+  renderDevPage(c, { basePath: '' });
+  return { headers, html };
+}
+
+describe('renderDevPage with a Content-Security-Policy', () => {
+  const originalCwd = process.cwd();
+  let serverDirectory;
+
+  beforeAll(() => {
+    serverDirectory = fs.mkdtempSync(path.join(os.tmpdir(), 'lowdefy-dev-csp-'));
+    fs.mkdirSync(path.join(serverDirectory, 'build'));
+    process.chdir(serverDirectory);
+  });
+
+  afterAll(() => {
+    process.chdir(originalCwd);
+    fs.rmSync(serverDirectory, { recursive: true, force: true });
+  });
+
+  function writeSecurity(security) {
+    fs.writeFileSync(path.join(serverDirectory, 'build/security.json'), JSON.stringify(security));
+  }
+
+  test('renderDevPage sends no header and writes no nonce when the policy is off', () => {
+    writeSecurity({ contentSecurityPolicy: null });
+    const { headers, html } = renderWithHeaders();
+    expect(headers).toEqual({});
+    expect(html).not.toContain(' nonce="');
+  });
+
+  test('renderDevPage puts the header nonce on every script and allows the hot reload socket', () => {
+    writeSecurity({
+      contentSecurityPolicy: {
+        reportOnly: false,
+        directives: {
+          'script-src': ["'self'"],
+          'style-src': ["'self'"],
+          'connect-src': ["'self'"],
+          '~k': '12',
+        },
+        nonceDirectives: ['script-src', 'style-src'],
+        websockets: false,
+        '~k': '11',
+      },
+      '~k': '10',
+    });
+    const first = renderWithHeaders();
+    const second = renderWithHeaders();
+    const header = first.headers['Content-Security-Policy'];
+    const nonce = header.match(/'nonce-([^']+)'/)[1];
+    expect(header).toEqual(
+      `script-src 'self' 'nonce-${nonce}'; style-src 'self' 'nonce-${nonce}'; connect-src 'self' ws://localhost:3122 wss://localhost:3122`
+    );
+    const scripts = first.html.match(/<script\b[^>]*>/g);
+    expect(scripts.length).toEqual(5);
+    scripts.forEach((tag) => expect(tag).toContain(` nonce="${nonce}"`));
+    expect(first.html).toContain(`<meta property="csp-nonce" nonce="${nonce}" />`);
+    expect(second.headers['Content-Security-Policy']).not.toEqual(header);
+  });
+});

package/src/lib/getRequestPath.js

@@ -0,0 +1,29 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+// The rest of the request path after basePath and prefix, still encoded: the
+// page matcher decodes each segment once, and Hono's c.req.path is partly
+// decoded, so it is taken from the request URL. path goes to the matcher as it
+// arrived; matchedPath is path with one trailing "/" removed, the form the
+// client compares its navigations with.
+function getRequestPath({ c, basePath, prefix }) {
+  const pathname = new URL(c.req.url).pathname.slice(basePath.length);
+  const path = pathname.startsWith(prefix) ? pathname.slice(prefix.length) : '';
+  const matchedPath = path.endsWith('/') ? path.slice(0, -1) : path;
+  return { path, matchedPath };
+}
+
+export default getRequestPath;

package/src/middleware/createSameOriginGuard.js

@@ -0,0 +1,37 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { isSameOriginRequest } from '@lowdefy/api';
+
+// The cross-site defence for the routes only this app's own pages call
+// (/api/client-error, /api/feedback) and for the dev tools. The rule itself -
+// Sec-Fetch-Site, then Origin against Host - is isSameOriginRequest in
+// @lowdefy/api, which every server shares. Unlike a websocket handshake, a
+// fetch can carry X-Forwarded-Host where a CORS preflight allows it (Vite's
+// dev CORS allows localhost origins), so HTTP routes compare with Host only.
+function createSameOriginGuard({ allowNoOrigin = false } = {}) {
+  // Returns the 403 response to answer with, or null when the request may
+  // proceed. A guard, not Hono middleware, so a route keeps one entry point
+  // and the refusal is visible at the top of the handler that owns it.
+  return function guardSameOrigin(c) {
+    if (isSameOriginRequest({ getHeader: (name) => c.req.header(name), allowNoOrigin })) {
+      return null;
+    }
+    return c.json({ error: 'Forbidden' }, 403);
+  };
+}
+
+export default createSameOriginGuard;

package/src/middleware/createSameOriginGuard.test.mjs

@@ -0,0 +1,102 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { Hono } from 'hono';
+
+import createSameOriginGuard from './createSameOriginGuard.js';
+
+function createApp({ allowNoOrigin } = {}) {
+  const guardSameOrigin = createSameOriginGuard({ allowNoOrigin });
+  const app = new Hono();
+  app.all('/post', (c) => {
+    const forbidden = guardSameOrigin(c);
+    if (forbidden) {
+      return forbidden;
+    }
+    return c.json({ allowed: true });
+  });
+  return app;
+}
+
+function post({ allowNoOrigin, headers }) {
+  return createApp({ allowNoOrigin }).request('/post', { headers, method: 'POST' });
+}
+
+test.each([
+  ['origin matches the host', { host: 'app.test', origin: 'https://app.test' }],
+  [
+    'sec-fetch-site says same-origin',
+    { host: 'app.test', origin: 'https://app.test', 'sec-fetch-site': 'same-origin' },
+  ],
+  [
+    'sec-fetch-site says none',
+    { host: 'app.test', origin: 'https://app.test', 'sec-fetch-site': 'none' },
+  ],
+  [
+    'the origin carries a port matching the host',
+    { host: 'app.test:3000', origin: 'http://app.test:3000' },
+  ],
+])('the guard allows a post when %s', async (_, headers) => {
+  const res = await post({ headers });
+
+  expect(res.status).toEqual(200);
+  expect(await res.json()).toEqual({ allowed: true });
+});
+
+test.each([
+  ['the origin is another site', { host: 'app.test', origin: 'https://evil.test' }],
+  ['the origin is a sibling subdomain', { host: 'app.test', origin: 'https://other.app.test' }],
+  ['the origin is not a url', { host: 'app.test', origin: 'not a url' }],
+  [
+    'sec-fetch-site says cross-site',
+    { host: 'app.test', origin: 'https://app.test', 'sec-fetch-site': 'cross-site' },
+  ],
+  [
+    'sec-fetch-site says same-site',
+    { host: 'app.test', origin: 'https://app.test', 'sec-fetch-site': 'same-site' },
+  ],
+  ['there is no origin', { host: 'app.test' }],
+])('the guard answers 403 when %s', async (_, headers) => {
+  const res = await post({ headers });
+
+  expect(res.status).toEqual(403);
+  expect(await res.json()).toEqual({ error: 'Forbidden' });
+});
+
+test('the guard lets a caller that sends no origin through when the route allows it', async () => {
+  const res = await post({ allowNoOrigin: true, headers: { host: 'app.test' } });
+
+  expect(res.status).toEqual(200);
+  expect(await res.json()).toEqual({ allowed: true });
+});
+
+test('allowNoOrigin does not excuse a browser posting cross-site', async () => {
+  const res = await post({
+    allowNoOrigin: true,
+    headers: { host: 'app.test', origin: 'https://evil.test' },
+  });
+
+  expect(res.status).toEqual(403);
+});
+
+test('allowNoOrigin does not excuse a cross-site sec-fetch-site with no origin', async () => {
+  const res = await post({
+    allowNoOrigin: true,
+    headers: { host: 'app.test', 'sec-fetch-site': 'cross-site' },
+  });
+
+  expect(res.status).toEqual(403);
+});

package/src/middleware/errorHandler.js

@@ -15,6 +15,7 @@
 */
 
 import { redactErrorResponse } from '@lowdefy/api';
+import { HTTPException } from 'hono/http-exception';
 
 // Hono routes every handler error to the app-level error handler — upstream
 // middleware try/catch never sees them. API routes get the serialized error
@@ -24,7 +25,8 @@ function createErrorHandler({ basePath = '', logger }) {
     const path = basePath ? c.req.path.replace(basePath, '') : c.req.path;
     // Unauthenticated requests to protected endpoints are expected traffic -
     // one warning line and a 401, skipping the structured error log so
-    // probing cannot flood it. Keys strictly on the error name.
+    // probing cannot flood it. Keys strictly on the error name; the 500 path
+    // below is untouched.
     if (error.name === 'AuthenticationError') {
       logger.warn(`Unauthenticated request: ${c.req.method} ${c.req.path}`);
       if (path.startsWith('/api/')) {
@@ -32,6 +34,54 @@ function createErrorHandler({ basePath = '', logger }) {
       }
       return c.text('Unauthorized', 401);
     }
+    // An authenticated caller whose roles do not permit the resource. Expected
+    // traffic, not a fault: one warning line, no structured error log and no
+    // Sentry capture.
+    if (error.name === 'AuthorizationError') {
+      logger.warn(`Forbidden: ${c.req.method} ${c.req.path}`);
+      if (path.startsWith('/api/')) {
+        return c.json({ name: error.name, message: error.message }, 403);
+      }
+      return c.text('Forbidden', 403);
+    }
+    // An authorized caller who has not enrolled a second factor under
+    // auth.twoFactor.required. 403, not 401 - a 401 reads to the client as a dead
+    // session and bounces the user to sign-in, which is the loop the gate exists to
+    // avoid. Expected traffic under required: true, so one warning line and no
+    // Sentry capture, exactly as for AuthenticationError.
+    if (error.name === 'TwoFactorEnrolmentRequiredError') {
+      logger.warn(`Two-factor enrolment required: ${c.req.method} ${c.req.path}`);
+      if (path.startsWith('/api/')) {
+        return c.json({ name: error.name, message: error.message }, 403);
+      }
+      return c.text('Two-factor enrolment required', 403);
+    }
+    // An API client whose payload does not match the endpoint's declared
+    // payloadSchema (or any other UserError raised before a routine starts). A
+    // page's CallAPI payload the schema refuses is a ConfigError instead: the
+    // page's own config built it (validatePayload). The caller's own
+    // request is wrong, not the config or the server: a 400 with the message the
+    // caller needs, one warning line, no structured error log and no Sentry
+    // capture. A UserError raised inside a routine never gets here - it returns
+    // 200 with success: false through buildEndpointResult.
+    if (error.name === 'UserError') {
+      logger.warn(`Bad request: ${c.req.method} ${c.req.path} - ${error.message}`);
+      if (path.startsWith('/api/')) {
+        return c.json({ name: error.name, message: error.message }, 400);
+      }
+      return c.text('Bad Request', 400);
+    }
+    // A route or transport that has already decided its own HTTP answer - hono's
+    // HTTPException carries the response to send. The MCP transport refuses an
+    // unsupported protocol-version header this way (a 404 with a JSON-RPC body
+    // that the client SDK falls back on to negotiate a version both sides
+    // know). Not a fault: send its response and log one warning line, no
+    // structured error log and no Sentry capture. Turning it into a 500 would
+    // hide the status the client acts on.
+    if (error instanceof HTTPException) {
+      logger.warn(`${error.status} answered by the route: ${c.req.method} ${c.req.path}`);
+      return error.getResponse();
+    }
     const context = c.get('lowdefyContext');
     if (context) {
       await context.handleError(error);