[SECURITY] Component registry renders HTML via dangerouslySetInnerHTML without sanitization enabling XSS

[anshul23102]

Description

Several card components in src/components/cards/ render content from src/data/ registry entries using dangerouslySetInnerHTML. If a registry entry (contributed via PR) contains a <script> tag or an event handler attribute such as onerror, the browser executes the injected script in the context of the page.

Steps to Reproduce

1. Add an activity entry in src/data/activities/ with a description field containing:
   "<img src=x onerror=alert(document.cookie)>".
2. Open the Activities page.
3. Observe the alert fires, confirming XSS.

Root Cause

dangerouslySetInnerHTML={{ __html: activity.description }} is used without first sanitizing the HTML string through a library like DOMPurify.

Impact

Stored XSS via the data registry. Any PR that modifies data files could inject malicious scripts executed for all site visitors.

Proposed Fix

import DOMPurify from "dompurify";

<div
  dangerouslySetInnerHTML={{
    __html: DOMPurify.sanitize(activity.description),
  }}
/>

Install: npm install dompurify @types/dompurify

[anshul23102]

@singhtrivendra Hi! I came across this issue and I would love to work on it as part of GSSoC '26.

I have reviewed the problem description carefully and am confident I can deliver a well-tested, production-ready fix within the contribution timeline. Please let me know if you need any additional context or have specific implementation preferences before I get started.

Could you please assign this issue to me?

/assign
/claim