Hey all, after spending hours trying to solve the same issue getting a 401 with the error “… in a frame because it set X-Frame-Options to deny.” I would like to share what worked for me.
Even after adding the frame-ancestors CSP header to my Next.js 14.2.7 app allowing https://builder.io I wasn’t able to render the page through the builder.io editor iframe and was getting still the same error.
What helped in the end (additionally to the CPS header) was implementing a " Protection Bypass for Automation" in the Vercel Project “Deployment protection” settings. This allows a request being sent to the application to bypass the Vercel authorization (which seems to be problematic through iframes) as well as the iframe protection. Have a look here for information on how to implement.
For me it was enough to add the bypass token as a query param to the preview URL in the builder.io editor.
Here are some other things that might be confusing when thrown together with the iframe issue:
- Publishing the page can take a couple of minutes to an hour even so try to stick to one page path when working in the issue to isolate it
- I was having issues with using the root path
/for my page, so that might be another factor
TLDR: Try to use both the frame-ancestors CSP header as well as a Protection Bypass for Automation to be able to make requests to your Next.js app using an iframe