4bnode 4.1.4 → 4.1.6

package/skeleton/index.js

@@ -23,13 +23,15 @@ const __dirname = path.resolve();
 // ── Middleware ───────────────────────────────────────
 app.use(express.json({ limit: "50mb" }));
 app.use(express.urlencoded({ extended: true, limit: "50mb" }));
-app.use(cors({ origin: "*" }));
 
 // ── Dev Dashboard (local development only) ───────────
 // The dashboard at /_dev can write files and run shell commands — it is a
 // remote-code-execution surface and must NEVER be reachable in production.
 // In production it is not even imported. It additionally restricts itself to
-// loopback requests and requires a passkey (see .4bnode/dev-api.js).
+// loopback requests, validates Host/Origin (defeats DNS-rebinding), and requires
+// a passkey for remote access (see .4bnode/dev-api.js). It is mounted BEFORE the
+// permissive global CORS below so `Access-Control-Allow-Origin: *` never applies
+// to the dashboard.
 //   • production (NODE_ENV=production): OFF — set _4BNODE_DASHBOARD=on to force.
 //   • non-production: ON — set _4BNODE_DASHBOARD=off to disable.
 const dashboardEnabled =
@@ -42,6 +44,9 @@ if (dashboardEnabled) {
   } catch {}
 }
 
+// ── CORS (applies to your API, not the /_dev dashboard above) ──
+app.use(cors({ origin: "*" }));
+
 // ── Security (built-in by default) ───────────────────
 // Mounted AFTER the /_dev dashboard so its CDN/inline scripts aren't blocked by
 // helmet's CSP and the dashboard isn't throttled by the rate limiter.

package/skeleton/src/middleware/apiKey.js

@@ -4,6 +4,7 @@
 //   app.use('/api/private', apiKey);
 import fs from 'fs';
 import path from 'path';
+import crypto from 'crypto';
 import { fileURLToPath } from 'url';
 
 const KEYS_FILE = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'api-keys.json');
@@ -24,10 +25,22 @@ function loadKeys() {
   return _cache.keys;
 }
 
