The Content Security Policy (CSP) is causing the website to load blank
The main issue is that the deployed workflow is launching to a blank page in which the CSP is the main culprit. None of the recommended fixes worked so far. Any advice please?
The website is working with 0 errors when I use http://localhost:3000/, but it is still turning blank when I review it through the deployed build in appwrite. I went through a lot of iterations and fixes, even disabled CSP with no luck. All the latest CI/CD workflows were green with full run diagnostics done on vscode that returned all passed. I have two attached screenshots showing one with the localhost working and one with the appwrite.netowrk subdomain displaying black.
You can view the latest deployment it using the following links: https://rate-my-prompt.appwrite.network/
Here's a summary of the latest fixes and status:
Initial Testing Recommendations: Suggested improving API route coverage, adding integration tests for critical flows, and mocking external dependencies for better isolation.
CSP Unification and Minimization: Centralized Content Security Policy (CSP) in middleware.ts, removed duplicates from next.config.js, eliminated inline scripts/styles, and configured a strict policy with wildcard support for *.vercel.app. Externalized JS/CSS files.
Deployment Fixes: Relaxed CSP in production (allowing 'unsafe-inline' for scripts/styles to support Next.js hydration), removed conflicting headers, and fixed Permissions-Policy warnings.
Current Status: Site works locally with 0 errors; production deployments now load without CSP violations, though monitoring for security is recommended.
