feat: Add Content-Security-Policy-Report-Only header
Summary
Add Content-Security-Policy in Report-Only mode to monitor potential violations before enforcing the policy.
Closes #781 (closed)
Dependencies
This MR depends on:
- MR !779 (merged) - Add security response headers
- MR !780 (merged) - Add CSP violation report endpoint
Details
The CSP policy includes:
| Directive | Value | Reason |
|---|---|---|
| default-src | 'self' | Fallback for unspecified resources |
| script-src | 'self' 'unsafe-inline' 'wasm-unsafe-eval' | Next.js requires inline, HBAuth needs WASM |
| style-src | 'self' 'unsafe-inline' | React/Next.js styling |
| img-src | 'self' https: data: blob: | Allow HTTPS images and data URIs |
| connect-src | 'self' https: | Permissive for user-defined API endpoints |
| frame-src | Whitelist | Twitter, YouTube, Vimeo, etc. embeds |
| worker-src | 'self' blob: | HBAuth Web Workers |
| frame-ancestors | 'self' | Clickjacking protection |
Blog has additional frame-src entries for embedded content.
Important Notes
- This is Report-Only mode - violations are logged but not blocked
- Monitor violations for 1-2 weeks before switching to enforcing mode
- Violations are reported to
/api/csp-reportendpoint
Files Changed
-
apps/blog/next.config.js- added CSP Report-Only header -
apps/wallet/next.config.js- added CSP Report-Only header
Test Plan
- Deploy to staging
-
Verify CSP-Report-Only header present with
curl -I - Test all embedded content types (YouTube, Twitter, Vimeo, etc.)
- Test HBAuth login flow
- Test Hive Keychain login flow
- Monitor browser console for CSP violations
- Monitor /api/csp-report logs
- Verify no functionality is broken