When i opened the firebase studio, the prototyper UI, including the chat box did try to open for a fraction of second, but it disappeared immediately, leaving a blank page. I can switch to code successfully, but the prototyper UI is still broken. F12 seems to claim for a “Security Error”, but i can’t understand it as a vibe coder. Is it possible to solve it if i have given the console log?
Solved: Content Security Policy is likely configured in your Next.js application’s next.config.ts file.
Let’s examine your next.config.ts to find the CSP configuration.
Okay, I have the content of your next.config.ts.
Looking at the headers() function, I see the Content-Security-Policy directive array. The problematic line is indeed:
“frame-ancestors ‘none’”, // Prevents clickjacking
typescript
This directive explicitly prevents your application from being framed by any origin, including the Firebase Studio environment that’s trying to embed it.
To fix this, we need to modify the frame-ancestors directive to allow the Firebase Studio origin to frame your application. The origin that’s trying to frame your application is likely the one where the Firebase Studio UI is running. Based on your previous logs and the URL in the error message, it might be related to *.cloudworkstations.dev or a specific origin provided by Firebase Studio.