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 .
É possível ver exatamente o que acontece com uma solicitação na aba de rede, e você pode colocar pontos de interrupção na pilha de chamadas mencionada no erro se houver erro de programação.
Não há tal comportamento em geral. Seria possível se um site (unpkg) redirecionasse https para http. Aqui, pelo menos um redirecionamento acontece para o ponto de entrada index.js, para . Devido à natureza volátil do problema, pode-se presumir que este é o caso. Há um problema recente conhecido com unpkg .
unpkg.com/@jsquash/[email protected]?moduleunpkg.com/@jsquash/[email protected]/index.js?module