Fix Critical Security Issues: HTML Sanitization & Configuration Management

[pranavkonde]

Fix Critical Security Issues: HTML Sanitization & Configuration Management

Description: While reviewing our codebase, I found several security concerns that need immediate attention:

Issues:

1. Unsafe HTML Content

   • NewsBar.jsx uses raw dangerouslySetInnerHTML without sanitization
   • This leaves us vulnerable to XSS attacks

   // Current risky code
   <p dangerouslySetInnerHTML={{ __html: disclaimerText }}></p>

2. Google Analytics Implementation

   • Analytics script is hardcoded in Metadata.jsx
   • No error handling or loading fallback
   • Makes it hard to manage across environments

3. Hardcoded Configuration

   • API endpoints and sensitive values are scattered throughout the code
   • No proper environment variable management

Proposed Fix:

1. Add DOMPurify for HTML sanitization:

   npm install dompurify

2. Move analytics to a dedicated service and add proper error handling

3. Set up environment configs:

   .env.example
   .env.development
   .env.production
   

Todo:

• Install and implement DOMPurify
• Create analytics service
• Set up environment configuration
• Add basic tests
• Create Documentation and add it into it

Impact:

These changes will significantly improve our app's security and make it easier to maintain.