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 Vercel. 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 Vercel.app subdomain displaying black.



You can view the latest deployment it using the following links:

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.

Did you find a solution? The site seems to be working now

Hi Amy,

Yes! At last, I managed to fix it. The main issue with not adding CSP Enable policy the to env.local file. That made the most difference. Thank you for reaching out.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.