Recurso bloqueado devido a incompatibilidade de tipo MIME (X-Content-Type-Options: nosniff)

92

Estou desenvolvendo uma página da web usando JavaScript e HTML, tudo estava funcionando bem quando recebi esta lista de erros da minha página HTML:

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Esses erros apareceram após uma atualização automática do navegador (Mozilla Firefox), pode ser que algo foi alterado na configuração. Você conhece alguma maneira de resolver este problema?

javascript  mime 
— Sim81
fonte
11
Não carregue arquivos do GitHub. Em vez disso, use um CDN.
— SLaks

Respostas:

76

Verifique se o caminho do arquivo está correto e se o arquivo existe - no meu caso, esse era o problema - quando eu corrigi, o erro desapareceu

— dav
fonte
Também estou enfrentando o mesmo problema e o arquivo também não está no diretório pub. O que devo fazer? É um arquivo de tema personalizado.
— saiid
@SaiidatRLTSquare se o arquivo não existe você deve encontrar em algum lugar e colocá-lo lá - ou se o arquivo não for importante - apenas remova a linha que o inclui (ou crie o arquivo vazio) para que não haja um erro
— dav
Usar o Passenger with Node atrapalhou meus caminhos de construção, atualizando os caminhos corrigidos. Obrigado!
— Aaron Belchamber,
29

Isso pode ser corrigido alterando seu URL, por exemplo:

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

Bom exemplo:

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.com é um serviço de cache de proxy para github. Você também pode ir lá e derivar interativamente um URL correspondente para o URL original raw.githubusercontent.com . Veja seu FAQ

— Steven Penny
fonte
3
No addess raw.githubusercontent.comé substituído por cdn.rawgit.comque responderá com o tipo MIME correto.
— Axel Guilmin
rawgit está sendo encerrado. você pode usar jsdeliver conforme explicado na seguinte resposta - stackoverflow.com/a/64456518/9640177
— mayank1513
15

Começamos a enfrentar esse erro na produção depois que nossa equipe de devops alterou a configuração do servidor web adicionando X-Content-Type-Options: nosniff. Agora, devido a isso, o navegador foi forçado a interpretar os recursos conforme mencionado no content-typeparâmetro dos cabeçalhos de resposta.

Agora, desde o início, nosso servidor de aplicativos estava definindo explicitamente o tipo de conteúdo dos arquivos js como text/plain. Como, X-Content-Type-Options: nosniffnão foi definido no servidor da web, o navegador estava interpretando automaticamente os arquivos js como arquivos JavaScript, embora o tipo de conteúdo tenha sido mencionado como texto / simples. Isso é chamado de detecção de MIME. Agora, depois de definir X-Content-Type-Options: nosniff, o navegador foi forçado a não fazer o MIME-sniffing e pegar o content-type conforme mencionado nos cabeçalhos de resposta. Devido a isso, ele interpretou os arquivos js como arquivos de texto simples e negou executá-los ou bloqueou-os. O mesmo é mostrado em seus erros.

Solução: é fazer com que seu servidor defina os content-typearquivos JS como

application/javascript;charset=utf-8

Dessa forma, ele carregará todos os arquivos JS normalmente e o problema será resolvido.

— Manish Bansal
fonte
Onde eu preciso definir o tipo de conteúdo do servidor, quero dizer, qual arquivo eu preciso manter, estou usando o servidor tomcat 8.5
— Bhaskara Arani
Tudo depende da arquitetura do aplicativo. Em nosso caso, era um aplicativo monolítico baseado em servlet antigo simples. Portanto, estava sendo definido ali mesmo no método de serviço.
— Manish Bansal
Que tal mudar o HTML em vez disso?
— Aaron Franke
Desculpa. Eu não entendi você. Aqui, não havia html. Tínhamos um aplicativo baseado em servlet. Que mudança você está sugerindo em html?
— Manish Bansal
12

