Desenvolvi um site para uso interno da empresa usando Vue .
Há apenas uma biblioteca no projeto que é importada por meio de um CDN externo :
<script setup>
import { encode as encodeJPEG } from "https://unpkg.com/@jsquash/[email protected]?module";
</script>
O site estava funcionando bem por mais de um ano, mas recentemente recebi relatos de que o site não estava sendo exibido. Ao investigar, encontrei o seguinte erro no console:
Conteúdo Misto: A página em 'https://~.com/' foi carregada por HTTPS, mas solicitou um script inseguro 'http://unpkg.com/@jsquash/ [email protected] /index.js?module'. Esta solicitação foi bloqueada; o conteúdo deve ser servido por HTTPS.
A solução mais comum que encontrei ao pesquisar no Stack Overflow foi adicionar o seguinte cabeçalho:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
Como importei apenas o CDN externo para facilitar o desenvolvimento, resolvi o problema criando a biblioteca e servindo-a como um recurso interno.
No entanto, estou curioso sobre por que o navegador tentou fazer o download via HTTP quando a saída da compilação do projeto (obviamente) especifica a importação da biblioteca via protocolo HTTPS?
A imagem abaixo mostra o código depois de ser construído no Vue.
O erro aparece temporariamente e desaparece ao atualizar a página posteriormente.
Peço desculpas por não poder fornecer um site para reproduzir o erro, pois o site funciona normalmente na maior parte do tempo .