From 440a4e919a0fca997e39a225e95397b63e35f30a Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 18 Apr 2026 13:10:42 +0200
Subject: [PATCH] Revert "perf: make root HTML cacheable by dropping
 per-request CSP nonce"

This reverts commit 522bf6a01946820e91c2528c1fbb65752ef94ad5.
---
 README.md                              |  2 +-
 app/[locale]/layout.tsx                |  9 ++++++++-
 app/layout.tsx                         | 23 ++++++++++++++++++++++-
 components/providers/intl-provider.tsx |  1 +
 proxy.ts                               | 12 ++++++++++--
 public/theme-init.js                   | 12 ------------
 6 files changed, 42 insertions(+), 17 deletions(-)
 delete mode 100644 public/theme-init.js

diff --git a/README.md b/README.md
index 90e79e64..0feff814 100644
--- a/README.md
+++ b/README.md
@@ -180,7 +180,7 @@ Built with Next.js and the JMAP protocol.
 - **TOTP two-factor authentication**
 - **Account security panel** - manage passwords and 2FA via Stalwart admin API
 - **"Remember me"** - AES-256-GCM encrypted httpOnly cookie (opt-in)
-- **Security headers** - enforced CSP (script-src 'self', no unsafe-inline), X-Frame-Options, Referrer-Policy; SSRF redirect validation; PDF iframe sandbox; IP spoofing prevention
+- **Security headers** - enforced CSP with per-request nonce, X-Frame-Options, Referrer-Policy; SSRF redirect validation; PDF iframe sandbox; IP spoofing prevention
 - **Plugin hardening** - dangerous-pattern detection, admin approval required, secure HTTP proxy API (no auth-header exposure)
 - **Newsletter unsubscribe** (RFC 2369)
 
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 1bedc98c..12b1a4e3 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -18,8 +18,15 @@ export default async function LocaleLayout({
 
   if (!(locales as readonly string[]).includes(locale)) notFound();
 
+  let messages;
+  try {
+    messages = (await import(`@/locales/${locale}/common.json`)).default;
+  } catch {
+    notFound();
+  }
+
   return (
-    <IntlProvider locale={locale}>
+    <IntlProvider locale={locale} messages={messages}>
       <ThemeProvider>
         <CalendarAlertProvider>
           <RateLimitToastProvider>
diff --git a/app/layout.tsx b/app/layout.tsx
index 58c11fe6..c2a54606 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { headers } from "next/headers";
 import { getLocale } from "next-intl/server";
 import { PWAInstallPrompt } from "@/components/pwa-install-prompt";
 import { ServiceWorkerRegistration } from "@/components/service-worker-registration";
@@ -39,6 +40,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const locale = await getLocale();
+  const nonce = (await headers()).get("x-nonce") ?? "";
   const parentOrigin = process.env.NEXT_PUBLIC_PARENT_ORIGIN || "";
 
   return (
@@ -55,7 +57,26 @@ export default async function RootLayout({
         {parentOrigin && (
           <meta name="parent-origin" content={parentOrigin} />
         )}
-        <script src="/theme-init.js" />
+        <script
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme-storage');
+                  const theme = stored ? JSON.parse(stored).state.theme : 'system';
+                  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  const resolved = theme === 'system' ? systemTheme : theme;
+                  document.documentElement.classList.remove('light', 'dark');
+                  document.documentElement.classList.add(resolved);
+                } catch (e) {
+                  document.documentElement.classList.add('light');
+                }
+              })();
+            `,
+          }}
+        />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
diff --git a/components/providers/intl-provider.tsx b/components/providers/intl-provider.tsx
index a729db9d..54d8726f 100644
--- a/components/providers/intl-provider.tsx
+++ b/components/providers/intl-provider.tsx
@@ -38,6 +38,7 @@ const ALL_MESSAGES = {
 
 interface IntlProviderProps {
   locale: string;
+  messages: Record<string, unknown>;
   children: React.ReactNode;
 }
 
diff --git a/proxy.ts b/proxy.ts
index 6fcd2dfe..348328a2 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -5,11 +5,12 @@ import { routing } from "./i18n/routing";
 const intlMiddleware = createIntlMiddleware(routing);
 
 export function proxy(request: NextRequest) {
+  const nonce = crypto.randomUUID();
   const isDev = process.env.NODE_ENV === "development";
 
   const scriptSrc = isDev
-    ? `'self' 'unsafe-eval' blob:`
-    : `'self' blob:`;
+    ? `'self' 'nonce-${nonce}' 'unsafe-eval' blob:`
+    : `'self' 'nonce-${nonce}' blob:`;
 
   const connectSrc = isDev ? `'self' https: ws: wss:` : `'self' https:`;
 
@@ -51,6 +52,13 @@ export function proxy(request: NextRequest) {
   }
   const response = intlResponse ?? NextResponse.next();
 
+  const existing = response.headers.get("x-middleware-override-headers");
+  response.headers.set(
+    "x-middleware-override-headers",
+    existing ? `${existing},x-nonce` : "x-nonce"
+  );
+  response.headers.set("x-middleware-request-x-nonce", nonce);
+
   response.headers.set("X-Content-Type-Options", "nosniff");
 
   // X-Frame-Options only supports DENY/SAMEORIGIN. When frame-ancestors
diff --git a/public/theme-init.js b/public/theme-init.js
deleted file mode 100644
index fc0240c4..00000000
--- a/public/theme-init.js
+++ /dev/null
@@ -1,12 +0,0 @@
-(function () {
-  try {
-    var stored = localStorage.getItem('theme-storage');
-    var theme = stored ? JSON.parse(stored).state.theme : 'system';
-    var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    var resolved = theme === 'system' ? systemTheme : theme;
-    document.documentElement.classList.remove('light', 'dark');
-    document.documentElement.classList.add(resolved);
-  } catch (e) {
-    document.documentElement.classList.add('light');
-  }
-})();