Description:

To enhance frontend security, implement a strong Content Security Policy (CSP) using react-helmet-async in the React frontend.

This protects the app against XSS, clickjacking, and code injection attacks by restricting trusted sources.

Tasks:

• Integrate react-helmet-async to manage document head and CSP headers
• Define a strict CSP policy (e.g., 'default-src': ["'self'"])
• Avoid 'unsafe-inline' unless absolutely required (and document it if used)
• Remove <meta http-equiv="Content-Security-Policy"> from client app
• Add whitelisted external domains (e.g., fonts, analytics, CDNs, etc.)
• Ensure CSP configuration is environment-agnostic (dev/prod/stage)
• Test application with CSP enabled in all environments
• Validate via browser console: no CSP violations
• Document the CSP configuration and update steps in the project README

Acceptance Criteria:

• react-helmet-async is applied and CSP meta tags are set correctly
• Application loads successfully with no CSP violations in browser console
• All third-party resources are explicitly whitelisted in the CSP
• Inline scripts and styles are avoided where possible
• CSP policy is clearly documented and easy to update