[TASK] Implement Content-Security-Policy (CSP): report-only → enforce

[smcnab1]

Task Description

Add CSP with sensible defaults and nonces/hashes; collect violations, iterate, then enforce without breakage.

Acceptance Criteria

• CSP present in report-only with low/no violations
• CSP enforced without functional regressions
• Policy documented and versioned

Related Issues / PRs

No response

[smcnab1]

1. Monitor Violations (1-2 weeks)

• Visit /admin/csp in the app to see the violation dashboard
• Check for any blocked resources or scripts
• Look for patterns in the violation reports

2. Adjust Allowlists if Needed

• If you see legitimate violations, update config/security/csp.allowlist.ts
• Add any missing domains that your app legitimately needs
• Re-deploy after making changes

3. Switch to Enforcement Mode

Once violations are minimal (after 1-2 weeks):

# Set environment variable in Vercel/production
CSP_MODE=enforce

🔧 Configuration Commands

You can also use these npm scripts locally:

# Switch to Report-Only mode (default)
npm run csp:mode:report

# Switch to Enforce mode (when ready)
npm run csp:mode:enforce

📊 What to Watch For

In the admin dashboard (/admin/csp), look for:

• High violation counts - indicates missing allowlist entries
• Blocked URIs - domains that need to be added to allowlists
• Script/style violations - inline code that needs nonces

🛡️ Security Benefits You'll Get

• XSS Protection: Prevents malicious script injection
• Data Exfiltration Prevention: Blocks unauthorized data transmission
• Clickjacking Protection: Prevents iframe embedding attacks
• Real-time Monitoring: Dashboard shows security posture

⚠️ Important Notes

• No Breaking Changes: Report-Only mode won't break anything
• Gradual Rollout: Start with reporting, then enforce when ready
• Easy Rollback: Can switch back to Report-Only anytime via environment variable