How to enable mixed content into your Next.js app with 3rd party npm

My web app is HTTPS but the targeted resource is HTTP. As a result, facing mixed-content issue:

Mixed Content: The page at ‘https://app-website-dev.shikho.net/student/video-archive/a74c812b-82dd-417c-b07e-c4544911acac’ was loaded over HTTPS, but requested an insecure resource ‘http://res.cloudinary.com/cross-border-education-technologies-pte-ltd/image/upload/v1643522121/eofmak1yhic4n8chsrlo.pdf’. This request has been blocked; the content must be served over HTTPS.

I can fix the issue from browser settings but want something inside the code instead from browser GUI (as all the users are not technical in this site).

How can i achieve this from code level? So far I’ve visited CSP: block-all-mixed-content. May be something like syntax Content-Security-Policy: block-all-mixed-content; has to use into code?

Here is my code:

import React from 'react';
import Viewer, {Worker} from '@phuocng/react-pdf-viewer';
import '@phuocng/react-pdf-viewer/cjs/react-pdf-viewer.css';

function StdPDFViewer({url}) {
    return (<div className="pdf-container"
                 style={{
                     backgroundColor: 'aliceblue',
                     border: '1px solid rgba(0, 0, 0, 0.3)',
                     display: 'flex',
                     flexDirection: 'column',
                     height: '100%',
                 }}>
        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
            <div id="pdfViewer" style={{height: '100vh'}}>
                <Viewer fileUrl={url}
                        defaultScale={1}
                        httpHeaders={{key: 'C6590A86-50504136-B572A792-D36E0771'}}
                        withCredentials={true}/>
            </div>
        </Worker>
    </div>);
}

export default StdPDFViewer;

---

I’m using React-PDF-Viewer where the documentation has options like httpHeaders. Please have a look.

Thanks for reading.