Skip to content

Conversation

@KJ7LNW
Copy link
Contributor

@KJ7LNW KJ7LNW commented Jun 26, 2025

This PR addresses a cross-site scripting (XSS) vulnerability in the CodeBlock component identified by CodeQL.

Context

The CodeBlock component was using dangerouslySetInnerHTML to render syntax-highlighted code from Shiki, which posed a security risk.

Implementation

The fix replaces dangerouslySetInnerHTML with a safer approach using codeToHast and direct React element rendering:

  1. Added hast-util-to-jsx-runtime dependency
  2. Modified the syntax highlighting logic to use codeToHast instead of codeToHtml
  3. Updated the MemoizedCodeContent component to render React elements directly
  4. Changed the state type from string to React.ReactNode

Security Considerations

  • Eliminates potential for HTML injection attacks
  • Maintains all syntax highlighting capabilities
  • Preserves exact visual output

Performance Considerations

  • Direct React element creation is more efficient than HTML parsing
  • No browser HTML parsing overhead
  • Memoization pattern preserved for optimal rendering

How to Test

  1. Open any code sample in the chat
  2. Verify syntax highlighting works correctly
  3. Test word wrap and collapse functionality
  4. Ensure copy code functionality works

This issue was discovered as part of security review #3785.

Fixes #5156


Important

Fixes XSS vulnerability in CodeBlock by replacing dangerouslySetInnerHTML with hast-util-to-jsx-runtime for safer rendering.

  • Security Fix:
    • Replaces dangerouslySetInnerHTML with hast-util-to-jsx-runtime in CodeBlock.tsx to prevent XSS.
    • Updates highlightedCode state type from string to React.ReactNode.
  • Dependencies:
    • Adds hast-util-to-jsx-runtime to package.json.
  • Rendering:
    • Uses codeToHast for syntax highlighting instead of codeToHtml.
    • MemoizedCodeContent now renders React elements directly.

This description was created by Ellipsis for e1fc1aa. You can customize this summary. It will automatically update as commits are pushed.

Replace dangerouslySetInnerHTML with safer codeToHast approach to render
syntax-highlighted code from Shiki. This eliminates the cross-site scripting
vulnerability while maintaining identical rendering output and performance.

Security considerations:
- Eliminates potential for HTML injection attacks
- Maintains all syntax highlighting capabilities
- Preserves exact visual output

Performance considerations:
- Direct React element creation is more efficient than HTML parsing
- No browser HTML parsing overhead
- Memoization pattern preserved for optimal rendering

This issue was discovered as part of security review #3785.

Fixes: #5156
Signed-off-by: Eric Wheeler <[email protected]>
Updated the CodeBlock test mock to support the new codeToHast method that was implemented to fix the XSS vulnerability by replacing dangerouslySetInnerHTML with direct React element rendering.

Signed-off-by: Eric Wheeler <[email protected]>
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Jun 26, 2025
- Replace HTML string fallback with React elements to prevent potential XSS
- Add error handling for toJsxRuntime conversion with proper fallback
- Add explanatory comment about why hast-util-to-jsx-runtime was chosen
- Improve test mock to handle transformers and be more comprehensive
Copy link
Member

@daniel-lxs daniel-lxs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @KJ7LNW!

We also have other instances of dangerouslySetInnerHTML that we can remove using a similar approach to this PR.

LGTM

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jun 27, 2025
@daniel-lxs daniel-lxs moved this from PR [Needs Prelim Review] to PR [Needs Review] in Roo Code Roadmap Jun 27, 2025
@mrubens mrubens merged commit c58b963 into RooCodeInc:main Jun 27, 2025
17 checks passed
@github-project-automation github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Jun 27, 2025
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Jun 27, 2025
hannesrudolph pushed a commit that referenced this pull request Jul 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer PR - Needs Review size:M This PR changes 30-99 lines, ignoring generated files.

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

fix: XSS vulnerability in CodeBlock component

4 participants