Iframe not loading in Visual Editor when using Vercel Preview Deployment url

Technical Questions
1

Builder content link

Builder public api key
f7525ed44d54419a91ab4f30a89d09a6

What are you trying to accomplish
I want to load a page on the Visual Editor but when I use a URL from Vercel Preview Deployment, the iframe doesn’t load. I tried using the Chrome Extension, using vercelPreview: true and setting nextjs headers to allow builder.io.
Here’s the error I am getting:
Refused to display ‘https://vercel.com/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.

Screenshots or video link
Video Link

Code stack you are integrating Builder with
NextJS

Reproducible code example

  const content = await builder
    // Get the page content from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/builder/" + (props?.params?.page?.join("/") || "")
      },
      options: {
        vercelPreview: true
      },
      // Set prerender to false to return JSON instead of HTML
      prerender: false
    })
    // Convert the result to a promise
    .toPromise();
2

Hey @elisamartins I tested my vercel preview on your space. It worked fine.
Could you test the following code for the integration:

const page = await builder.get('vercel', {
    userAttributes: {
      urlPath: '/' + (params?.page?.join('/') || ''),
    }
  })
  .toPromise() || null
3

Hello Scheema, thanks a lot for the reply ! I am still getting the same error. Do you have any special configuration for your Vercel environment ? I tried setting the X-Frame-Options headers in my next.config.js file like but it doesn’t work.

async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "X-Frame-Options",
            value: "ALLOWALL"
          },
        ]
      }
    ];
  },
4

Could you please share your Builder content entry link with me?

5

I’m not sure what you mean. Is it this link: Builder.io: Visual Development Platform

6

Could you try with the below configuration and let me know how it goes?

async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          // this will allow site to be framed under builder.io for wysiwyg editing
          {
            key: 'Content-Security-Policy',
            value: 'frame-ancestors https://*.builder.io https://builder.io',
          },
        ],
      },
    ]
  },
7

Hi Scheema, unfortunately I am still getting the error “Refused to display ‘https://vercel.com/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.”

8

Hey @elisamartins I can see the issue is still not resolved. Please try to set X-Frame-Options header with the value ALLOW-FROM https://builder.io. Could you please install the Builder chrome extension and check whether you have the access to builder Component. If you have updated your Vercel configuration it might be a cache issue.

9

I’m having the same issue with my Vercel Preview environments.

I added the vercelPreview option like this

  const page =
    (await builder
      .get("page", {
        userAttributes: {
          urlPath: "/" + (params?.page?.join("/") || ""),
        },
        options: {
          vercelPreview: process.env.NEXT_PUBLIC_VERCEL_ENV	=== 'preview',
        }
      })
      .toPromise()) || null;

I also set the CSP frame-ancestor header and X-FRAME-OPTIONS (although this is superseded by the CSP as so

  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          // this will allow site to be framed under builder.io for wysiwyg editing
          {
            key: 'Content-Security-Policy',
            value: 'frame-ancestors https://*.builder.io https://builder.io',
          },
          {
            key: 'X-FRAME-OPTIONS',
            value: 'https://*.builder.io https://builder.io',
          },
        ],
      },
    ]
  },

I have the Builder Chrome extension and it has access to the builder Component.

This is what I see in the Builder Editor

Screenshot 2024-01-17 at 11.01.42 AM
Screenshot 2024-01-17 at 11.01.42 AM2790×2264 203 KB

My production Vercel deployment works as expected.

10

It appears that Vercel is throwing a 401 Unauthorized Error to Builder. I assume my user session isn’t being passed properly from my browser via the Builder editor to authenticate to my preview deployment.

11

Hey @spm922 please share your Builder content entry link with me to investigate the issue further.