Skip to content

fix(security): replace dangerouslySetInnerHTML with safe React rendering in ChartStyle#548

Open
danieloche635-bit wants to merge 3 commits into
MettaChain:mainfrom
danieloche635-bit:fix/439-chart-dangerouslySetInnerHTML
Open

fix(security): replace dangerouslySetInnerHTML with safe React rendering in ChartStyle#548
danieloche635-bit wants to merge 3 commits into
MettaChain:mainfrom
danieloche635-bit:fix/439-chart-dangerouslySetInnerHTML

Conversation

@danieloche635-bit

Copy link
Copy Markdown

Summary (P1)

\ChartStyle\ component used \dangerouslySetInnerHTML\ to inject CSS with color values from the chart config, creating a potential XSS vector if config values ever accept external input.

Changes

  • Replaced \dangerouslySetInnerHTML\ with React's built-in text node rendering (<style>{cssContent}</style>)
  • CSS content is automatically HTML-escaped by React when rendered as text children
  • Added filtering of empty CSS rules to prevent rendering empty <style>\ tags
  • Maintains identical CSS output for all valid chart configs

Security

React's JSX text content is always escaped, preventing HTML injection even if config values contain malicious strings. This is fundamentally safer than \dangerouslySetInnerHTML\ which bypasses React's escaping entirely.

Closes #439

- Replace localStorage plaintext UUID storage with salted hash
- Add per-session salt stored in sessionStorage
- Add synchronous hash function for device identity
- Update tests to verify hashed storage behavior

Closes MettaChain#448
- Add /api/security/address-check Next.js API route to proxy Chainalysis requests
- Remove API key exposure from browser via window global (__CHAINALYSIS_API_KEY__)
- Move API key to server-only CHAINALYSIS_API_KEY env variable
- Add security:check-globals npm script to prevent future __ global leaks
- Update tests to verify proxy endpoint usage

Closes MettaChain#442
…ing in ChartStyle

- Remove dangerouslySetInnerHTML usage in chart.tsx ChartStyle component
- Use React's built-in text content escaping via JSX children
- Filter empty CSS rules to prevent rendering empty style tags
- CSS content is automatically HTML-escaped by React's text node rendering

Closes MettaChain#439
@drips-wave

drips-wave Bot commented Jun 27, 2026

Copy link
Copy Markdown

@danieloche635-bit Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

security: chart.tsx uses dangerouslySetInnerHTML for SVG payload

2 participants