I’m working on a small project where I’ve integrated the Chapa payment gateway. After initiating the payment, Chapa returns a checkout URL, which I attempt to load in an <iframe>.

This works perfectly in local development, but when deployed on Vercel (V0 platform), I get the following error:

To resolve this, I tried updating my Next.js configuration like this:

However, this doesn’t seem to have any effect on the deployed version. I’ve verified that Chapa is not the issue since everything works locally without needing any CSP adjustments.

My questions:

1. Am I missing something in the next.config.js setup to make CSP updates effective on Vercel?
2. Is there a specific way to set or override CSP headers on Vercel (especially on V0)?
3. Could there be another layer (e.g. Vercel's default headers or proxy) overriding my configuration?

I’d greatly appreciate any guidance or support on this issue.

Thank you!