fix: Add CSP back to login page (calcom#22688)

hariombalhara · web-flow · commit f905ae750285 · 2025-07-26T01:38:20.000+01:00
* Middleware only logic to add CSP header as Next.js App Router doesnt allow setting header in server component

* add tests

* Remove nonce from Page Router and fix ts issues

* Add checkly test
diff --git a/__checks__/README.md b/__checks__/README.md
@@ -1,4 +1,6 @@
 # Checkly Tests
 
 Run as `yarn checkly test`
+Optionally, run as `yarn checkly test --record` to be able to get detailed debugging view in Checkly UI
+Run the tests for a particylar file as `yarn checkly test {filePattern}`
 Deploy the tests as `yarn checkly deploy`
diff --git a/__checks__/csp-login.spec.ts b/__checks__/csp-login.spec.ts
@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("CSP Headers", () => {
+  test("Login page should have CSP header with nonce", async ({ page }) => {
+    const targetUrl = process.env.ENVIRONMENT_URL || "https://app.cal.com";
+
+    const response = await page.goto(`${targetUrl}/auth/login`);
+
+    expect(response?.status()).toBe(200);
+
+    const cspHeader = response?.headers()["content-security-policy"];
+    expect(cspHeader).toBeTruthy();
+
+    // Verify nonce is present in CSP header
+    const nonceMatch = cspHeader?.match(/'nonce-([^']+)'/);
+    expect(nonceMatch).toBeTruthy();
+    expect(nonceMatch![1]).toHaveLength(24);
+    expect(nonceMatch![1]).toMatch(/==$/);
+
+    await page.screenshot({ path: "screenshot.jpg" });
+  });
+});
diff --git a/apps/web/app/(booking-page-wrapper)/layout.tsx b/apps/web/app/(booking-page-wrapper)/layout.tsx
@@ -4,7 +4,7 @@ import PageWrapper from "@components/PageWrapperAppDir";
 
 export default async function BookingPageWrapperLayout({ children }: { children: React.ReactNode }) {
   const h = await headers();
-  const nonce = h.get("x-nonce") ?? undefined;
+  const nonce = h.get("x-csp-nonce") ?? undefined;
 
   return (
     <>
diff --git a/apps/web/app/(use-page-wrapper)/layout.tsx b/apps/web/app/(use-page-wrapper)/layout.tsx
@@ -5,7 +5,7 @@ import PageWrapper from "@components/PageWrapperAppDir";
 
 export default async function PageWrapperLayout({ children }: { children: React.ReactNode }) {
   const h = await headers();
-  const nonce = h.get("x-nonce") ?? undefined;
+  const nonce = h.get("x-csp-nonce") ?? undefined;
   const headScript = process.env.NEXT_PUBLIC_HEAD_SCRIPTS;
   const bodyScript = process.env.NEXT_PUBLIC_BODY_SCRIPTS;
 
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -96,7 +96,7 @@ const getInitialProps = async () => {
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const h = await headers();
-  const nonce = h.get("x-csp") ?? "";
+  const nonce = h.get("x-csp-nonce") ?? "";
 
   const { locale, direction, isEmbed, embedColorScheme } = await getInitialProps();
 
@@ -151,7 +151,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           ]}
         />
 
-        <Providers isEmbed={isEmbed}>
+        <Providers isEmbed={isEmbed} nonce={nonce}>
           <AppRouterI18nProvider translations={translations} locale={locale} ns={ns}>
             {children}
           </AppRouterI18nProvider>
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -21,7 +21,7 @@ export const generateMetadata = async () => {
 
 const ServerPage = async () => {
   const h = await headers();
-  const nonce = h.get("x-nonce") ?? undefined;
+  const nonce = h.get("x-csp-nonce") ?? undefined;
   const host = h.get("x-forwarded-host") ?? "";
 
   return (
diff --git a/apps/web/app/providers.tsx b/apps/web/app/providers.tsx
@@ -13,14 +13,15 @@ import PlainChat from "@lib/plain/dynamicProvider";
 type ProvidersProps = {
   isEmbed: boolean;
   children: React.ReactNode;
+  nonce: string | undefined;
 };
-export function Providers({ isEmbed, children }: ProvidersProps) {
+export function Providers({ isEmbed, children, nonce }: ProvidersProps) {
   const isBookingPage = useIsBookingPage();
 
   return (
     <SessionProvider>
       <TrpcProvider>
-        {!isBookingPage ? <PlainChat /> : null}
+        {!isBookingPage ? <PlainChat nonce={nonce} /> : null}
         {!isEmbed && !isBookingPage && <NotificationSoundHandler />}
         {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
         <CacheProvider>
diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
@@ -44,17 +44,8 @@ function PageWrapper(props: AppProps) {
     pageStatus = "403";
   }
 
-  // On client side don't let nonce creep into DOM
-  // It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
-  // See https://github.com/kentcdodds/nonce-hydration-issues
-  // Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
-  const nonce = typeof window !== "undefined" ? (pageProps.nonce ? "" : undefined) : pageProps.nonce;
   const providerProps = {
     ...props,
-    pageProps: {
-      ...props.pageProps,
-      nonce,
-    },
   };
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -79,7 +70,6 @@ function PageWrapper(props: AppProps) {
         {...seoConfig.defaultNextSeo}
       />
       <Script
-        nonce={nonce}
         id="page-status"
         // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
         // And we don't want it to error here anyways
diff --git a/apps/web/lib/app-providers-app-dir.tsx b/apps/web/lib/app-providers-app-dir.tsx
@@ -16,7 +16,6 @@ import { useFlags } from "@calcom/features/flags/hooks";
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
 import useIsThemeSupported from "@lib/hooks/useIsThemeSupported";
 import type { WithLocaleProps } from "@lib/withLocale";
-import type { WithNonceProps } from "@lib/withNonce";
 
 import type { PageWrapperProps } from "@components/PageWrapperAppDir";
 
@@ -25,12 +24,11 @@ import { getThemeProviderProps } from "./getThemeProviderProps";
 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = Omit<
   NextAppProps<
-    WithLocaleProps<
-      WithNonceProps<{
-        themeBasis?: string;
-        session: Session;
-      }>
-    >
+    WithLocaleProps<{
+      nonce: string | undefined;
+      themeBasis?: string;
+      session: Session;
+    }>
   >,
   "Component"
 > & {
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
@@ -20,7 +20,6 @@ import { useFlags } from "@calcom/features/flags/hooks";
 
 import useIsBookingPage from "@lib/hooks/useIsBookingPage";
 import type { WithLocaleProps } from "@lib/withLocale";
-import type { WithNonceProps } from "@lib/withNonce";
 
 import { useViewerI18n } from "@components/I18nLanguageHandler";
 
@@ -33,13 +32,11 @@ const I18nextAdapter = appWithTranslation<
 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = Omit<
   NextAppProps<
-    WithLocaleProps<
-      WithNonceProps<{
-        themeBasis?: string;
-        session: Session;
-        i18n?: SSRConfig;
-      }>
-    >
+    WithLocaleProps<{
+      themeBasis?: string;
+      session: Session;
+      i18n?: SSRConfig;
+    }>
   >,
   "Component"
 > & {
@@ -72,12 +69,7 @@ const getEmbedNamespace = (query: ParsedUrlQuery) => {
   return typeof window !== "undefined" ? window.getEmbedNamespace() : (query.embed as string) || null;
 };
 
-// We dont need to pass nonce to the i18n provider - this was causing x2-x3 re-renders on a hard refresh
-type AppPropsWithoutNonce = Omit<AppPropsWithChildren, "pageProps"> & {
-  pageProps: Omit<AppPropsWithChildren["pageProps"], "nonce">;
-};
-
-const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
+const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   /**
    * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
    **/
@@ -141,7 +133,7 @@ const enum ThemeSupport {
 
 type CalcomThemeProps = PropsWithChildren<
   Pick<AppProps, "router"> &
-    Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
+    Pick<AppProps["pageProps"], "themeBasis"> &
     Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
 >;
 const CalcomThemeProvider = (props: CalcomThemeProps) => {
@@ -253,7 +245,6 @@ function getThemeProviderProps({
     storageKey,
     forcedTheme,
     themeSupport,
-    nonce: props.nonce,
     enableColorScheme: false,
     enableSystem: themeSupport !== ThemeSupport.None,
     // next-themes doesn't listen to changes on storageKey. So we need to force a re-render when storageKey changes
@@ -280,24 +271,13 @@ function OrgBrandProvider({ children }: { children: React.ReactNode }) {
 
 const AppProviders = (props: AppPropsWithChildren) => {
   const isBookingPage = useIsBookingPage();
-  const { pageProps, ...rest } = props;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { nonce, ...restPageProps } = pageProps;
-  const propsWithoutNonce = {
-    pageProps: {
-      ...restPageProps,
-    },
-    ...rest,
-  };
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <CustomI18nextProvider {...propsWithoutNonce}>
+      <CustomI18nextProvider {...props}>
         <TooltipProvider>
           <CalcomThemeProvider
             themeBasis={props.pageProps.themeBasis}
-            nonce={props.pageProps.nonce}
             isThemeSupported={props.Component.isThemeSupported}
             isBookingPage={props.Component.isBookingPage || isBookingPage}
             router={props.router}>
diff --git a/apps/web/lib/csp.ts b/apps/web/lib/csp.ts
@@ -1,6 +1,3 @@
-import type { IncomingMessage, OutgoingMessage } from "http";
-import type { NextRequest, NextResponse } from "next/server";
-
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
@@ -21,7 +18,7 @@ function getCspPolicy(nonce: string) {
 	  default-src 'self' ${IS_PRODUCTION ? "" : "data:"};
 	  script-src ${
       IS_PRODUCTION
-        ? // 'self' 'unsafe-inline' https: added for Browsers not supporting strict-dynamic not supporting strict-dynamic
+        ? // 'self' 'unsafe-inline' https: added for Browsers not supporting strict-dynamic
           `'nonce-${nonce}' 'strict-dynamic' 'self' 'unsafe-inline' https:`
         : // Note: We could use 'strict-dynamic' with 'nonce-..' instead of unsafe-inline but there are some streaming related scripts that get blocked(because they don't have nonce on them). It causes a really frustrating full page error model by Next.js to show up sometimes
           "'unsafe-inline' 'unsafe-eval' https: http:"
@@ -38,77 +35,24 @@ function getCspPolicy(nonce: string) {
 	`;
 }
 
-// Taken from @next-safe/middleware
-const isPagePathRequest = (url: URL) => {
-  const isNonPagePathPrefix = /^\/(?:_next|api)\//;
-  const isFile = /\..*$/;
-  const { pathname } = url;
-  return !isNonPagePathPrefix.test(pathname) && !isFile.test(pathname);
-};
+export function getCspNonce() {
+  const nonce = buildNonce(crypto.getRandomValues(new Uint8Array(22)));
 
-function safeParseString(value: unknown): { success: boolean; data?: string } {
-  if (typeof value === "string") {
-    return { success: true, data: value };
-  }
-  return { success: false };
+  return nonce;
 }
 
-export function csp(req: IncomingMessage | NextRequest | null, res: OutgoingMessage | NextResponse | null) {
-  if (!req) {
-    return { nonce: undefined };
-  }
-  const existingNonce = "cache" in req ? req.headers.get("x-nonce") : req.headers["x-nonce"];
+export function getCspHeader({ shouldEnforceCsp, nonce }: { shouldEnforceCsp: boolean; nonce: string }) {
+  const cspHeaderName = shouldEnforceCsp
+    ? "Content-Security-Policy"
+    : /*"Content-Security-Policy-Report-Only"*/ null;
 
-  if (existingNonce) {
-    const existingNoneParsed = safeParseString(existingNonce);
-    return { nonce: existingNoneParsed.success ? existingNoneParsed.data : "" };
-  }
-  if (!req.url) {
-    return { nonce: undefined };
+  if (!cspHeaderName) {
+    return null;
   }
-  const CSP_POLICY = process.env.CSP_POLICY;
-  const cspEnabledForInstance = CSP_POLICY;
-  const nonce = buildNonce(crypto.getRandomValues(new Uint8Array(22)));
 
-  const parsedUrl = new URL(req.url, "http://base_url");
-  const cspEnabledForPage = cspEnabledForInstance && isPagePathRequest(parsedUrl);
-  if (!cspEnabledForPage) {
-    return {
-      nonce: undefined,
-    };
-  }
-  // Set x-nonce request header to be used by `getServerSideProps` or similar fns and `Document.getInitialProps` to read the nonce from
-  // It is generated for all page requests but only used by pages that need CSP
-
-  if ("cache" in req) {
-    req.headers.set("x-nonce", nonce);
-  } else {
-    req.headers["x-nonce"] = nonce;
-  }
-
-  if (res) {
-    const enforced =
-      "cache" in req ? req.headers.get("x-csp-enforce") === "true" : req.headers["x-csp-enforce"] === "true";
-
-    // No need to enable REPORT ONLY mode for CSP unless we start actively working on it. See https://github.com/calcom/cal.com/issues/13844
-    const name = enforced ? "Content-Security-Policy" : /*"Content-Security-Policy-Report-Only"*/ null;
-
-    if (!name) {
-      return {
-        nonce: undefined,
-      };
-    }
-
-    const value = getCspPolicy(nonce)
-      .replace(/\s{2,}/g, " ")
-      .trim();
-
-    if ("body" in res) {
-      res.headers.set(name, value);
-    } else {
-      res.setHeader(name, value);
-    }
-  }
+  const cspHeaderValue = getCspPolicy(nonce)
+    .replace(/\s{2,}/g, " ")
+    .trim();
 
-  return { nonce };
+  return { name: cspHeaderName, value: cspHeaderValue };
 }
diff --git a/apps/web/lib/plain/dynamicProvider.tsx b/apps/web/lib/plain/dynamicProvider.tsx
@@ -1,4 +1,5 @@
 import dynamic from "next/dynamic";
 import { Fragment } from "react";
 
+// Preload caused by dynamic import doesn't seem to add nonce and thus preload fails but the functionality still works - https://github.com/vercel/next.js/issues/81260
 export default process.env.NEXT_PUBLIC_PLAIN_CHAT_ID ? dynamic(() => import("./plainChat")) : Fragment;
diff --git a/apps/web/lib/plain/plainChat.tsx b/apps/web/lib/plain/plainChat.tsx
@@ -80,7 +80,7 @@ interface PlainChatConfig {
 }
 
 const PlainChat = IS_PLAIN_CHAT_ENABLED
-  ? () => {
+  ? ({ nonce }: { nonce: string | undefined }) => {
       const [config, setConfig] = useState<PlainChatConfig | null>(null);
       const [isSmallScreen, setIsSmallScreen] = useState(false);
       const { data: session } = useSession();
@@ -297,12 +297,14 @@ const PlainChat = IS_PLAIN_CHAT_ENABLED
       return (
         <>
           <Script
+            nonce={nonce}
             id="plain-chat"
             src="https://chat.cdn-plain.com/index.js"
             strategy="afterInteractive"
             onLoad={() => window.plainScriptLoaded?.()}
           />
           <Script
+            nonce={nonce}
             id="plain-chat-init"
             strategy="afterInteractive"
             dangerouslySetInnerHTML={{ __html: plainChatScript }}
diff --git a/apps/web/lib/withNonce.tsx b/apps/web/lib/withNonce.tsx
diff --git a/apps/web/middleware.test.ts b/apps/web/middleware.test.ts
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
diff --git a/apps/web/modules/auth/login-view.tsx b/apps/web/modules/auth/login-view.tsx
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
