feat: add CSP nonce support for inline styles (#6796) (#6801)

apps/web/modules/ui/components/survey/index.tsx

@@ -14,6 +14,7 @@ declare global {
       renderSurveyModal: (props: SurveyContainerProps) => void;
       renderSurvey: (props: SurveyContainerProps) => void;
       onFilePick: (files: { name: string; type: string; base64: string }[]) => void;
+      setNonce: (nonce: string | undefined) => void;
     };
   }
 }

packages/js-core/src/index.ts

@@ -76,6 +76,19 @@ const registerRouteChange = async (): Promise<void> => {
   await queue.add(checkPageUrl, CommandType.GeneralAction);
 };
 
+/**
+ * Set the CSP nonce for inline styles
+ * @param nonce - The CSP nonce value (without 'nonce-' prefix), or undefined to clear
+ */
+const setNonce = (nonce: string | undefined): void => {
+  // Store nonce on window for access when surveys package loads
+  globalThis.window.__formbricksNonce = nonce;
+
+  // Set nonce in surveys package if it's already loaded
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+  globalThis.window.formbricksSurveys?.setNonce?.(nonce);
+};
+
 const formbricks = {
   /** @deprecated Use setup() instead. This method will be removed in a future version */
   init: (initConfig: TLegacyConfigInput) => setup(initConfig as unknown as TConfigInput),
@@ -88,6 +101,7 @@ const formbricks = {
   track,
   logout,
   registerRouteChange,
+  setNonce,
 };
 
 type TFormbricks = typeof formbricks;

packages/js-core/src/lib/survey/widget.ts

@@ -201,19 +201,24 @@ export const removeWidgetContainer = (): void => {
   document.getElementById(CONTAINER_ID)?.remove();
 };
 
-const loadFormbricksSurveysExternally = (): Promise<typeof window.formbricksSurveys> => {
+const loadFormbricksSurveysExternally = (): Promise<typeof globalThis.window.formbricksSurveys> => {
   const config = Config.getInstance();
 
   return new Promise((resolve, reject) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- We need to check if the formbricksSurveys object exists
-    if (window.formbricksSurveys) {
-      resolve(window.formbricksSurveys);
+    if (globalThis.window.formbricksSurveys) {
+      resolve(globalThis.window.formbricksSurveys);
     } else {
       const script = document.createElement("script");
       script.src = `${config.get().appUrl}/js/surveys.umd.cjs`;
       script.async = true;
       script.onload = () => {
-        resolve(window.formbricksSurveys);
+        // Apply stored nonce if it was set before surveys package loaded
+        const storedNonce = globalThis.window.__formbricksNonce;
+        if (storedNonce) {
+          globalThis.window.formbricksSurveys.setNonce(storedNonce);
+        }
+        resolve(globalThis.window.formbricksSurveys);
       };
       script.onerror = (error) => {
         console.error("Failed to load Formbricks Surveys library:", error);

packages/surveys/src/components/general/headline.tsx

@@ -1,7 +1,7 @@
 import DOMPurify from "isomorphic-dompurify";
 import { useTranslation } from "react-i18next";
 import { type TSurveyQuestionId } from "@formbricks/types/surveys/types";
-import { isValidHTML } from "@/lib/html-utils";
+import { isValidHTML, stripInlineStyles } from "@/lib/html-utils";
 
 interface HeadlineProps {
   headline: string;
@@ -12,8 +12,16 @@ interface HeadlineProps {
 
 export function Headline({ headline, questionId, required = true, alignTextCenter = false }: HeadlineProps) {
   const { t } = useTranslation();
-  const isHeadlineHtml = isValidHTML(headline);
-  const safeHtml = isHeadlineHtml && headline ? DOMPurify.sanitize(headline, { ADD_ATTR: ["target"] }) : "";
+  // Strip inline styles BEFORE parsing to avoid CSP violations
+  const strippedHeadline = stripInlineStyles(headline);
+  const isHeadlineHtml = isValidHTML(strippedHeadline);
+  const safeHtml =
+    isHeadlineHtml && strippedHeadline
+      ? DOMPurify.sanitize(strippedHeadline, {
+          ADD_ATTR: ["target"],
+          FORBID_ATTR: ["style"], // Additional safeguard to remove any remaining inline styles
+        })
+      : "";
 
   return (
     <label htmlFor={questionId} className="fb-text-heading fb-mb-[3px] fb-flex fb-flex-col">

packages/surveys/src/components/general/subheader.tsx

@@ -1,6 +1,6 @@
 import DOMPurify from "isomorphic-dompurify";
 import { type TSurveyQuestionId } from "@formbricks/types/surveys/types";
-import { isValidHTML } from "@/lib/html-utils";
+import { isValidHTML, stripInlineStyles } from "@/lib/html-utils";
 
 interface SubheaderProps {
   subheader?: string;
@@ -8,8 +8,16 @@ interface SubheaderProps {
 }
 
 export function Subheader({ subheader, questionId }: SubheaderProps) {
-  const isHtml = subheader ? isValidHTML(subheader) : false;
-  const safeHtml = isHtml && subheader ? DOMPurify.sanitize(subheader, { ADD_ATTR: ["target"] }) : "";
+  // Strip inline styles BEFORE parsing to avoid CSP violations
+  const strippedSubheader = subheader ? stripInlineStyles(subheader) : "";
+  const isHtml = strippedSubheader ? isValidHTML(strippedSubheader) : false;
+  const safeHtml =
+    isHtml && strippedSubheader
+      ? DOMPurify.sanitize(strippedSubheader, {
+          ADD_ATTR: ["target"],
+          FORBID_ATTR: ["style"], // Additional safeguard to remove any remaining inline styles
+        })
+      : "";
 
   if (!subheader) return null;
 

packages/surveys/src/index.ts

@@ -4,7 +4,7 @@ import { RenderSurvey } from "@/components/general/render-survey";
 import { I18nProvider } from "@/components/i18n/provider";
 import { FILE_PICK_EVENT } from "@/lib/constants";
 import { getI18nLanguage } from "@/lib/i18n-utils";
-import { addCustomThemeToDom, addStylesToDom } from "@/lib/styles";
+import { addCustomThemeToDom, addStylesToDom, setStyleNonce } from "@/lib/styles";
 
 export const renderSurveyInline = (props: SurveyContainerProps) => {
   const inlineProps: SurveyContainerProps = {
@@ -70,15 +70,17 @@ export const renderSurveyModal = renderSurvey;
 
 export const onFilePick = (files: { name: string; type: string; base64: string }[]) => {
   const fileUploadEvent = new CustomEvent(FILE_PICK_EVENT, { detail: files });
-  window.dispatchEvent(fileUploadEvent);
+  globalThis.dispatchEvent(fileUploadEvent);
 };
 
 // Initialize the global formbricksSurveys object if it doesn't exist
-if (typeof window !== "undefined") {
-  window.formbricksSurveys = {
+if (globalThis.window !== undefined) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type definition is in @formbricks/types package
+  (globalThis.window as any).formbricksSurveys = {
     renderSurveyInline,
     renderSurveyModal,
     renderSurvey,
     onFilePick,
-  };
+    setNonce: setStyleNonce,
+  } as typeof globalThis.window.formbricksSurveys;
 }

packages/surveys/src/lib/html-utils.test.ts

@@ -1,7 +1,48 @@
 import { describe, expect, test } from "vitest";
-import { isValidHTML } from "./html-utils";
+import { isValidHTML, stripInlineStyles } from "./html-utils";
 
 describe("html-utils", () => {
+  describe("stripInlineStyles", () => {
+    test("should remove inline styles with double quotes", () => {
+      const input = '<div style="color: red;">Test</div>';
+      const expected = "<div>Test</div>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should remove inline styles with single quotes", () => {
+      const input = "<div style='color: red;'>Test</div>";
+      const expected = "<div>Test</div>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should remove multiple inline styles", () => {
+      const input = '<div style="color: red;"><span style="font-size: 14px;">Test</span></div>';
+      const expected = "<div><span>Test</span></div>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should handle complex inline styles", () => {
+      const input = '<p style="margin: 10px; padding: 5px; background-color: blue;">Content</p>';
+      const expected = "<p>Content</p>";
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should not affect other attributes", () => {
+      const input = '<div class="test" id="myDiv" style="color: red;">Test</div>';
+      const expected = '<div class="test" id="myDiv">Test</div>';
+      expect(stripInlineStyles(input)).toBe(expected);
+    });
+
+    test("should return unchanged string if no inline styles", () => {
+      const input = '<div class="test">Test</div>';
+      expect(stripInlineStyles(input)).toBe(input);
+    });
+
+    test("should handle empty string", () => {
+      expect(stripInlineStyles("")).toBe("");
+    });
+  });
+
   describe("isValidHTML", () => {
     test("should return false for empty string", () => {
       expect(isValidHTML("")).toBe(false);
@@ -22,5 +63,9 @@ describe("html-utils", () => {
     test("should return true for complex HTML", () => {
       expect(isValidHTML('<div class="test"><p>Test</p></div>')).toBe(true);
     });
+
+    test("should handle HTML with inline styles (they should be stripped)", () => {
+      expect(isValidHTML('<p style="color: red;">Test</p>')).toBe(true);
+    });
   });
 });

packages/surveys/src/lib/html-utils.ts

@@ -1,9 +1,23 @@
+/**
+ * Strip inline style attributes from HTML string to avoid CSP violations
+ * @param html - The HTML string to process
+ * @returns HTML string with all style attributes removed
+ * @note This is a security measure to prevent CSP violations during HTML parsing
+ */
+export const stripInlineStyles = (html: string): string => {
+  // Remove style="..." or style='...' attributes
+  // Use separate patterns for each quote type to avoid ReDoS vulnerability
+  // The pattern [^"]* and [^']* are safe as they don't cause backtracking
+  return html.replace(/\s+style\s*=\s*["'][^"']*["']/gi, ""); //NOSONAR
+};
+
 /**
  * Lightweight HTML detection for browser environments
  * Uses native DOMParser (built-in, 0 KB bundle size)
  * @param str - The input string to test
  * @returns true if the string contains valid HTML elements, false otherwise
  * @note Returns false in non-browser environments (SSR, Node.js) where window is undefined
+ * @note Strips inline styles before parsing to avoid CSP violations
  */
 export const isValidHTML = (str: string): boolean => {
   // This should ideally never happen because the surveys package should be used in an environment where DOM is available
@@ -12,7 +26,10 @@ export const isValidHTML = (str: string): boolean => {
   if (!str) return false;
 
   try {
-    const doc = new DOMParser().parseFromString(str, "text/html");
+    // Strip inline style attributes to avoid CSP violations during parsing
+    const strippedStr = stripInlineStyles(str);
+
+    const doc = new DOMParser().parseFromString(strippedStr, "text/html");
     const errorNode = doc.querySelector("parsererror");
     if (errorNode) return false;
     return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);

packages/surveys/src/lib/styles.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { type TProjectStyling } from "@formbricks/types/project";
 import { type TSurveyStyling } from "@formbricks/types/surveys/types";
-import { addCustomThemeToDom, addStylesToDom } from "./styles";
+import { addCustomThemeToDom, addStylesToDom, getStyleNonce, setStyleNonce } from "./styles";
 
 // Mock CSS module imports
 vi.mock("@/styles/global.css?inline", () => ({ default: ".global {}" }));
@@ -40,11 +40,85 @@ const getBaseProjectStyling = (overrides: Partial<TProjectStyling> = {}): TProje
   };
 };
 
+describe("setStyleNonce and getStyleNonce", () => {
+  beforeEach(() => {
+    // Reset the DOM and nonce before each test
+    document.head.innerHTML = "";
+    document.body.innerHTML = "";
+    setStyleNonce(undefined);
+  });
+
+  test("should set and get the nonce value", () => {
+    const nonce = "test-nonce-123";
+    setStyleNonce(nonce);
+    expect(getStyleNonce()).toBe(nonce);
+  });
+
+  test("should allow clearing the nonce with undefined", () => {
+    setStyleNonce("initial-nonce");
+    expect(getStyleNonce()).toBe("initial-nonce");
+    setStyleNonce(undefined);
+    expect(getStyleNonce()).toBeUndefined();
+  });
+
+  test("should update existing formbricks__css element with nonce", () => {
+    // Create an existing style element
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css";
+    document.head.appendChild(existingElement);
+
+    const nonce = "test-nonce-456";
+    setStyleNonce(nonce);
+
+    expect(existingElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should update existing formbricks__css__custom element with nonce", () => {
+    // Create an existing custom style element
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css__custom";
+    document.head.appendChild(existingElement);
+
+    const nonce = "test-nonce-789";
+    setStyleNonce(nonce);
+
+    expect(existingElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not update nonce on existing elements when nonce is undefined", () => {
+    // Create existing style elements
+    const mainElement = document.createElement("style");
+    mainElement.id = "formbricks__css";
+    mainElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(mainElement);
+
+    const customElement = document.createElement("style");
+    customElement.id = "formbricks__css__custom";
+    customElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(customElement);
+
+    setStyleNonce(undefined);
+
+    // Elements should retain their existing nonce (or be cleared if implementation removes it)
+    // The current implementation doesn't remove nonce when undefined, so we check it's not changed
+    expect(mainElement.getAttribute("nonce")).toBe("existing-nonce");
+    expect(customElement.getAttribute("nonce")).toBe("existing-nonce");
+  });
+
+  test("should handle setting nonce when elements don't exist", () => {
+    const nonce = "test-nonce-no-elements";
+    setStyleNonce(nonce);
+    expect(getStyleNonce()).toBe(nonce);
+    // Should not throw and should store the nonce for future use
+  });
+});
+
 describe("addStylesToDom", () => {
   beforeEach(() => {
     // Reset the DOM before each test
     document.head.innerHTML = "";
     document.body.innerHTML = "";
+    setStyleNonce(undefined);
   });
 
   afterEach(() => {
@@ -52,6 +126,7 @@ describe("addStylesToDom", () => {
     if (styleElement) {
       styleElement.remove();
     }
+    setStyleNonce(undefined);
   });
 
   test("should add a style element to the head with combined CSS", () => {
@@ -78,12 +153,68 @@ describe("addStylesToDom", () => {
     expect(secondStyleElement).toBe(firstStyleElement);
     expect(secondStyleElement?.innerHTML).toBe(initialInnerHTML);
   });
+
+  test("should apply nonce to new style element when nonce is set", () => {
+    const nonce = "test-nonce-styles";
+    setStyleNonce(nonce);
+    addStylesToDom();
+
+    const styleElement = document.getElementById("formbricks__css") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not apply nonce when nonce is not set", () => {
+    addStylesToDom();
+    const styleElement = document.getElementById("formbricks__css") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+  });
+
+  test("should update nonce on existing style element if nonce is set after creation", () => {
+    addStylesToDom(); // Create element without nonce
+    const styleElement = document.getElementById("formbricks__css") as HTMLStyleElement;
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+
+    const nonce = "test-nonce-update";
+    setStyleNonce(nonce);
+    addStylesToDom(); // Call again to trigger update logic
+
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not overwrite existing nonce when updating via addStylesToDom", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css";
+    existingElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(existingElement);
+
+    // Don't call setStyleNonce - just verify addStylesToDom doesn't overwrite
+    addStylesToDom(); // Should not overwrite since nonce already exists
+
+    // The update logic in addStylesToDom only sets nonce if it doesn't exist
+    expect(existingElement.getAttribute("nonce")).toBe("existing-nonce");
+  });
+
+  test("should overwrite existing nonce when setStyleNonce is called directly", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css";
+    existingElement.setAttribute("nonce", "existing-nonce");
+    document.head.appendChild(existingElement);
+
+    const newNonce = "new-nonce";
+    setStyleNonce(newNonce); // setStyleNonce always updates existing elements
+
+    // setStyleNonce directly updates the nonce attribute
+    expect(existingElement.getAttribute("nonce")).toBe(newNonce);
+  });
 });
 
 describe("addCustomThemeToDom", () => {
   beforeEach(() => {
     document.head.innerHTML = "";
     document.body.innerHTML = "";
+    setStyleNonce(undefined);
   });
 
   afterEach(() => {
@@ -91,6 +222,7 @@ describe("addCustomThemeToDom", () => {
     if (styleElement) {
       styleElement.remove();
     }
+    setStyleNonce(undefined);
   });
 
   const getCssVariables = (styleElement: HTMLStyleElement | null): Record<string, string> => {
@@ -271,6 +403,66 @@ describe("addCustomThemeToDom", () => {
     expect(variables["--fb-survey-background-color"]).toBeUndefined();
     expect(variables["--fb-input-background-color"]).toBeUndefined();
   });
+
+  test("should apply nonce to new custom theme style element when nonce is set", () => {
+    const nonce = "test-nonce-custom";
+    setStyleNonce(nonce);
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling });
+
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not apply nonce when nonce is not set", () => {
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling });
+
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    expect(styleElement).not.toBeNull();
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+  });
+
+  test("should update nonce on existing custom style element if nonce is set after creation", () => {
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling }); // Create element without nonce
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    expect(styleElement.getAttribute("nonce")).toBeNull();
+
+    const nonce = "test-nonce-custom-update";
+    setStyleNonce(nonce);
+    addCustomThemeToDom({ styling }); // Call again to trigger update logic
+
+    expect(styleElement.getAttribute("nonce")).toBe(nonce);
+  });
+
+  test("should not overwrite existing nonce when updating custom theme via addCustomThemeToDom", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css__custom";
+    existingElement.setAttribute("nonce", "existing-custom-nonce");
+    document.head.appendChild(existingElement);
+
+    // Don't call setStyleNonce - just verify addCustomThemeToDom doesn't overwrite
+    const styling = getBaseProjectStyling({ brandColor: { light: "#FF0000" } });
+    addCustomThemeToDom({ styling }); // Should not overwrite since nonce already exists
+
+    // The update logic in addCustomThemeToDom only sets nonce if it doesn't exist
+    expect(existingElement.getAttribute("nonce")).toBe("existing-custom-nonce");
+  });
+
+  test("should overwrite existing nonce when setStyleNonce is called directly on custom theme", () => {
+    const existingElement = document.createElement("style");
+    existingElement.id = "formbricks__css__custom";
+    existingElement.setAttribute("nonce", "existing-custom-nonce");
+    document.head.appendChild(existingElement);
+
+    const newNonce = "new-custom-nonce";
+    setStyleNonce(newNonce); // setStyleNonce directly updates the nonce attribute
+
+    // setStyleNonce directly updates the nonce attribute
+    expect(existingElement.getAttribute("nonce")).toBe(newNonce);
+  });
 });
 
 describe("getBaseProjectStyling_Helper", () => {

packages/surveys/src/lib/styles.ts

@@ -8,24 +8,74 @@ import preflight from "@/styles/preflight.css?inline";
 import editorCss from "../../../../apps/web/modules/ui/components/editor/styles-editor-frontend.css?inline";
 import datePickerCustomCss from "../styles/date-picker.css?inline";
 
+// Store the nonce globally for style elements
+let styleNonce: string | undefined;
+
+/**
+ * Set the CSP nonce to be applied to all style elements
+ * @param nonce - The CSP nonce value (without 'nonce-' prefix)
+ */
+export const setStyleNonce = (nonce: string | undefined): void => {
+  styleNonce = nonce;
+
+  // Update existing style elements if they exist
+  const existingStyleElement = document.getElementById("formbricks__css");
+  if (existingStyleElement && nonce) {
+    existingStyleElement.setAttribute("nonce", nonce);
+  }
+
+  const existingCustomStyleElement = document.getElementById("formbricks__css__custom");
+  if (existingCustomStyleElement && nonce) {
+    existingCustomStyleElement.setAttribute("nonce", nonce);
+  }
+};
+
+export const getStyleNonce = (): string | undefined => {
+  return styleNonce;
+};
+
 export const addStylesToDom = () => {
   if (document.getElementById("formbricks__css") === null) {
     const styleElement = document.createElement("style");
     styleElement.id = "formbricks__css";
+
+    // Apply nonce if available
+    if (styleNonce) {
+      styleElement.setAttribute("nonce", styleNonce);
+    }
+
     styleElement.innerHTML =
       preflight + global + editorCss + datePickerCss + calendarCss + datePickerCustomCss;
     document.head.appendChild(styleElement);
+  } else {
+    // If style element already exists, update its nonce if needed
+    const existingStyleElement = document.getElementById("formbricks__css");
+    if (existingStyleElement && styleNonce && !existingStyleElement.getAttribute("nonce")) {
+      existingStyleElement.setAttribute("nonce", styleNonce);
+    }
   }
 };
 
 export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TSurveyStyling }): void => {
   // Check if the style element already exists
-  let styleElement = document.getElementById("formbricks__css__custom");
+  let styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement | null;
 
-  // If the style element doesn't exist, create it and append to the head
-  if (!styleElement) {
+  // If the style element exists, update nonce if needed
+  if (styleElement) {
+    // Update nonce if it wasn't set before
+    if (styleNonce && !styleElement.getAttribute("nonce")) {
+      styleElement.setAttribute("nonce", styleNonce);
+    }
+  } else {
+    // Create it and append to the head
     styleElement = document.createElement("style");
     styleElement.id = "formbricks__css__custom";
+
+    // Apply nonce if available
+    if (styleNonce) {
+      styleElement.setAttribute("nonce", styleNonce);
+    }
+
     document.head.appendChild(styleElement);
   }
 

packages/types/surveys.d.ts

@@ -7,6 +7,8 @@ declare global {
       renderSurveyModal: (props: SurveyContainerProps) => void;
       renderSurvey: (props: SurveyContainerProps) => void;
       onFilePick: (files: { name: string; type: string; base64: string }[]) => void;
+      setNonce: (nonce: string | undefined) => void;
     };
+    __formbricksNonce?: string;
   }
 }