verifique o seu caminho, este erro virá se o arquivo não existir no caminho fornecido.

— Priyanka Acharya
fonte
7

Você está usando o expresso?

Verifique o seu caminho (observe o " /" após / public /):

app.use(express.static(__dirname + "/public/"));

// observação: você não precisa do "/" antes de "css" porque já está incluído acima:

rel="stylesheet" href="css/style.css

Espero que isto ajude

— JPaulino
fonte
5

Para Wordpress

No meu caso, perdi a barra "/" após get_template_directory_uri (), então o caminho resultante / gerado estava errado:

Meu código errado:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' );

Meu código corrigido:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );
— Sabir Hussain
fonte
3

Isso pode ocorrer porque o navegador não pode acessar um arquivo. Tropecei com este tipo de erro ao criar um aplicativo com node.js. Você pode tentar solicitar diretamente o arquivo de script (copiando e colando url) e ver se você pode recuperá-lo. Você pode ver então qual é o verdadeiro problema. Pode ser por causa da permissão da pasta na qual o arquivo está localizado, ou o navegador simplesmente não consegue localizá-lo devido ao caminho incorreto para ele. Em node.js, após especificar a rota para o arquivo, tudo funciona.

— Vadi
fonte
De acordo com esta página da MS , parece ser um problema do tipo MIME. Mas como especificaria o MIMEtipo em Node.js? (Não deve ser necessário especificar caminhos completos para todos os arquivos, mas apenas para os diretórios de ativos, não?)
— not2qubit
3

Pode ser um caminho errado. Certifique-se de que no arquivo principal do seu aplicativo você tenha:

app.use(express.static(path.join(__dirname,"public")));

Exemplo de link para seu css como:

<link href="/css/clean-blog.min.css" rel="stylesheet">

semelhante para link para arquivos js:

<script src="/js/clean-blog.min.js"></script>
— Mwongera808
fonte
2

Resolvi esse problema alterando o conjunto de caracteres em js-files de UTF-8 sem BOM para UTF-8 simples no Notepad ++

— Sergey
fonte
1

Eu tive este erro quando estava usando o armazenamento azure como um site estático, os arquivos js que são copiados tinham o tipo de conteúdo como text/plain; charset=utf-8e eu alterei o tipo de conteúdo paraapplication/javascript

Começou a funcionar.

— Karthikeyan VK
fonte
0

Veja para os protocolos HTTPS e HTTP

Às vezes, se você estiver usando protocolos mistos [isso acontece principalmente com retornos de chamada JSONP], você pode acabar neste ERROR.

Certifique-se de que a página da web e a página de recursos tenham os mesmos protocolos HTTP.

— Clain Dsilva
fonte
0

Eu também estou enfrentando este mesmo problema no servidor django. Então eu mudei DEBUG = True no arquivo settings.py está funcionando

— sathish kumar
fonte
0

Aconteceu comigo por tag errada. Por engano adiciono o arquivo js na linktag.

Exemplo: (o errado)

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

Foi resolvido usando a tag correta para javascript. Exemplo:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
— smartrahat
fonte
0

https://cdn.rawgit.com está sendo encerrado. Assim, uma das opções alternativas pode ser usada. JSDeliver é um cdn gratuito que pode ser usado.

// carregue qualquer versão, confirmação ou branch do GitHub

// observação: recomendamos o uso do npm para projetos que o suportam

https://cdn.jsdelivr.net/gh/user/repo@version/file

// carregar jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// use um intervalo de versão em vez de uma versão específica

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// omite a versão completamente para obter a mais recente

// você NÃO deve usar isso na produção

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// adicione ".min" a qualquer arquivo JS / CSS para obter uma versão reduzida

// se não existir, nós o geraremos para você

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// adicione / no final para obter uma lista de diretórios

https://cdn.jsdelivr.net/gh/jquery/jquery/

ref - https://www.jsdelivr.com/?docs=gh

— mayank1513
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.