Replace `dangerouslySetInnerHTML` CSS Injection with a Safer Styling Approach

[arpit2006]

Type

Security

Severity

Medium

Location

frontend/src/app/components/ui/chart.tsx (around line 83)

Description

The ChartStyle component uses React's dangerouslySetInnerHTML to inject dynamically generated CSS into a <style> element.

Although the current CSS is derived from internal configuration values, constructing and injecting raw HTML or CSS through string interpolation is an unsafe pattern. If any portion of the injected content were to become influenced by user-controlled input in the future (for example, through dynamic themes, configuration files, or external data), it could introduce a Cross-Site Scripting (XSS) vulnerability or other unintended style injection issues.

Using dangerouslySetInnerHTML also makes future security reviews more difficult, as it bypasses React's built-in protections against unsafe DOM injection.

---

User Impact

• Introduces a potential XSS attack surface if data sources change in the future.
• Increases long-term maintenance and security risk.
• Makes security auditing more difficult due to reliance on raw HTML injection.
• Violates the principle of minimizing unsafe DOM manipulation.

---

Steps to Reproduce

1. Review the ChartStyle component.
2. Locate the use of dangerouslySetInnerHTML to generate a <style> element.
3. Observe that CSS is injected via string interpolation instead of using React's safer styling mechanisms.

---

Expected Behavior

Dynamic styling should be applied using React-supported approaches that avoid raw HTML injection, such as inline style objects, CSS variables, or a CSS-in-JS solution.

---

Current Behavior

• CSS is injected into a <style> element using dangerouslySetInnerHTML.
• Styling depends on dynamically generated strings rather than React-managed styling APIs.

---

Recommended Fix

Refactor the component to eliminate the use of dangerouslySetInnerHTML for CSS generation.

Possible approaches include:

• Apply dynamic values through React style props.
• Use CSS custom properties (CSS variables) on the parent container.
• Leverage a CSS-in-JS library or other framework-supported styling solution.
• Ensure any dynamic styling values are validated and escaped where appropriate.

---

Acceptance Criteria

• dangerouslySetInnerHTML is removed from the ChartStyle component.
• Dynamic styling is implemented using a safer React-supported approach.
• Existing chart appearance and theming remain unchanged.
• Dynamic theme or configuration values continue to work as expected.
• Security review confirms no raw HTML or CSS injection is required.
• No visual regressions are introduced.

---

Definition of Done

• Unsafe HTML injection removed.
• Dynamic styling migrated to a secure implementation.
• Chart rendering verified across supported themes.
• Security review completed.
• Regression testing confirms no changes in chart behavior or appearance.

[github-actions]

👋 Welcome @arpit2006!

Thank you for opening an issue and contributing to Patchpilot. 🚀

Next Steps

• Please ensure you've provided all the required details.
• A maintainer will review your issue shortly.
• Feel free to ask questions if anything is unclear.

⚡ Want faster assignment and quicker responses?

Join our Discord community:

🔗 https://discord.gg/FcXuyw2Rs

We actively discuss issues, features, roadmap updates, and contributor support there.

Happy Contributing! 🎉

[MamidiDhana]

Hi @ionfwsrijan ,
I would like to work on this issue under SSoC'26.
I can replace the current dangerouslySetInnerHTML implementation with a safer React-supported styling approach while preserving the existing chart appearance and functionality.
Kindly assign this issue to me. Thank you!

[ionfwsrijan]

@MamidiDhana Pls don't spam for issues

[MamidiDhana]

Hi @ionfwsrijan,
I understand your concern. However, my intention was not to spam. I reviewed each issue individually and commented only on the ones I was genuinely interested in contributing to under SSoC'26.
If commenting on multiple issues in a short period caused any inconvenience, I apologize. I'll be more selective with future assignment requests.
Thank you.

[ionfwsrijan]

@MamidiDhana As per our policies we provide equal opportunity to every contributor so you're allowed to work on only one issue at a time

[MamidiDhana]

Hi @ionfwsrijan,
Thank you for the clarification. I wasn't aware of the one-issue-at-a-time policy, and it wasn't my intention to request multiple assignments against the repository guidelines.
I'll follow the policy going forward. Thank you for letting me know.

[Tirthpanchori]

hey @ionfwsrijan @arpit2006 can you please assign this issue to me. I've worked with CSS a lot, i would highly appreciate if you assign this issue to me. Thank you!