iframe - Mixed Content: This request has been blocked; the content must be served over HTTPS

I hope you're doing well. I'm building a Next.js app where I need to insert an iframe, well the problem raise when the iframe it is served from an http protocol instead of https.

I got this error:

Mixed Content: The page at website was loaded over HTTPS, but requested an insecure frame website. This request has been blocked; the content must be served over HTTPS.

How can avoid this error? I'd like to allow this kind of websites using the iframe.

In my next.config.mjs file I've added:

const nextConfig = {    async headers() {        return [            {                source: '/(.*)',                headers: [                    {                        key: 'Content-Security-Policy',                        value: "default-src 'self''unsafe-inline''unsafe-eval' *;",                    },                ],            },        ]    },}

But the result is the same, how could I fix the issue?