Add nonce-based CSP for inline scripts security

[MBombeck]

Summary

Implement Content Security Policy (CSP) nonce-based protection for inline scripts to improve security posture while maintaining functionality across development and production environments.

Key Changes

• Middleware (src/middleware.ts):

  • Generate a cryptographically random nonce on each request using crypto.randomUUID()
  • Include the nonce in CSP headers for script-src directive
  • Pass the nonce to the client via x-nonce response header
  • Update CSP to use nonce instead of 'unsafe-inline' for scripts in production

• Root Layout (src/app/layout.tsx):

  • Convert RootLayout to an async component to retrieve the nonce from request headers
  • Apply the nonce to the theme initialization inline script via the nonce attribute
  • Maintain development flexibility with 'unsafe-eval' and 'unsafe-inline' fallbacks

Implementation Details

• The nonce is generated in middleware and passed through response headers, then retrieved in the layout component
• Development mode retains 'unsafe-eval' and 'unsafe-inline' for better DX while still using nonce
• Production mode enforces strict CSP with only 'self' and nonce-based inline scripts
• This approach prevents XSS attacks while allowing the theme script to execute without blocking

https://claude.ai/code/session_016LHzTP2v77wWbFThQVnCgW