fix(frontend): sanitize AI chat markdown before rendering by topher-lo · Pull Request #2229 · TracecatHQ/tracecat

topher-lo · 2026-03-02T21:31:52Z

Problem: AI chat markdown could render unsafe HTML/attributes; DOMPurify caused SSR blank output and hydration mismatches. CSP alone doesn’t prevent dangerous protocols or clickable phishing links.

Solution:

Sanitize during markdown rendering using rehype-sanitize with a safe schema; apply sanitization before KaTeX to preserve math.
Constrain URLs with SAFE_MARKDOWN_LINK_PREFIXES and SAFE_MARKDOWN_IMAGE_PREFIXES via Streamdown.
In Response, spread ...props first, then set allowed*Prefixes and rehypePlugins so callers can’t override sanitization.
Harden CSP (base-uri 'self', script-src-attr 'none').
Remove DOMPurify usage to avoid SSR pitfalls; tests mock ESM rehype plugins in jest.setup.js.

cubic-dev-ai

1 issue found across 6 files

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/lib/sanitize-markdown.ts">

<violation number="1" location="frontend/src/lib/sanitize-markdown.ts:6">
P1: Sanitizing raw markdown with DOMPurify is insufficient; markdown syntax can still produce unsafe links after rendering. Sanitize the rendered HTML (or enforce markdown URL allow-listing) at render time.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

frontend/src/lib/sanitize-markdown.ts

topher-lo · 2026-03-03T03:50:10Z

@cursor review

### Motivation - Prevent HTML/attribute injection in AI-generated chat markdown so user-supplied or LLM-produced HTML cannot render active elements (e.g., `<a>`, `<h1>`, inline `style`) in the chat UI. - Keep full markdown rendering experience while removing dangerous tags/attributes to avoid breaking most markdown and HTML rendering. - Strengthen the browser-side policy to reduce inline-attribute/script attack surface. ### Description - Add a markdown sanitization helper using `DOMPurify` at `frontend/src/lib/sanitize-markdown.ts` and forbid risky attributes (notably `style`) via `FORBID_ATTR`. - Sanitize AI output before rendering by applying `sanitizeMarkdownContent` to streaming assistant text and persisted assistant text in `Messages` (`frontend/src/components/chat/messages.tsx`). - Sanitize children passed into the reusable AI `Response` component (`frontend/src/components/ai-elements/response.tsx`) so other AI surfaces inherit the fix. - Add `dompurify` to frontend dependencies (`frontend/package.json` / `pnpm-lock.yaml`). - Harden frontend CSP headers by adding `base-uri 'self'` and `script-src-attr 'none'` in `frontend/next.config.mjs` to reduce inline/script attribute risk. ### Testing - Ran code style/lint checks: `pnpm --dir frontend exec biome check --write src/components/ai-elements/response.tsx src/components/chat/messages.tsx src/lib/sanitize-markdown.ts` (succeeded). - Ran workspace checks: `pnpm -C frontend check` (succeeded). - Ran TypeScript typecheck: `pnpm -C frontend run typecheck` (succeeded, `tsc` returned no errors). - Installed `dompurify` via `pnpm --dir frontend add dompurify@3.2.6` (succeeded) and updated lockfile. - Attempted local visual validation by running `pnpm -C frontend dev --port 3000` and capturing a Playwright screenshot; Next server started and a browser screenshot artifact was produced, but request rendering returned `500` due to missing required environment variables (`NEXT_PUBLIC_APP_URL`, `NEXT_PUBLIC_API_URL`) in this execution environment, so full end-to-end manual verification could not be completed here.

cubic-dev-ai

1 issue found across 3 files (changes from recent commits).

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/ai-elements/response.tsx">

<violation number="1" location="frontend/src/components/ai-elements/response.tsx:21">
P1: The new safe link/image prefix restrictions are overrideable because `{...props}` is spread after them, allowing callers to bypass the intended markdown URL policy.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

frontend/src/components/ai-elements/response.tsx

### Motivation - Prevent HTML/attribute injection in AI-generated chat markdown so user-supplied or LLM-produced HTML cannot render active elements (e.g., `<a>`, `<h1>`, inline `style`) in the chat UI. - Keep full markdown rendering experience while removing dangerous tags/attributes to avoid breaking most markdown and HTML rendering. - Strengthen the browser-side policy to reduce inline-attribute/script attack surface. ### Description - Add a markdown sanitization helper using `DOMPurify` at `frontend/src/lib/sanitize-markdown.ts` and forbid risky attributes (notably `style`) via `FORBID_ATTR`. - Sanitize AI output before rendering by applying `sanitizeMarkdownContent` to streaming assistant text and persisted assistant text in `Messages` (`frontend/src/components/chat/messages.tsx`). - Sanitize children passed into the reusable AI `Response` component (`frontend/src/components/ai-elements/response.tsx`) so other AI surfaces inherit the fix. - Add `dompurify` to frontend dependencies (`frontend/package.json` / `pnpm-lock.yaml`). - Harden frontend CSP headers by adding `base-uri 'self'` and `script-src-attr 'none'` in `frontend/next.config.mjs` to reduce inline/script attribute risk. ### Testing - Ran code style/lint checks: `pnpm --dir frontend exec biome check --write src/components/ai-elements/response.tsx src/components/chat/messages.tsx src/lib/sanitize-markdown.ts` (succeeded). - Ran workspace checks: `pnpm -C frontend check` (succeeded). - Ran TypeScript typecheck: `pnpm -C frontend run typecheck` (succeeded, `tsc` returned no errors). - Installed `dompurify` via `pnpm --dir frontend add dompurify@3.2.6` (succeeded) and updated lockfile. - Attempted local visual validation by running `pnpm -C frontend dev --port 3000` and capturing a Playwright screenshot; Next server started and a browser screenshot artifact was produced, but request rendering returned `500` due to missing required environment variables (`NEXT_PUBLIC_APP_URL`, `NEXT_PUBLIC_API_URL`) in this execution environment, so full end-to-end manual verification could not be completed here.

