cross-origin-embedder-policy: credentialless and cross-origin-opener-policy: same-origin Blocking page on chrome

[Gojocooker]

Summary

Despite setting global and targeted header overrides in next.config.js, my static assets (e.g., /_next/static/chunks/app/page-xxxx.js) are still being served with cross-origin-embedder-policy: credentialless and cross-origin-opener-policy: same-origin. This is breaking Stripe Elements in Chrome. Please advise how to remove or override these headers for all static assets, as this is not possible from my project configuration.
Does anyone know how I could fix this please.

Additional information

No response

Example

No response

[GaneshVarma1]

✅ Fix for cross-origin-embedder-policy and cross-origin-opener-policy breaking Stripe in Chrome

Hey! I totally get the frustration — these headers can silently break Stripe Elements and other embedded scripts, especially in Chrome.

By default, Next.js (especially in App Router mode) adds strict headers like:

cross-origin-embedder-policy: credentialless
cross-origin-opener-policy: same-origin

These are great for things like security and performance isolation, but they do interfere with libraries like Stripe, which need to embed resources more freely.

---

✅ The fix: Override the headers in next.config.js

To disable or loosen these headers for your whole app (including static assets like /static/chunks), try adding this to your next.config.js:

const nextConfig = {
  headers: async () => {
    return [
      {
        source: "/(.*)", // apply to all routes and assets
        headers: [
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "unsafe-none",
          },
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin-allow-popups",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

This will apply your custom headers across everything, including the chunks inside /_next/static.

---

Things to keep in mind

• If you're deploying to Vercel, this config should work out of the box — no extra setup needed.
• After deploying, double-check in Chrome DevTools → Network tab that your pages and static files no longer show credentialless or the stricter same-origin header.
• If you’re also using headers in Vercel’s dashboard or via custom proxies/CDNs, make sure they’re not overriding this.

---

Why this matters

Next.js is trying to help with COOP/COEP for advanced isolation (used in tools like WebAssembly, shared memory, etc.), but Stripe and similar third-party scripts don’t work well with that setup. Overriding these headers brings back compatibility without affecting most use cases.

---

Hope this helps! Been through this exact issue before 🙂

[Gojocooker]

Thank you GaneshVarma, so much for your detailed suggestion! I tried the universal override in next.config.js exactly as you recommended (with source: "/(.*)" and the unsafe-none/same-origin-allow-popups values), pushed the changes, and redeployed.
Unfortunately, the problematic headers (cross-origin-embedder-policy: credentialless and cross-origin-opener-policy: same-origin) are still present on both my main page and static assets. Stripe Elements is still broken in Chrome.
It seems like Vercel’s platform is injecting these headers at a level that can’t be overridden by project config. If you have any other ideas or know of a workaround that works for static assets and the main page, I’d really appreciate it!
Thanks again for your help and time!

[GaneshVarma1]

Try this and deploy or run, This helps you to override headers that Vercel adds at the CDN level—including those on /_next/static/..., /_next/chunks/..., etc.—add this to a vercel.json at your project root

{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Cross-Origin-Embedder-Policy",
"value": "unsafe-none"
},
{
"key": "Cross-Origin-Opener-Policy",
"value": "same-origin-allow-popups"
}
]
}
]
}

[GaneshVarma1]

Add a vercel.json file at the root of your project:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "unsafe-none"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin-allow-popups"
        }
      ]
    }
  ]
}

Deploy (or redeploy) the project:

vercel --prod

This configuration applies your custom headers at the CDN level, so the new values will appear on all resources—including static assets under /_next/static/ and /_next/chunks/.

[Gojocooker]

Thank you GaneshVarma for replying again, but unfortunately it still didn't work. I have now tried both next.config.js and a root-level vercel.json with universal header overrides, redeployed, and purged cache. The problematic headers are still present on my main page and static assets. This is a platform-level issue that cannot be fixed with project config. Do you have any other solution or should I just or can this be escalated to the Vercel engineering team?

[GaneshVarma1]

Temporary workaround (if urgent)

• Proxy your site through a custom CDN like Cloudflare, and use response header rewriting to strip or override the problematic headers.
• Alternatively, deploy to a non-Vercel platform (like Netlify, Render, or self-hosted) if Stripe compatibility is urgent.
  If you're on a Vercel Pro or Enterprise plan, I strongly suggest opening a support ticket or contacting Vercel directly

[Gojocooker]

Ok thank you very much.

[Gojocooker]

Thank you GaneshVarma I used Cloudflare and the errors are gone and it works now. 🤩