Mi aplicación web es HTTPS , pero el recurso de destino es HTTP . Como resultado, frente a un problema mixed-content :

Contenido mixto: la página en 'https://app-website-dev.shikho.net/student/video-archive/a74c812b-82dd-417c-b07e-c4544911acac' se cargó a través de HTTPS, pero solicitó un recurso inseguro 'http: //res.cloudinary.com/cross-border-education-technologies-pte-ltd/image/upload/v1643522121/eofmak1yhic4n8chsrlo.pdf'. Esta solicitud ha sido bloqueada; el contenido debe servirse a través de HTTPS.

Puedo solucionar el problema desde la configuración del navegador, pero quiero algo dentro del código en lugar de desde la GUI del navegador (ya que todos los usuarios no son técnicos en este sitio).

¿Cómo puedo lograr esto desde el nivel de código? Hasta ahora he visitado CSP: block-all-mixed-content . Tal vez algo como sintaxis Content-Security-Policy: block-all-mixed-content; tiene que usar en el código?

Aquí está mi código:

 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;

Estoy usando React-PDF-Viewer donde la documentación tiene opciones como httpHeaders