+// Constant-time membership test: hash both sides to a fixed length so neither the
+// match result nor the key length leaks through string-comparison timing.
+function keyMatches(provided, valid) {
+  const p = crypto.createHash('sha256').update(String(provided)).digest();
+  let ok = false;
+  for (const k of valid) {
+    const h = crypto.createHash('sha256').update(String(k)).digest();
+    if (crypto.timingSafeEqual(p, h)) ok = true; // no early return — keep timing flat
+  }
+  return ok;
+}
+
 const apiKey = (req, res, next) => {
   const provided = req.header('x-api-key');
   const valid = loadKeys();
-  if (!provided || !valid.includes(provided)) {
+  if (!provided || !keyMatches(provided, valid)) {
     return res.status(401).json({ message: 'Invalid or missing API key' });
   }
   next();

package/skeleton/src/middleware/errorHandler.js

@@ -8,8 +8,13 @@ export function notFound(req, res, next) {
 export function errorHandler(err, req, res, next) {
   const status = err.status || err.statusCode || 500;
   console.error(err);
+  const isProd = process.env.NODE_ENV === 'production';
+  // In production, only surface messages for client (4xx) errors or errors
+  // explicitly marked safe (err.expose). Never leak raw 5xx internals — a Mongo
+  // E11000 or driver message discloses schema/indexes and enables enumeration.
+  const showMessage = !isProd || err.expose === true || (status >= 400 && status < 500);
   res.status(status).json({
-    message: err.message || 'Server error',
-    ...(process.env.NODE_ENV === 'production' ? {} : { stack: err.stack }),
+    message: showMessage ? (err.message || 'Server error') : 'Server error',
+    ...(isProd ? {} : { stack: err.stack }),
   });
 }

package/app-1/.4bnode/.passkey

@@ -1 +0,0 @@
-scrypt$af7f6048a1c565afcc6f06de246f8b18$673c63bd180dc82eb74265fba34699ad45d1ae27353595e5c1c492351c66aafbd80e18d712b1e6f40e2343e45137b96cb4ed376d0c4ac5b54e8ea9d0a2fd2f73

package/app-1/.4bnode/assets/js/App.js

@@ -1,139 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { html, api, PAGE_TITLES } from "./lib.js";
-import { AppContext } from "./context.js";
-import { Sidebar } from "./components/Sidebar.js";
-import { ToastContainer } from "./components/ToastContainer.js";
-import { ConfirmDialog } from "./components/Modal.js";
-import { DashboardPage } from "./pages/DashboardPage.js";
-import { DatabasePage } from "./pages/DatabasePage.js";
-import { SchemasPage } from "./pages/SchemasPage.js";
-import { RoutesPage } from "./pages/RoutesPage.js";
-import { DocsPage } from "./pages/DocsPage.js";
-import { AiBuilderPage } from "./pages/AiBuilderPage.js";
-import { SecurityPage } from "./pages/SecurityPage.js";
-import { ApiTesterPage } from "./pages/ApiTesterPage.js";
-import { RealtimePage } from "./pages/RealtimePage.js";
-import { SerialPortPage } from "./pages/SerialPortPage.js";
-import { MailPage } from "./pages/MailPage.js";
-import { LogsPage } from "./pages/LogsPage.js";
-import { EnvironmentPage } from "./pages/EnvironmentPage.js";
-
-function getHashPage() {
-  const hash = window.location.hash.replace("#/", "").replace("#", "");
-  return hash && PAGE_TITLES[hash] ? hash : "dashboard";
-}
-
-export function App() {
-  const [page, setPageState] = useState(getHashPage);
-  const [data, setData] = useState({
-    models: [],
-    routes: [],
-    mongoConfigured: false,
-    routesDirExists: false,
-  });
-  const [status, setStatus] = useState({});
-  const [toasts, setToasts] = useState([]);
-  const [confirmState, setConfirmState] = useState(null);
-
-  const showConfirm = useCallback((message, opts = {}) => {
-    return new Promise((resolve) => {
-      setConfirmState({ message, ...opts, resolve });
-    });
-  }, []);
-
-  const setPage = useCallback((p) => {
-    window.location.hash = "#/" + p;
-  }, []);
-
-  useEffect(() => {
-    function onHash() {
-      setPageState(getHashPage());
-    }
-    window.addEventListener("hashchange", onHash);
-    return () => window.removeEventListener("hashchange", onHash);
-  }, []);
-
-  const toast = useCallback((message, type = "info") => {
-    const id = Date.now();
-    setToasts((prev) => [...prev, { id, message, type }]);
-    setTimeout(
-      () => setToasts((prev) => prev.filter((t) => t.id !== id)),
-      3500,
-    );
-  }, []);
-
-  const refresh = useCallback(async () => {
-    // File-writing actions (create route, docs, security, ...) modify index.js,
-    // which triggers a nodemon restart. Since the dashboard is served by that same
-    // app, the refresh fetch fired right after can hit the restart window and fail,
-    // leaving the UI stale until a manual reload. Retry across the restart so new
-    // state shows up in real time.
-    let lastErr;
-    for (let attempt = 0; attempt < 8; attempt++) {
-      try {
-        const [dashData, statusData] = await Promise.all([
-          api("/dashboard"),
-          api("/status"),
-        ]);
-        setData(dashData);
-        setStatus(statusData);
-        return;
-      } catch (err) {
-        lastErr = err;
-        await new Promise((r) => setTimeout(r, 500));
-      }
-    }
-    throw lastErr;
-  }, []);
-
-  useEffect(() => {
-    refresh().catch(() => {});
-  }, []);
-
-  const pages = {
-    dashboard: html`<${DashboardPage} />`,
-    "ai-builder": html`<${AiBuilderPage} />`,
-    database: html`<${DatabasePage} />`,
-    schemas: html`<${SchemasPage} />`,
-    routes: html`<${RoutesPage} />`,
-    docs: html`<${DocsPage} />`,
-    security: html`<${SecurityPage} />`,
-    "api-tester": html`<${ApiTesterPage} />`,
-    realtime: html`<${RealtimePage} />`,
-    serialport: html`<${SerialPortPage} />`,
-    mail: html`<${MailPage} />`,
-    logs: html`<${LogsPage} />`,
-    env: html`<${EnvironmentPage} />`,
-  };
-
-  return html`<${AppContext.Provider}
-    value=${{ page, setPage, data, status, toasts, toast, refresh, showConfirm }}
-  >
-    <${Sidebar} />
-    <div className="main">
-      <div className="topbar">
-        <h2>${PAGE_TITLES[page] || "Dashboard"}</h2>
-      </div>
-      <div className="content">
-        <${AnimatePresence} mode="wait">
-          <${motion.div} key=${page}
-            initial=${{ opacity: 0, y: 8 }}
-            animate=${{ opacity: 1, y: 0 }}
-            exit=${{ opacity: 0, y: -8 }}
-            transition=${{ duration: 0.15 }}>
-            ${pages[page] || pages.dashboard}
-          <//>
-        <//>
-      </div>
-    </div>
-    <${ToastContainer} />
-    ${confirmState && html`<${ConfirmDialog}
-      message=${confirmState.message}
-      confirmLabel=${confirmState.confirmLabel}
-      danger=${confirmState.danger}
-      onConfirm=${() => { confirmState.resolve(true); setConfirmState(null); }}
-      onCancel=${() => { confirmState.resolve(false); setConfirmState(null); }}
-    />`}
-  <//>`;
-}

package/app-1/.4bnode/assets/js/Root.js

@@ -1,40 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { AnimatePresence } from "framer-motion";
-import { motion } from "framer-motion";
-import { html, API, getStoredPasskey } from "./lib.js";
-import { App } from "./App.js";
-import { PasskeyScreen } from "./screens/PasskeyScreen.js";
-
-export function Root() {
-  const [authed, setAuthed] = useState(false);
-  const [checking, setChecking] = useState(true);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const stored = getStoredPasskey();
-        const res = await fetch(API + '/auth', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ passkey: stored }),
-        });
-        if (res.ok) setAuthed(true);
-      } catch {}
-      setChecking(false);
-    })();
-  }, []);
-
-  if (checking) return null;
-
-  return html`<${AnimatePresence} mode="wait">
-    ${!authed
-      ? html`<${PasskeyScreen} key="passkey" onSuccess=${() => setAuthed(true)} />`
-      : html`<${motion.div} key="app"
-          style=${{ display: 'flex', height: '100vh', width: '100%' }}
-          initial=${{ opacity: 0 }}
-          animate=${{ opacity: 1 }}
-          transition=${{ duration: 0.4 }}>
-          <${App} />
-        <//>`}
-  <//>`;
-}

