Merge pull request #171 from reqcore-inc/fix/security-and-dependencies

feat: implement nonce-based CSP middleware for enhanced security

Author: JoachimLK

ARCHITECTURE.md

@@ -80,6 +80,7 @@ reqcore/
 │   ├── middleware/                # Global server middleware
 │   ├── plugins/
 │   │   ├── migrations.ts         # Auto-apply migrations on startup
+│   │   ├── posthog.ts            # PostHog server-side capture + filtered error hook
 │   │   └── s3-bucket.ts          # Ensure S3 bucket exists + enforce private policy
 │   └── utils/                    # Auto-imported server utilities
 │       ├── auth.ts               # Better Auth instance
@@ -88,7 +89,8 @@ reqcore/
 │       ├── requireAuth.ts        # Auth guard (throws 401/403)
 │       ├── s3.ts                 # S3/MinIO client, upload, delete, bucket policy
 │       ├── slugify.ts            # URL slug generation for public job pages
-│       ├── rateLimit.ts          # IP-based sliding window rate limiter
+│       ├── rateLimit.ts          # IP-based sliding window rate limiter (in-memory, single-instance)
+│       ├── pgDumpEnv.ts          # Allowlist of env vars passed to pg_dump (no secret leak)
 │       └── schemas/              # Shared Zod validation schemas
 │           ├── document.ts       # MIME types, file limits, sanitizeFilename()
 │           ├── job.ts            # Job create/update schemas
@@ -163,7 +165,7 @@ Nitro auto-imports everything from `server/utils/`. The core utilities are alway
 | `auth` | Better Auth instance |
 | `env` | Zod-validated environment variables |
 | `generateJobSlug` | URL slug generation for public job pages |
-| `createRateLimiter` | IP-based sliding window rate limiter |
+| `createRateLimiter` | IP-based sliding window rate limiter (in-memory; for multi-instance setups, terminate at the reverse proxy / CDN) |
 | `uploadToS3`, `deleteFromS3` | S3/MinIO file operations |
 
 ### 3. Environment Validation

SELF-HOSTING.md

@@ -531,11 +531,12 @@ Reqcore ships with security defaults that require no configuration:
 - **All services are localhost-bound** — PostgreSQL, MinIO, and Adminer are never exposed to the internet. Only the application port (3000) is accessible externally.
 - **Automatic CSRF protection** via Better Auth
 - **Encrypted OAuth tokens** with AES-256-GCM
-- **Rate limiting** on sensitive endpoints
+- **Rate limiting** on sensitive endpoints (in-memory, single-instance — see "Scaling horizontally" below if you run multiple replicas)
 - **Security headers** — `X-Frame-Options: DENY`, `X-Content-Type-Options: nosniff`, `Referrer-Policy: strict-origin-when-cross-origin`, `Permissions-Policy` restricting camera/microphone/geolocation
 - **File upload validation** — MIME type verification, file size limits, filename sanitization
 - **Server-proxied downloads** — uploaded files are never served directly from storage; they pass through the application server, which enforces authentication and authorization
 - **Deny-by-default access control** — every API endpoint checks org membership and role permissions
+- **Backups never leak app secrets** — the in-app `pg_dump` runner spawns the child process with a minimal env (PGPASSWORD + a small whitelist of system vars) so application secrets like `BETTER_AUTH_SECRET`, `S3_SECRET_KEY`, and OAuth credentials are never inherited by the subprocess
 
 ### Additional Recommendations
 