topher-lo · 2026-03-03T04:02:32Z

@cursor push fc97b08

cursor · 2026-03-03T04:02:36Z

Could not push Autofix changes. The PR branch has conflicting changes.

cubic-dev-ai

2 issues found across 5 files (changes from recent commits).

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/src/components/ai-elements/response.tsx">

<violation number="1" location="frontend/src/components/ai-elements/response.tsx:27">
P1: `rehypePlugins` can be overridden by `...props`, allowing sanitization to be bypassed. Apply `...props` first and enforce the sanitizing `rehypePlugins` afterward.</violation>
</file>

<file name="frontend/src/lib/sanitize-markdown.ts">

<violation number="1" location="frontend/src/lib/sanitize-markdown.ts:36">
P2: `rehype-sanitize` is applied after `rehype-katex`, which can strip KaTeX output and break math rendering. Sanitize untrusted markdown first, then run `rehype-katex`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

frontend/src/components/ai-elements/response.tsx

frontend/src/lib/sanitize-markdown.ts

cursor · 2026-03-03T04:14:14Z

I validated both issues (identified by cubic) and fixed them.
- In frontend/src/components/ai-elements/response.tsx, I now spread ...props first and then set allowedImagePrefixes, allowedLinkPrefixes, and rehypePlugins afterward so callers cannot override/bypass sanitization.
- In frontend/src/lib/sanitize-markdown.ts, I reordered the rehype plugins to sanitize first and then run KaTeX: [[rehypeSanitize, sanitizeSchema], rehypeKatex]. This avoids KaTeX markup being stripped while still sanitizing untrusted content.
I confirmed we no longer use DOMPurify (so the SSR empty-string issue is moot) and ran project checks:
- pnpm -C frontend check passed
- pnpm -C frontend run typecheck passed

I committed and pushed: fix(frontend): enforce sanitizing rehypePlugins and correct plugin order.

Co-authored-by: Chris Lo <topher-lo@users.noreply.github.com>

…anges Co-authored-by: Chris Lo <topher-lo@users.noreply.github.com>

fix(frontend): sanitize AI chat markdown before rendering

8f65f34

topher-lo added the codex label Mar 2, 2026 — with ChatGPT Codex Connector

cubic-dev-ai bot reviewed Mar 2, 2026

View reviewed changes

frontend/src/lib/sanitize-markdown.ts Outdated Show resolved Hide resolved

This comment was marked as outdated.

Sign in to view

cubic-dev-ai bot reviewed Mar 3, 2026

View reviewed changes

frontend/src/components/ai-elements/response.tsx Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

cubic-dev-ai bot reviewed Mar 3, 2026

View reviewed changes

frontend/src/components/ai-elements/response.tsx Outdated Show resolved Hide resolved

frontend/src/lib/sanitize-markdown.ts Outdated Show resolved Hide resolved

cursoragent and others added 4 commits March 3, 2026 04:18

fix(frontend): enforce sanitizing rehypePlugins and correct plugin order

e4aa08a

Co-authored-by: Chris Lo <topher-lo@users.noreply.github.com>

test(frontend): mock rehype ESM plugins in Jest to fix parse error

18a7a88

Co-authored-by: Chris Lo <topher-lo@users.noreply.github.com>

style(tests): conform rehype mocks to Biome formatting

28598f4

Co-authored-by: Chris Lo <topher-lo@users.noreply.github.com>

test(frontend): inline rehype plugin mocks in jest.setup to reduce ch…

42ac368

…anges Co-authored-by: Chris Lo <topher-lo@users.noreply.github.com>

topher-lo merged commit bf14937 into main Mar 3, 2026
12 checks passed

topher-lo deleted the codex/fix-html-injection-vulnerability-in-chat-hwfwbm branch March 3, 2026 04:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(frontend): sanitize AI chat markdown before rendering#2229

fix(frontend): sanitize AI chat markdown before rendering#2229
topher-lo merged 7 commits intomainfrom
codex/fix-html-injection-vulnerability-in-chat-hwfwbm

topher-lo commented Mar 2, 2026 •

edited

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

topher-lo commented Mar 3, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

topher-lo commented Mar 3, 2026

Uh oh!

cursor bot commented Mar 3, 2026

Uh oh!

This comment has been minimized.

cubic-dev-ai bot left a comment

Uh oh!

Uh oh!

Uh oh!

cursor bot commented Mar 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

topher-lo commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

topher-lo commented Mar 3, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

topher-lo commented Mar 3, 2026

Uh oh!

cursor bot commented Mar 3, 2026

Uh oh!

This comment has been minimized.

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

topher-lo commented Mar 2, 2026 •

edited

Loading

cursor bot commented Mar 3, 2026 •

edited

Loading