Help Needed: Embedding Vercel Page in CRM via Iframe

Hello everyone,

I’m trying to embed my Vercel-hosted page into a CRM that allows embedding via iframe by simply adding the page’s URL. However, it seems that the Vercel page is being blocked from displaying in an iframe.

I tried adding the following configuration to my next.config.mjs file:

1/** @type {import('next').NextConfig} */2const nextConfig = {3  reactStrictMode: true,4  async headers() {5    return [6      {7        source: "/(.*)",8        headers: [9          {10            key: "Content-Security-Policy",11            value: "frame-ancestors 'self' https://my-crm-domain.com"12          }13        ]14      }15    ];16  }17};1819export default nextConfig;

After deploying this change, I checked the headers using DevTools, but I don’t see the Content-Security-Policy header in the response when loading the page in a normal browser.

Has anyone successfully allowed iframe embedding for a Vercel-hosted page? Any insights or guidance would be greatly appreciated!

Thanks in advance!

Hi, Scott! Thanks for joining us 😄

A similar issue was raised before, and this was the solution. Does that help?

https://community.vercel.com/t/missing-headers-when-i-open-app-inside-iframe/1694/3

Hi Pauline. I am not sure. I am not opening two vercel pages inside each other. I am just trying to get the headers to show that I added in the next.config.mjs file

is this not the spot to add them. When I deploy this and look in the console in the browser they are not there so of course it won't work in an iframe. Just trying to see them in a browser first and go from there to see if that works. I do not know which file that other guy has it code in that you posted and his situation seems different.

Thank you for your guidane here.

1/** @type {import('next').NextConfig} */2const nextConfig = {3  reactStrictMode: true,4  async headers() {5    return [6      {7        source: "/(.*)",8        headers: [9          {10            key: "Content-Security-Policy",11            value: "frame-ancestors 'self' www.domain..com"12          },13          {14            key: "Cross-Origin-Embedder-Policy",15            value: "credentialless"16          },17          {18            key: "Cross-Origin-Resource-Policy",19            value: "cross-origin"20          }21        ]22      }23    ];24  }25};2627export default nextConfig;

Here is the page is that helps https://marketplace-apps-dashboard-1wa7n8tqq-scott-helikers-projects.vercel.app/