Missing headers when i open app inside iframe

I have 2 apps in my monorepo. App A is assigned domainA.com and App B is assigned domainB.com

Plan is to open domainB.com in an iframe in domainA.com. All this works locally when the 2 domains are on localhost:3000 and localhost:3001, but once deployed, domainB.com is blocked inside the iframe with the following error on Chrome:

1Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP). This behavior prevents a document from loading cross-origin resources which don’t explicitly grant permission to be loaded.23To solve this, add the following to the resource’ response header:45Cross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site.6Cross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website. ⚠️If you set this header, any website can embed this resource.7Alternatively, the document can use the variant: Cross-Origin-Embedder-Policy: credentialless instead of require-corp. It allows loading the resource, despite the missing CORP header, at the cost of requesting it without credentials like Cookies.

When I inspect the request to domainB.com when loaded inside iframe, there are no headers in the response. But when i open domainB.com outside an iframe, the response has all the headers required.

next.config.mjs for domainA:

1/** @type {import('next').NextConfig} */2const nextConfig = {3  // reactStrictMode: false,  // Uncomment to see if duplicate requests are due to React Strict Mode4  async headers() {5    return [6      {7        source: "/(.*)",8        headers: securityHeaders,9      },10    ];11  },12  async rewrites() {13    return [14      {15        source: "/home",16        destination: "/",17      },18    ];19  },20  experimental: {21    swcPlugins: [22      [23        "@preact-signals/safe-react/swc",24        {25          // you should use `auto` mode to track only components which uses `.value` access.26          // Can be useful to avoid tracking of server side components27          mode: "auto",28        } /* plugin options here */,29      ],30    ],31  },32};3334const ContentSecurityPolicy = `35    child-src 'self' https://pykernel.app https://www.pykernel.app http://localhost:3001;36    frame-src 'self' https://pykernel.app https://www.pykernel.app http://localhost:3001;37`;3839const securityHeaders = [40  {41    key: "Content-Security-Policy",42    value: ContentSecurityPolicy.replace(/43/g, ""),44  },45  {46    key: "Cross-Origin-Embedder-Policy",47    value: "credentialless",48  },49  {50    key: "Cross-Origin-Opener-Policy",51    value: "same-origin",52  },53  {54    key: "Cross-Origin-Resource-Policy",55    value: "cross-origin",56  },57];5859export default nextConfig;

next.config.mjs for domainB:

1/** @type {import('next').NextConfig} */2const nextConfig = {3  // reactStrictMode: false,  // Uncomment to see if duplicate requests are due to React Strict Mode4  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],5  async headers() {6    return [7      {8        source: "/(.*)",9        headers: securityHeaders,10      },11    ];12  },13};1415const ContentSecurityPolicy = `16    default-src 'self' vercel.live;17    script-src blob: 'self' 'unsafe-eval' 'unsafe-inline' cdn.vercel-insights.com vercel.live va.vercel-scripts.com pyscript.net https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/ https://cdn.jsdelivr.net/pyodide/ https://cdn.jsdelivr.net/npm/@pyscript/ https://cdn.jsdelivr.net/npm/@micropython/;18    worker-src 'self' blob: data:;19    style-src * 'self' 'unsafe-inline';20    img-src * blob: data:;21    media-src 'none';22    connect-src * blob:;23    font-src * 'self' data:;24    frame-src 'self' vercel.live;25    frame-ancestors 'self' https://pykernel.com https://www.pykernel.com http://localhost:3000;26`;2728const securityHeaders = [29  {30    key: "Content-Security-Policy",31    value: ContentSecurityPolicy.replace(/32/g, ""),33  },34  {35    key: "Referrer-Policy",36    value: "strict-origin-when-cross-origin",37  },38  {39    key: "X-Content-Type-Options",40    value: "nosniff",41  },42  {43    key: "X-DNS-Prefetch-Control",44    value: "on",45  },46  {47    key: "X-Frame-Options",48    value: "ALLOW-FROM https://pykernel.com https://www.pykernel.com http://localhost:3000",49  },50  {51    key: "Strict-Transport-Security",52    value: "max-age=31536000; includeSubDomains; preload",53  },54  {55    key: "Permissions-Policy",56    value: "camera=(), microphone=(), geolocation=()",57  },58  {59    key: "Cross-Origin-Embedder-Policy",60    value: "credentialless",61  },62  {63    key: "Cross-Origin-Opener-Policy",64    value: "same-origin",65  },66  {67    key: "Cross-Origin-Resource-Policy",68    value: "cross-origin",69  },70];7172export default nextConfig;

why does domainB get the headers in the response when opened by itself and why are these headers missing when opened inside an iframe?

Opened in iframe:

Opened standalone: