Add Content-Security-Policy-Report-Only header

Summary

Add Content-Security-Policy-Report-Only header to blog and wallet apps to monitor potential CSP violations before enforcing the policy.

Background

CSP (Content Security Policy) helps prevent XSS attacks by restricting what resources can load. Before enforcing CSP, we use Report-Only mode to:

  1. Identify what resources would be blocked
  2. Fine-tune the policy without breaking functionality
  3. Ensure compatibility with Hive Keychain and other extensions

Dependencies

Implementation Details

Add CSP-Report-Only header with comprehensive policy covering:

  • script-src - with unsafe-inline for Next.js compatibility, wasm-unsafe-eval for HBAuth
  • style-src - with unsafe-inline for React/Next.js styling
  • img-src - allow HTTPS images and data URIs
  • connect-src - permissive (https:) to support user-defined API endpoints
  • frame-src - whitelist for embedded content (YouTube, Vimeo, Twitter, etc.)
  • worker-src - for HBAuth Web Workers
  • frame-ancestors - prevent clickjacking
  • report-uri - point to /api/csp-report endpoint

Embedded Content Sources (frame-src)

Based on StaticConfig.ts, the following sources need to be allowed:

  • platform.twitter.com (Twitter embeds)
  • www.instagram.com (Instagram embeds)
  • player.vimeo.com (Vimeo videos)
  • www.youtube.com (YouTube videos)
  • w.soundcloud.com (SoundCloud players)
  • player.twitch.tv (Twitch streams)
  • open.spotify.com (Spotify embeds)
  • 3speak.tv, 3speak.online, 3speak.co (3speak videos)
  • openhive.chat (RocketChat integration)

Acceptance Criteria

  • CSP-Report-Only header present on all responses
  • Policy allows all legitimate app functionality
  • Hive Keychain extension works correctly
  • All embedded content types work (YouTube, Twitter, etc.)
  • HBAuth login/signing flows work
  • Violations logged to /api/csp-report endpoint
  • Monitor for 1-2 weeks before enforcing

Testing

Deploy to staging and test:

  • Normal browsing
  • Login with HBAuth
  • Login with Hive Keychain
  • View posts with embedded videos (YouTube, Vimeo, Twitter, etc.)
  • Post creation/editing
  • Check browser console for CSP violations
  • Check logs for CSP reports

Related