fix(web): remove inline style schema allowance for markdown security

[mohamedmastouri-hue]

Fixes #5815b

---

Note

Medium Risk
Touches XSS-sensitive markdown sanitization and applies user-derived strings to backgroundColor; scope is limited to regex-matched color literals and controlled rendering.

Overview
Chat markdown now detects color literals in plain text (hex, rgb/rgba, hsl/hsla) via a new remarkColorSwatches plugin and marks them with a sanitized data-color-swatch attribute on span elements instead of trusting raw HTML style in the document.

The sanitize schema allows only dataColorSwatch on span (alongside existing code data attrs), and a custom span renderer draws a small preview chip whose backgroundColor is set in React from that attribute—so users still see swatches next to the color text without widening rehype-sanitize to permit arbitrary inline styles from markdown.

^{Reviewed by Cursor Bugbot for commit 10b8289. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add inline color swatch rendering for CSS color literals in chat markdown

• A new remarkColorSwatches remark plugin scans markdown text nodes for CSS color literals (hex and functional forms) using COLOR_LITERAL_REGEX and wraps matches in annotated span elements with a data-color-swatch attribute.
• The sanitize schema in ChatMarkdown.tsx is extended to preserve span elements with data-color-swatch through sanitization.
• The ChatMarkdown component renders a small bordered square with the matching backgroundColor before each color literal in chat messages.
• Behavioral Change: inline style attributes are no longer permitted (per the PR title), hardening markdown sanitization while the swatch feature avoids needing them via data-* attributes instead.

^{Macroscope summarized 10b8289.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4069bd02-a455-4140-80d3-da704c4a31a9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 10b8289. Configure here.}

[cursor]

Unvalidated swatch color styling

COLOR_LITERAL_REGEX treats # plus 3, 4, 6, or 8 hex digits as colors in ordinary prose. In this coding chat UI that also matches common issue and PR references such as #123, #5815, and #abcd, so remarkColorSwatches wraps them in swatches and the renderer shows a color chip beside normal ticket mentions.

Additional Locations (2)

• apps/web/src/components/ChatMarkdown.tsx#L147-L148
• apps/web/src/components/ChatMarkdown.tsx#L172-L176

 

^{Reviewed by Cursor Bugbot for commit 10b8289. Configure here.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR adds new color swatch rendering behavior to markdown. An open review comment correctly identifies that the regex will match GitHub issue references (e.g., #123, #5815) as color codes, causing incorrect rendering. This functional bug and the new feature scope warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}