🐛 [Bug report]: Fix XSS Vulnerabilities in dangerouslySetInnerHTML Usage

[Suvam-paul145]

Contributor Guidelines

• I have read the guidelines and discussion

Descrcibe the bug?

Multiple components use dangerouslySetInnerHTML or direct .innerHTML assignment to render content without sanitization. The project already has dompurify as a dependency but it's not used in these files. This creates cross-site scripting (XSS) attack vectors where malicious scripts could be injected.

Steps to reproduce the bug?

#Affected files

• src/plays/markdown-editor/Output.jsx:7 — renders user-generated markdown without sanitization
• src/plays/fun-quiz/QuizScreen.jsx:152,160 — renders quiz content unsanitized
• src/plays/fun-quiz/EndScreen.jsx:18,23,28 — renders end screen content unsanitized
• src/plays/text-to-speech/TextToSpeech.jsx:163 — renders user text unsanitized
• src/plays/devblog/Pages/Article.jsx:53 — renders article content unsanitized
• src/common/badges-dashboard/BadgeDetails.jsx:12 — renders badge HTML unsanitized
• src/common/Testimonial/TestimonialCard.jsx:59 — renders testimonial unsanitized
• src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js:26 — direct .innerHTML DOM manipulation

What needs to be done:

• Wrap all dangerouslySetInnerHTML content with DOMPurify.sanitize() before rendering
• Replace direct .innerHTML assignments with React-safe alternatives or sanitized content
• Add ESLint rule react/no-danger as a warning to catch future occurrences
• Create a shared utility function (e.g., sanitizeHTML()) in src/common/utils/ for consistency

Expected behavior

• All user-generated or dynamic HTML content should be sanitized before rendering to prevent XSS attacks.
• Components must use DOMPurify.sanitize() whenever dangerouslySetInnerHTML is required.
• Direct .innerHTML DOM manipulation should be avoided or replaced with sanitized and React-safe rendering methods.
• A shared utility function (e.g., sanitizeHTML()) should be used across the project to ensure consistent sanitization.
• ESLint should warn developers about unsafe HTML rendering using the react/no-danger rule.
• The application should safely display markdown, quiz content, articles, testimonials, badges, and user text without executing malicious scripts.

Desktop (Please provide your system information)

Windows

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

No response

Relevant log output

No response

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue
• I am a Hacktoberfest contributor

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Hey! contributor, thank you for opening an Issue 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[Suvam-paul145]

Please assign me this issue and apertre 3.0, add medium label