Skip to content

feat: implement security headers (#84) and overhaul UI/UX#115

Open
vikas-6 wants to merge 1 commit into
Dev-Card:mainfrom
vikas-6:main
Open

feat: implement security headers (#84) and overhaul UI/UX#115
vikas-6 wants to merge 1 commit into
Dev-Card:mainfrom
vikas-6:main

Conversation

@vikas-6
Copy link
Copy Markdown

@vikas-6 vikas-6 commented May 16, 2026

Summary

This PR implements mandatory HTTP security headers (CSP, X-Content-Type-Options, Referrer-Policy, etc.) to resolve the security vulnerabilities identified in issue #84. Additionally, it provides a comprehensive UI/UX overhaul, transforming the application into a premium, state-of-the-art developer profile platform using modern design principles like glassmorphism and smooth animations.

Closes #84


Type of Change

  • UI / Design change
  • Security

What Changed

  • apps/backend/src/app.ts: Enabled and hardened helmet middleware with a strict Content-Security-Policy (CSP) that supports Google Fonts while blocking unauthorized injections.
  • apps/web/src/hooks.server.ts: [NEW] Created a SvelteKit server hook to inject critical security headers (X-Frame-Options, Referrer-Policy, etc.) into every web response.
  • apps/web/svelte.config.js: Integrated native SvelteKit CSP configuration for robust frontend protection.
  • apps/web/src/app.css: Completely overhauled the design system with premium tokens, "Outfit" & "Inter" typography, and glassmorphism utilities.
  • apps/web/src/routes/+page.svelte: Redesigned the landing page with a high-impact hero section and modern feature cards.
  • apps/web/src/routes/u/[username]/+page.svelte: Redesigned the profile page with a premium "glass" card, morphing avatar shapes, and entry animations.

How to Test

  1. Start the application locally using pnpm dev.
  2. Visit any profile page (e.g., http://localhost:5173/u/devcard-demo).
  3. Open Browser Developer Tools → Network tab.
  4. Click the main document request and verify the Response Headers:
    • content-security-policy (present and strict)
    • x-content-type-options: nosniff
    • referrer-policy: no-referrer
    • x-frame-options: DENY
  5. Verify that the UI looks correct and Google Fonts load successfully (verifying the CSP whitelist).

Checklist

  • My code follows the project's coding style (pnpm -r run lint passes).
  • TypeScript compiles without errors (pnpm -r run typecheck).
  • I have added or updated tests for the changes I made.
  • All tests pass locally (pnpm -r run test).
  • I have updated documentation where necessary.
  • No new console.log or debug statements left in the code.
  • Breaking changes are documented in this PR description.

Additional Context

During local development, I utilized a temporary SQLite configuration to verify the end-to-end data flow (profiles + headers) without requiring Docker. However, I have reverted the prisma/schema.prisma file to PostgreSQL to ensure full compatibility with the existing project infrastructure before submitting this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Security] Missing HTTP Security Headers and Security Misconfiguration Vulnerabilities

1 participant