Give every page a Content-Security-Policy with its own noncesecurity/content-security-policy

The pages of progmasoft.com and its hosts had no content security
policy. The proxy now creates a 128-bit nonce for every request and sends
the policy both ways: on the request, so that Next marks its own inline
scripts with the nonce, and on the response. The layout reads the nonce
for the theme bootstrap. Every page is rendered on demand already, so
none is served with a stale nonce.

Scripts may come from the host, carry the nonce, or be Cloudflare's Web
Analytics beacon from static.cloudflareinsights.com, which reports to
cloudflareinsights.com. 'strict-dynamic' is left out, because browsers
ignore host sources under it and the beacon is added by Cloudflare
without a nonce. Styles allow inline ones; objects, framing and other
base URLs are refused. There is no form-action: sign-in and OAuth
consent end in redirects to other hosts, loopback addresses included,
and browsers apply form-action to them. The development server also
gets 'unsafe-eval' for its hot reload.

Tests check the nonce and each directive; ARCHITECTURE.md describes the
policy.

1 files changed, 58 insertions, 0 deletions

diff --git a/apps/web/lib/content-security-policy.ts b/apps/web/lib/content-security-policy.ts
new file mode 100644
index 0000000..c7a285e
--- /dev/null
+++ b/apps/web/lib/content-security-policy.ts
@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
+// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1
+
+/** The request header that carries the nonce of a page to its layout. */
+export const nonceHeader = "x-nonce";
+
+/**
+ * A fresh nonce for one response: 128 random bits in base64.
+ *
+ * @returns The nonce.
+ */
+export function createNonce(): string {
+  return btoa(
+    String.fromCharCode(...crypto.getRandomValues(new Uint8Array(16))),
+  );
+}
+
+/**
+ * The Content-Security-Policy of a page. Next marks its own inline scripts
+ * with the nonce when it reads this policy from the request; the theme
+ * bootstrap of the layout carries it too.
+ *
+ * Cloudflare adds its Web Analytics beacon to every page, from
+ * static.cloudflareinsights.com, reporting to cloudflareinsights.com and to
+ * /cdn-cgi/rum on the same host. 'strict-dynamic' would make browsers ignore
+ * that host, so the policy lists hosts instead.
+ *
+ * There is no form-action: a sign-in or consent form ends in a redirect to
+ * another Progmasoft host or to an OAuth client, including a loopback address,
+ * and browsers apply form-action to those redirects.
+ *
+ * @param nonce The nonce of the response.
+ * @param development Whether the development server runs, which evaluates code
+ * for its hot reload.
+ * @returns The value of the header.
+ */
+export function contentSecurityPolicy(
+  nonce: string,
+  development: boolean,
+): string {
+  const scripts = [
+    "'self'",
+    `'nonce-${nonce}'`,
+    "https://static.cloudflareinsights.com",
+    ...(development ? ["'unsafe-eval'"] : []),
+  ];
+  return [
+    "default-src 'self'",
+    `script-src ${scripts.join(" ")}`,
+    "style-src 'self' 'unsafe-inline'",
+    "img-src 'self' data:",
+    "font-src 'self'",
+    "connect-src 'self' https://cloudflareinsights.com",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "frame-ancestors 'none'",
+  ].join("; ");
+}