core: implement CSP headers and security hardening

[EmeditWeb]

Problem

The web app has no Content Security Policy headers.
It is vulnerable to XSS and clickjacking.

What To Build

1. Add security headers via vercel.json (CSP, XFO, etc)
2. Sanitize all user-generated content with DOMPurify
3. HTTPS enforcement
4. Audit localStorage usage
5. Subresource Integrity for CDN assets

Files To Touch

• vercel.json
• src/services/api.ts
• Any components rendering user content

Acceptance Criteria

• CSP headers present in production
• No XSS vectors in user content rendering
• HTTPS enforced
• npm run build passes

Mandatory Checks Before PR

• npm run build passes
• Security headers verified in browser devtools
• PR references this issue

[teeschima]

I'd like to work on this security enhancement task.

I have experience with React, TypeScript, Vercel deployments, web security best practices, and frontend architecture. Based on the requirements, my implementation plan would be:

Configure security headers in vercel.json:
Content Security Policy (CSP)
X-Frame-Options
X-Content-Type-Options
Referrer-Policy
Permissions-Policy
Review all user-generated content rendering and sanitize it using DOMPurify.
Enforce HTTPS and secure redirects.
Audit localStorage usage and remove any sensitive data storage.
Add Subresource Integrity (SRI) for external CDN assets where applicable.
Verify all headers in browser DevTools.
Ensure npm run build passes before submitting the PR.

I can provide clean commits, documentation of the security changes, and testing evidence.

Looking forward to contributing.

[grantfox-oss]

🦊 GrantFox — @teeschima has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #27)
2. Your PR will be reviewed by the StepFi-app maintainers

Good luck! Track your progress on GrantFox.