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:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "frame-ancestors 'self' https://my-crm-domain.com"
          }
        ]
      }
    ];
  }
};

export 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!

Vercel Alum

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

Vercel Community

Connect, learn, share projects, and get community support

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.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "frame-ancestors 'self' www.domain..com"
          },
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "credentialless"
          },
          {
            key: "Cross-Origin-Resource-Policy",
            value: "cross-origin"
          }
        ]
      }
    ];
  }
};

export default nextConfig;

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

This topic is closed. It no longer accepts new replies.

/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async headers() { return [ { source: "/(.*)", headers: [ { key: "Content-Security-Policy", value: "frame-ancestors 'self' www.domain..com" }, { key: "Cross-Origin-Embedder-Policy", value: "credentialless" }, { key: "Cross-Origin-Resource-Policy", value: "cross-origin" } ] } ]; } }; export default nextConfig;