feat(arc): feat(security): implement CSP in Angular frontend

[piyushsinghgaur1]

Description

This PR enhances the security of the Angular frontend by dynamically injecting a Content Security Policy (CSP) using a custom CspService. Instead of hardcoding the CSP in index.html, this service programmatically creates and inserts a <meta http-equiv="Content-Security-Policy"> tag at runtime.

Key Highlights:

• Created CspService to dynamically insert CSP meta tag into the document head
• Defined a restrictive CSP (default-src 'self') to block untrusted content
• Whitelisted trusted domains for scripts, styles, images, fonts, and connections
• Prevented usage of unsafe inline scripts and eval
• Verified CSP enforcement via browser developer tools

Why This Matters:
By dynamically managing CSP, we maintain greater flexibility (e.g., environment-specific policies), and ensure stronger defense against XSS, code injection, and content spoofing attacks.

Fixes: #124

Type of change

• New feature (non-breaking change which adds functionality)

Checklist:

• Performed a self-review of my own code
• Code conforms with the style guide

---

[rohit-sourcefuse]

@piyushsinghgaur1 I have made the changes mentioned below in this commit. 00bc312 :

Summary of Changes

1. CSP Configuration in Environment Files

   • Replaced all [true] values with ["'self'"] in both environment.ts and environment.prod.ts for all CSP directives.
   • This makes the configuration more readable and directly aligned with CSP standards (e.g., defaultSrc: ["'self'"] instead of defaultSrc: [true]).

2. CSP Service Logic Simplified

   • Removed the logic in CspService that mapped true to 'self'. The service now expects the CSP config to use the standard string 'self'.
   • The service still supports dynamic values via the env: prefix (e.g., connectSrc: ["'self'", "env:baseApiUrl"]).

3. Meta Tag Handling

   • The service updates the existing <meta http-equiv="Content-Security-Policy"> tag if present, or creates it if not, ensuring only one CSP meta tag is present in the document head.

4. Development Logging

   • In development mode, the applied CSP string is logged to the console for easier debugging.

5. Documentation & Comments

   • Added comments in the service to clarify the limitations of using meta tags for CSP and to recommend using HTTP headers for production deployments.

6. Provider Cleanup

   • Removed a duplicate APP_INITIALIZER provider for the CSP service in app.module.ts.

---

Why These Changes?

• Clarity: Using ["'self'"] is much more readable and standard for anyone familiar with CSP.
• Maintainability: The service logic is now simpler and easier to maintain.
• Best Practices: The code now better reflects CSP best practices and is easier for new developers to understand and extend.
• Developer Experience: Logging and comments help with debugging and onboarding.

---

Next Steps / Recommendations

• For maximum security, set CSP via HTTP headers on your web server in production, as meta tags are less secure and not all directives are supported.
• If you need to allow additional sources (e.g., fonts, APIs), add them explicitly in the environment config as strings.

---

Example CSP config after changes:

csp: {
  defaultSrc: ["'self'"],
  scriptSrc: ["'self'"],
  styleSrc: ["'self'", "'unsafe-inline'"],
  imgSrc: ["'self'"],
  connectSrc: ["'self'", 'env:baseApiUrl'],
  objectSrc: ['none'],
  baseUri: ["'self'"],
  formAction: ["'self'"],
  blockAllMixedContent: true,
}