Harden highlightSearch against stored XSS and remove unsafe HTML rendering in rule builders

console/pnpm-workspace.yaml

@@ -1,3 +1,6 @@
+allowBuilds:
+  '@clerk/shared': set this to true or false
+  esbuild: set this to true or false
 onlyBuiltDependencies:
   - '@clerk/shared'
   - esbuild

console/src/lib/ui-utils.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react"
+import { highlightSearch } from "./ui-utils"
+
+describe("highlightSearch", () => {
+    it("highlights all exact matches with strong tags", () => {
+        render(<div>{highlightSearch("foo foo", "foo")}</div>)
+
+        expect(screen.getAllByText("foo", { selector: "strong" })).toHaveLength(2)
+    })
+
+    it("does not render HTML from untrusted input", () => {
+        const payload = `<img src="x" onerror="alert(1)">`
+        const { container } = render(<div>{highlightSearch(payload, "img")}</div>)
+
+        expect(container.querySelector("img")).toBeNull()
+        expect(screen.getByText("img", { selector: "strong" })).toBeInTheDocument()
+        expect(container).toHaveTextContent(payload)
+    })
+
+    it("returns plain text when search is empty", () => {
+        const { container } = render(<div>{highlightSearch("plain text", "")}</div>)
+
+        expect(screen.getByText("plain text")).toBeInTheDocument()
+        expect(container.querySelector("strong")).toBeNull()
+    })
+})

console/src/lib/ui-utils.tsx

@@ -1,4 +1,4 @@
-import type { Key } from "react"
+import type { Key, ReactNode } from "react"
 import { useState } from "react"
 import type { Modifier } from "react-popper"
 import { usePopper } from "react-popper"
@@ -61,10 +61,27 @@ export const defaultGetOptionDisplay = (option: unknown) =>
         ? ((option as Record<string, unknown>).label ?? (option as Record<string, unknown>).name)
         : option) as string
 
-export const highlightSearch = (text: string, search: string, matchClassName = "match") =>
-    text && search
-        ? text.replaceAll(search, `<strong class="${matchClassName}">$&</strong>`)
-        : (text ?? "")
+export const highlightSearch = (
+    text: string,
+    search: string,
+    matchClassName = "match",
+): ReactNode => {
+    if (!text || !search) return text ?? ""
+
+    const parts = text.split(search)
+    if (parts.length === 1) return text
+
+    return parts.flatMap((part, index) =>
+        index < parts.length - 1
+            ? [
+                  part,
+                  <strong key={`${matchClassName}-${index}`} className={matchClassName}>
+                      {search}
+                  </strong>,
+              ]
+            : [part],
+    )
+}
 
 /**
  * Navigate from inside a Radix-based overlay (Sheet, Dialog, DropdownMenu).

console/src/views/users/rules/FilterRuleEdit.tsx

@@ -123,13 +123,7 @@ export default function FilterRuleEdit({
                         required
                         inputClassName="rounded-none border-l-0"
                         buttonClassName="rounded-none"
-                        renderOption={(option, search) => (
-                            <span
-                                dangerouslySetInnerHTML={{
-                                    __html: highlightSearch(option.path, search),
-                                }}
-                            />
-                        )}
+                        renderOption={(option, search) => highlightSearch(option.path, search)}
                     />
                 </div>
                 <div className="flex items-center">

console/src/views/users/rules/JourneyRuleEdit.tsx

@@ -103,13 +103,7 @@ export default function JourneyRuleEdit({
                         required
                         inputClassName="rounded-none border-l-0"
                         buttonClassName="rounded-none"
-                        renderOption={(option, search) => (
-                            <span
-                                dangerouslySetInnerHTML={{
-                                    __html: highlightSearch(option.path, search),
-                                }}
-                            />
-                        )}
+                        renderOption={(option, search) => highlightSearch(option.path, search)}
                     />
                 </div>
                 <div className="flex items-center">

console/src/views/users/rules/MemberConditionEdit.tsx

@@ -113,13 +113,9 @@ export default function MemberConditionEdit({
                     required
                     inputClassName="rounded-none border-l-0"
                     buttonClassName="rounded-none"
-                    renderOption={(option, search) => (
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: highlightSearch(option.name || option.path, search),
-                            }}
-                        />
-                    )}
+                    renderOption={(option, search) =>
+                        highlightSearch(option.name || option.path, search)
+                    }
                 />
                 <Select
                     value={rule?.operator}

console/src/views/users/rules/RuleEventName.tsx

@@ -51,13 +51,7 @@ export default function RuleEventName<T extends Rule>({
             ariaLabel="Event name"
             inputAriaLabel="Event name"
             required
-            renderOption={(option, search) => (
-                <span
-                    dangerouslySetInnerHTML={{
-                        __html: highlightSearch(option.name, search),
-                    }}
-                />
-            )}
+            renderOption={(option, search) => highlightSearch(option.name, search)}
         />
     )
 }

console/src/views/users/rules/RuleOrganizationEventName.tsx

@@ -41,13 +41,7 @@ export default function RuleOrganizationEventName({
             ariaLabel="Organization event name"
             inputAriaLabel="Organization event name"
             required
-            renderOption={(option, search) => (
-                <span
-                    dangerouslySetInnerHTML={{
-                        __html: highlightSearch(option.name, search),
-                    }}
-                />
-            )}
+            renderOption={(option, search) => highlightSearch(option.name, search)}
         />
     )
 }