package/app-1/.4bnode/assets/js/components/Modal.js

@@ -1,52 +0,0 @@
-import React from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { LuTrash2, LuZap } from "react-icons/lu";
-import { html } from "../lib.js";
-
-export function Modal({ title, children, onClose, actions }) {
-  return html`<${AnimatePresence}><${motion.div}
-    className="modal-overlay"
-    onClick=${(e) => e.target === e.currentTarget && onClose()}
-    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} exit=${{ opacity: 0 }}
-    transition=${{ duration: 0.15 }}
-  >
-    <${motion.div} className="modal"
-      initial=${{ opacity: 0, scale: 0.95, y: 10 }}
-      animate=${{ opacity: 1, scale: 1, y: 0 }}
-      exit=${{ opacity: 0, scale: 0.95, y: 10 }}
-      transition=${{ duration: 0.15 }}>
-      <div className="modal-title">${title}</div>
-      ${children}
-      ${actions && html`<div className="modal-actions">${actions}</div>`}
-    <//>
-  <//><//>`;
-}
-
-export function ConfirmDialog({ message, onConfirm, onCancel, confirmLabel, danger }) {
-  return html`<${AnimatePresence}><${motion.div}
-    className="modal-overlay"
-    onClick=${onCancel}
-    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} exit=${{ opacity: 0 }}
-    transition=${{ duration: 0.15 }}
-  >
-    <${motion.div} className="modal" onClick=${e => e.stopPropagation()}
-      style=${{ minWidth: '380px', maxWidth: '440px' }}
-      initial=${{ opacity: 0, scale: 0.95, y: 10 }}
-      animate=${{ opacity: 1, scale: 1, y: 0 }}
-      exit=${{ opacity: 0, scale: 0.95, y: 10 }}
-      transition=${{ duration: 0.15 }}>
-      <div className="flex items-center gap-3" style=${{ marginBottom: '16px' }}>
-        <div style=${{ width: '40px', height: '40px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
-          background: danger ? 'var(--error-glow)' : 'var(--warning-glow)' }}>
-          <${danger ? LuTrash2 : LuZap} size=${18} color=${danger ? 'var(--error)' : 'var(--warning)'} />
-        </div>
-        <div style=${{ fontSize: '15px', fontWeight: 600 }}>Confirm Action</div>
-      </div>
-      <div style=${{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: '1.6', marginBottom: '20px' }}>${message}</div>
-      <div className="modal-actions">
-        <button className="btn btn-ghost" onClick=${onCancel}>Cancel</button>
-        <button className=${`btn ${danger ? 'btn-danger' : 'btn-primary'}`} onClick=${onConfirm}>${confirmLabel || 'Confirm'}</button>
-      </div>
-    <//>
-  <//><//>`;
-}