@@ -564,6 +565,27 @@ sudo apt install unattended-upgrades
 sudo dpkg-reconfigure -plow unattended-upgrades
 ```
 
+### Scaling horizontally
+
+Reqcore is designed to run as a **single instance** on one VPS. The built-in
+rate limiter keeps state in memory, which is perfect for a single container
+but means two replicas would each enforce their own per-IP counters
+independently — a determined attacker could double their effective budget by
+spreading requests across replicas.
+
+If you do need to run multiple Reqcore instances behind a load balancer,
+**move rate limiting to the edge** rather than into the app:
+
+| Edge layer | What to configure |
+|------------|-------------------|
+| Cloudflare (free) | Security → WAF → Rate limiting rules per path |
+| Caddy | `rate_limit` directive in your Caddyfile |
+| Nginx | `limit_req_zone` + `limit_req` directives |
+
+This is also more efficient — abusive traffic is dropped before it ever
+reaches a Nuxt process — and it removes the need for any extra infrastructure
+inside Reqcore itself.
+
 ---
 
 ## OIDC Single Sign-On (SSO)

app/app.vue

@@ -9,6 +9,22 @@ useHead(() => ({
   meta: i18nHead.value.meta,
 }))
 
+// Blocking inline script to apply dark mode before first paint (prevents white
+// flash). The nonce attribute is required by the nonce-based CSP set in
+// server/middleware/csp.ts — without it the script would be blocked by the
+// Content Security Policy (CSP).
+const _nonce = import.meta.server ? (useRequestEvent()?.context?.nonce ?? '') : ''
+useHead({
+  script: [
+    {
+      key: 'dark-mode-init',
+      innerHTML: '(function(){try{var s=localStorage.getItem("reqcore-color-mode");var m=s||(window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light");document.documentElement.classList.toggle("dark",m==="dark");document.documentElement.style.colorScheme=m}catch(e){}})()',
+      tagPosition: 'head',
+      ...(_nonce ? { nonce: _nonce } : {}),
+    },
+  ],
+})
+
 // Sync Better Auth session → PostHog identity & org group
 await usePostHogIdentity()
 </script>

app/assets/css/main.css

@@ -237,9 +237,15 @@
 
 /* ── Bento card subtle border-glow (Supabase-style) ───── */
 .bento-card {
+  background: oklch(98.5% 0.002 264);
+  border: 1px solid oklch(93.0% 0.006 264);
+}
+
+.dark .bento-card {
   background:
     linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%),
     #0c0c0f;
+  border: none;
 }
 
 /* ── Tech stack cards (Linear-style premium) ──────────── */
@@ -289,6 +295,10 @@
 }
 
 .bento-card::before {
+  content: none; /* hidden in light mode */
+}
+
+.dark .bento-card::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -309,6 +319,11 @@
 }
 
 .bento-card:hover {
+  background: oklch(96.5% 0.004 264);
+  border-color: oklch(87.0% 0.008 264);
+}
+
+.dark .bento-card:hover {
   background:
     linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.005) 100%),
     #0c0c0f;

app/components/PublicNavBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Github } from 'lucide-vue-next'
+import { Github, Sun, Moon } from 'lucide-vue-next'
 
 defineProps<{
   activePage?: 'features' | 'jobs' | 'roadmap' | 'blog' | 'docs'
@@ -8,15 +8,16 @@ defineProps<{
 const { t } = useI18n()
 const localePath = useLocalePath()
 const { data: session } = await authClient.useSession(useFetch)
+const { isDark, toggle: toggleColorMode } = useColorMode()
 </script>
 
 <template>
-  <nav class="fixed inset-x-0 top-0 z-50 border-b border-white/[0.06] bg-[#09090b]/80 backdrop-blur-xl">
+  <nav class="fixed inset-x-0 top-0 z-50 border-b border-surface-200/80 dark:border-white/[0.06] bg-white/80 dark:bg-[#09090b]/80 backdrop-blur-xl">
     <div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-6">
       <!-- Logo — links to marketing site (reqcore.com) -->
       <a
         :href="useRuntimeConfig().public.marketingUrl"
-        class="flex items-center gap-2.5 text-[15px] font-semibold tracking-tight text-white"
+        class="flex items-center gap-2.5 text-[15px] font-semibold tracking-tight text-surface-900 dark:text-white"
       >
         <img
           src="/eagle-mascot-logo-128.png"
@@ -35,15 +36,15 @@ const { data: session } = await authClient.useSession(useFetch)
         <NuxtLink
           :to="localePath('/jobs')"
           class="rounded-md px-3 py-1.5 text-[13px] font-medium transition"
-          :class="activePage === 'jobs' ? 'text-white' : 'text-surface-400 hover:text-white'"
+          :class="activePage === 'jobs' ? 'text-surface-900 dark:text-white' : 'text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white'"
         >
           {{ t('home.nav.openPositions') }}
         </NuxtLink>
         <a
           href="https://github.com/reqcore-inc/reqcore"
           target="_blank"
           rel="noopener noreferrer"
-          class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[13px] font-medium text-surface-400 transition hover:text-white"
+          class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[13px] font-medium text-surface-500 dark:text-surface-400 transition hover:text-surface-900 dark:hover:text-white"
         >
           <Github class="h-3.5 w-3.5" />
           {{ t('home.nav.github') }}
@@ -52,25 +53,38 @@ const { data: session } = await authClient.useSession(useFetch)
 
       <!-- Right: session actions + language switcher -->
       <div class="flex items-center gap-2">
+        <ClientOnly>
+          <button
+            class="inline-flex items-center justify-center size-8 rounded-lg text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-white/10 transition-all duration-200 cursor-pointer border-0 bg-transparent"
+            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            @click="toggleColorMode"
+          >
+            <Sun v-if="isDark" class="size-4" />
+            <Moon v-else class="size-4" />
+          </button>
+          <template #fallback>
+            <div class="size-8" aria-hidden="true" />
+          </template>
+        </ClientOnly>
         <LanguageSwitcher />
         <template v-if="session?.user">
           <NuxtLink
             :to="localePath('/dashboard')"
-            class="rounded-md bg-white px-3.5 py-1.5 text-[13px] font-semibold text-[#09090b] transition hover:bg-white/90"
+            class="rounded-md bg-surface-900 dark:bg-white px-3.5 py-1.5 text-[13px] font-semibold text-white dark:text-[#09090b] transition hover:bg-surface-800 dark:hover:bg-white/90"
           >
             {{ t('home.nav.dashboard') }}
           </NuxtLink>
         </template>
         <template v-else>
           <NuxtLink
             :to="localePath('/auth/sign-in')"
-            class="hidden rounded-md px-3 py-1.5 text-[13px] font-medium text-surface-400 transition hover:text-white sm:inline-flex"
+            class="hidden rounded-md px-3 py-1.5 text-[13px] font-medium text-surface-500 dark:text-surface-400 transition hover:text-surface-900 dark:hover:text-white sm:inline-flex"
           >
             {{ t('home.nav.logIn') }}
           </NuxtLink>
           <NuxtLink
             :to="localePath('/auth/sign-up')"
-            class="rounded-md bg-white px-3.5 py-1.5 text-[13px] font-semibold text-[#09090b] transition hover:bg-white/90"
+            class="rounded-md bg-surface-900 dark:bg-white px-3.5 py-1.5 text-[13px] font-semibold text-white dark:text-[#09090b] transition hover:bg-surface-800 dark:hover:bg-white/90"
           >
             {{ t('home.nav.signUp') }}
           </NuxtLink>

app/composables/useColorMode.ts

@@ -3,21 +3,43 @@
  *
  * - Persists preference to `localStorage` under the key `reqcore-color-mode`.
  * - Defaults to OS preference (`prefers-color-scheme: dark`) on first visit.
- * - Toggles the `.dark` class on `<html>` for Tailwind's dark variant.
+ * - Manages the `.dark` class on `<html>` via both Nuxt's useHead (so it
+ *   survives Unhead's reactive attribute patching) and direct DOM manipulation
+ *   for immediate visual feedback.
  *
  * Must be called in `<script setup>` context.
  */
 export function useColorMode() {
   const colorMode = useState<'light' | 'dark'>('color-mode', () => 'light')
   const isDark = computed(() => colorMode.value === 'dark')
 
+  // Route the class through Nuxt's head management (Unhead) so that
+  // reactive htmlAttrs updates (e.g. locale switches) do not inadvertently
+  // strip the .dark class that was set by direct DOM manipulation.
+  // The object syntax { dark: bool } lets Unhead add/remove 'dark' precisely.
+  useHead(computed(() => ({
+    htmlAttrs: {
+      class: { dark: isDark.value },
+    },
+  })))
+
   function applyClass() {
     if (import.meta.server) return
-    if (colorMode.value === 'dark') {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
+    // Direct DOM update for immediate visual feedback without waiting for
+    // Unhead's next flush cycle.
+    document.documentElement.classList.toggle('dark', colorMode.value === 'dark')
+    document.documentElement.style.colorScheme = colorMode.value
+  }
+
+  // Immediately sync Vue state from the real DOM on the client.
+  // The inline script in app.vue applies .dark before Vue loads, so the HTML
+  // class is always the source of truth. If useState is still at the server
+  // default ('light') but the page is actually dark, we fix that here —
+  // before any user interaction is possible — so the icon and toggle are correct.
+  if (import.meta.client) {
+    const htmlIsDark = document.documentElement.classList.contains('dark')
+    if (htmlIsDark && colorMode.value !== 'dark') colorMode.value = 'dark'
+    else if (!htmlIsDark && colorMode.value !== 'light') colorMode.value = 'light'
   }
 
   /** Toggle between light and dark mode. */
@@ -38,16 +60,17 @@ export function useColorMode() {
     }
   }
 
-  // Read from localStorage on mount (client only)
+  // Keep state in sync with localStorage on mount (handles tab switches,
+  // storage events from other tabs, etc.)
   if (import.meta.client) {
     onMounted(() => {
       const stored = localStorage.getItem('reqcore-color-mode') as 'light' | 'dark' | null
-      if (stored) {
-        colorMode.value = stored
-      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        colorMode.value = 'dark'
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      const resolved: 'light' | 'dark' = stored ? stored : (prefersDark ? 'dark' : 'light')
+      if (colorMode.value !== resolved) {
+        colorMode.value = resolved
+        applyClass()
       }
-      applyClass()
     })
   }
 

app/layouts/auth.vue

@@ -1,6 +1,24 @@
+<script setup lang="ts">
+import { Sun, Moon } from 'lucide-vue-next'
+const { isDark, toggle: toggleColorMode } = useColorMode()
+</script>
+
 <template>
   <div class="min-h-screen flex items-center justify-center bg-surface-50 dark:bg-surface-950 p-4 relative">
-    <div class="absolute right-4 top-4 z-10">
+    <div class="absolute right-4 top-4 z-10 flex items-center gap-2">
+      <ClientOnly>
+        <button
+          class="inline-flex items-center justify-center size-8 rounded-lg text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all duration-200 cursor-pointer border-0 bg-transparent"
+          :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+          @click="toggleColorMode"
+        >
+          <Sun v-if="isDark" class="size-4" />
+          <Moon v-else class="size-4" />
+        </button>
+        <template #fallback>
+          <div class="size-8" aria-hidden="true" />
+        </template>
+      </ClientOnly>
       <LanguageSwitcher />
     </div>
     <div class="w-full max-w-[540px] bg-white dark:bg-surface-900 rounded-lg shadow-sm dark:shadow-none dark:border dark:border-surface-800 p-8">