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 of from browser GUI (as all the users are not technical on this site).

How can I achieve this from the code level? So far I've visited CSP: block-all-mixed-content. Maybe something like syntax Content-Security-Policy: block-all-mixed-content; has to use in 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/pdfjs-dist@2.5.207/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