package/app-1/.4bnode/assets/js/components/Sidebar.js

@@ -1,73 +0,0 @@
-import React from "react";
-import { html, Icons } from "../lib.js";
-import { useApp } from "../context.js";
-
-export function Sidebar() {
-  const { page, setPage, data } = useApp();
-  const dbOk = data.mongoConfigured;
-
-  const navItems = [
-    {
-      id: "dashboard",
-      label: "Dashboard",
-      icon: Icons.dashboard,
-      section: "Overview",
-    },
-    // AI Builder — temporarily hidden from the menu (re-enable by uncommenting)
-    // { id: "ai-builder", label: "AI Builder", icon: Icons.ai },
-    {
-      id: "database",
-      label: "Database",
-      icon: Icons.database,
-      section: "Setup",
-    },
-    {
-      id: "schemas",
-      label: "Schemas",
-      icon: Icons.schema,
-      locked: !dbOk,
-      lockMsg: "Requires database",
-    },
-    { id: "routes", label: "API Routes", icon: Icons.route },
-    // { id: "docs", label: "API Docs", icon: Icons.docs },  // hidden for now
-    { id: "api-tester", label: "API Tester", icon: Icons.apiTester },
-    {
-      id: "security",
-      label: "Security",
-      icon: Icons.shield,
-      section: "Features",
-    },
-    { id: "realtime", label: "Real-time", icon: Icons.realtime },
-    { id: "serialport", label: "SerialPort", icon: Icons.serial },
-    // { id: "mail", label: "Email", icon: Icons.mail },  // hidden for now
-    { id: "logs", label: "Logs", icon: Icons.logs, section: "Settings" },
-    { id: "env", label: "Environment", icon: Icons.env },
-  ];
-
-  let currentSection = null;
-  return html`<div className="sidebar">
-    <div className="sidebar-brand">
-      <pre>${`██╗  ██╗██████╗ ███╗   ██╗ ██████╗ ██████╗ ███████╗\n██║  ██║██╔══██╗████╗  ██║██╔═══██╗██╔══██╗██╔════╝\n███████║██████╔╝██╔██╗ ██║██║   ██║██║  ██║█████╗\n╚════██║██╔══██╗██║╚██╗██║██║   ██║██║  ██║██╔══╝\n     ██║██████╔╝██║ ╚████║╚██████╔╝██████╔╝███████╗\n     ╚═╝╚═════╝ ╚═╝  ╚═══╝ ╚═════╝ ╚═════╝ ╚══════╝`}</pre>
-    </div>
-    ${navItems.map((item) => {
-      const sectionHeader =
-        item.section && item.section !== currentSection
-          ? ((currentSection = item.section),
-            html`<div className="sidebar-section">${item.section}</div>`)
-          : null;
-      return html`<${React.Fragment} key=${item.id}>
-        ${sectionHeader}
-        <div
-          className=${`sidebar-item ${page === item.id ? "active" : ""} ${item.locked ? "locked" : ""}`}
-          onClick=${() => !item.locked && setPage(item.id)}
-          title=${item.locked ? item.lockMsg : item.label}
-        >
-          <span className="sidebar-icon">${item.icon}</span>
-          ${item.label}
-          ${item.locked &&
-          html`<span className="lock-icon">${Icons.lock}</span>`}
-        </div>
-      <//>`;
-    })}
-  </div>`;
-}

package/app-1/.4bnode/assets/js/components/ToastContainer.js

@@ -1,15 +0,0 @@
-import { html } from "../lib.js";
-import { useApp } from "../context.js";
-
-export function ToastContainer() {
-  const { toasts } = useApp();
-  if (toasts.length === 0) return null;
-  return html`<div className="toast-container">
-    ${toasts.map(
-      (t) =>
-        html`<div key=${t.id} className=${`toast ${t.type}`}>
-          ${t.message}
-        </div>`,
-    )}
-  </div>`;
-}

package/app-1/.4bnode/assets/js/context.js

@@ -1,7 +0,0 @@
-import React, { createContext, useContext } from "react";
-
-export const AppContext = createContext();
-
-export function useApp() {
-  return useContext(AppContext);
-}

package/app-1/.4bnode/assets/js/lib.js

@@ -1,113 +0,0 @@
-import React from "react";
-import htm from "htm";
-import {
-  LuLayoutDashboard,
-  LuDatabase,
-  LuFileText,
-  LuRadio,
-  LuPlus,
-  LuTrash2,
-  LuCheck,
-  LuLock,
-  LuArrowRight,
-  LuPencil,
-  LuCable,
-  LuActivity,
-  LuZap,
-  LuShield,
-  LuBox,
-  LuFlaskConical,
-  LuSend,
-  LuSettings,
-  LuScrollText,
-  LuSparkles,
-  LuBookOpen,
-  LuMail,
-} from "react-icons/lu";
-
-export const html = htm.bind(React.createElement);
-export const API = "/_dev/api";
-
-export function getStoredPasskey() {
-  return sessionStorage.getItem("_dev_passkey") || "";
-}
-
-export function copyToClipboard(text) {
-  if (navigator.clipboard && navigator.clipboard.writeText) {
-    return navigator.clipboard.writeText(text);
-  }
-  const ta = document.createElement("textarea");
-  ta.value = text;
-  ta.style.cssText = "position:fixed;opacity:0";
-  document.body.appendChild(ta);
-  ta.select();
-  document.execCommand("copy");
-  document.body.removeChild(ta);
-  return Promise.resolve();
-}
-
-export async function api(path, options = {}) {
-  const passkey = getStoredPasskey();
-  const headers = { "Content-Type": "application/json" };
-  if (passkey) headers["x-passkey"] = passkey;
-  const res = await fetch(API + path, {
-    headers,
-    ...options,
-    body: options.body ? JSON.stringify(options.body) : undefined,
-  });
-  const text = await res.text();
-  let data;
-  try {
-    data = JSON.parse(text);
-  } catch {
-    if (res.ok) return { message: "Done" };
-    throw new Error("Server restarting, please wait...");
-  }
-  if (!res.ok) {
-    const e = new Error(data.error || data.message || "Request failed");
-    e.data = data; // expose extra fields (e.g. command output) to callers
-    throw e;
-  }
-  return data;
-}
-
-export const Icons = {
-  dashboard: html`<${LuLayoutDashboard} size=${16} />`,
-  database: html`<${LuDatabase} size=${16} />`,
-  schema: html`<${LuFileText} size=${16} />`,
-  route: html`<${LuRadio} size=${16} />`,
-  realtime: html`<${LuActivity} size=${16} />`,
-  env: html`<${LuSettings} size=${16} />`,
-  plus: html`<${LuPlus} size=${16} />`,
-  trash: html`<${LuTrash2} size=${16} />`,
-  check: html`<${LuCheck} size=${16} />`,
-  lock: html`<${LuLock} size=${12} />`,
-  arrow: html`<${LuArrowRight} size=${14} />`,
-  edit: html`<${LuPencil} size=${16} />`,
-  serial: html`<${LuCable} size=${16} />`,
-  zap: html`<${LuZap} size=${16} />`,
-  shield: html`<${LuShield} size=${16} />`,
-  box: html`<${LuBox} size=${16} />`,
-  apiTester: html`<${LuFlaskConical} size=${16} />`,
-  send: html`<${LuSend} size=${16} />`,
-  logs: html`<${LuScrollText} size=${16} />`,
-  ai: html`<${LuSparkles} size=${16} />`,
-  docs: html`<${LuBookOpen} size=${16} />`,
-  mail: html`<${LuMail} size=${16} />`,
-};
-
-export const PAGE_TITLES = {
-  dashboard: "Dashboard",
-  "ai-builder": "AI Builder",
-  database: "Database",
-  schemas: "Schemas",
-  routes: "API Routes",
-  docs: "API Docs",
-  security: "Security",
-  "api-tester": "API Tester",
-  realtime: "Real-time",
-  serialport: "SerialPort",
-  mail: "Email",
-  logs: "Logs",
-  env: "Environment",
-};

package/app-1/.4bnode/assets/js/main.js

@@ -1,5 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { html } from "./lib.js";
-import { Root } from "./Root.js";
-
-createRoot(document.getElementById("root")).render(html`<${Root} />`);