Ressource bloquée en raison d'une incompatibilité de type MIME (X-Content-Type-Options: nosniff)


90

Je développe une page Web en utilisant JavaScript et HTML, tout fonctionnait bien lorsque j'ai reçu cette liste d'erreurs de ma page 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).

Ces erreurs sont apparues après une mise à jour automatique du navigateur (Mozilla Firefox), peut-être que quelque chose a été changé dans la configuration. Connaissez-vous un moyen de résoudre ce problème?


10
Ne chargez pas de fichiers depuis GitHub. Utilisez plutôt un CDN.
SLaks

Réponses:


72

Vérifiez si le chemin du fichier est correct et que le fichier existe - dans mon cas, c'était le problème - car je l'ai corrigé, l'erreur a disparu


Je suis également confronté au même problème et le fichier n'est pas non plus présent dans le répertoire pub. Que devrais-je faire? C'est un fichier de thème personnalisé.
saiid

@SaiidatRLTSquare si le fichier n'existe pas, vous devriez le trouver quelque part et le mettre là - ou si ce fichier n'est pas important - supprimez simplement la ligne qui l'inclut (ou créez un fichier vide) pour qu'il ne donne pas d'erreur
dav

L'utilisation de Passenger avec Node a jeté mes chemins de construction, la mise à jour des chemins l'a corrigé. Merci!
Aaron Belchamber le

28

Cela peut être résolu en changeant votre URL, exemple mauvais:

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

Exemple bon:

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

rawgit.com est un service de proxy de mise en cache pour github. Vous pouvez également y aller et dériver de manière interactive une URL correspondante pour votre URL raw.githubusercontent.com d' origine . Voir sa FAQ


3
Dans l'adresse raw.githubusercontent.comest remplacé par cdn.rawgit.comqui répondra avec le type mime correct.
Axel Guilmin

sauvé ma vie. Merci!!
Megan Byers

rawgit est en train de s'arrêter. vous pouvez utiliser jsdeliver comme expliqué dans la réponse suivante - stackoverflow.com/a/64456518/9640177
mayank1513

14

Nous avons commencé à faire face à cette erreur en production après que notre équipe devops ait modifié la configuration du serveur Web en ajoutant X-Content-Type-Options: nosniff. Maintenant, pour cette raison, le navigateur a été obligé d'interpréter les ressources comme il était mentionné dans le content-typeparamètre des en-têtes de réponse.

Désormais, depuis le début, notre serveur d'applications définissait explicitement le type de contenu des fichiers js comme text/plain. Puisque, X-Content-Type-Options: nosniffn'était pas défini dans le serveur Web, le navigateur interprétait automatiquement les fichiers js comme des fichiers JavaScript bien que le type de contenu ait été mentionné comme texte / brut. C'est ce qu'on appelle le reniflage MIME. Maintenant, après avoir défini X-Content-Type-Options: nosniff, le navigateur a été forcé de ne pas faire le reniflage MIME et de prendre le type de contenu comme mentionné dans les en-têtes de réponse. Pour cette raison, il a interprété les fichiers js comme des fichiers texte brut et a refusé de les exécuter ou les a bloqués. La même chose est montrée dans vos erreurs.

Solution: est de faire en sorte que votre serveur définisse les content-typefichiers JS comme

application/javascript;charset=utf-8

De cette façon, il chargera tous les fichiers JS normalement et le problème sera résolu.


Là où j'ai besoin de définir le type de contenu du serveur, je veux dire quel fichier je dois conserver, j'utilise le serveur tomcat 8.5
Bhaskara Arani

Tout dépend de l'architecture de l'application. Dans notre cas, il s'agissait d'une simple application monolithique basée sur un servlet. Par conséquent, il était mis en place ici dans la méthode de service.
Manish Bansal

Pourquoi ne pas changer le HTML à la place?
Aaron Franke

Pardon. Je ne t'ai pas compris. Ici, il n'y avait pas de html. Nous avions une application basée sur des servlets. Quel changement suggérez-vous en HTML?
Manish Bansal

12

vérifiez votre chemin, cette erreur surviendra si le fichier n'existait pas dans le chemin donné.


6

Utilisez-vous express?

Vérifiez votre chemin (notez le " /" après / public /):

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

// note: vous n'avez pas besoin du "/" avant "css" car il est déjà inclus ci-dessus:

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

J'espère que cela t'aides


5

Pour Wordpress

Dans mon cas, je viens de manquer la barre oblique "/" après get_template_directory_uri (), donc le chemin généré / généré était incorrect:

Mon mauvais code:

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

Mon code corrigé:

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

3

Cela peut être dû au fait que le navigateur ne peut pas accéder à un fichier. Je suis tombé sur ce type d'erreur lors de la création d'une application avec node.js. Vous pouvez essayer de demander directement le fichier de script (copier et coller l'URL) et voir si vous pouvez le récupérer. Vous pouvez alors voir quel est le vrai problème. Cela peut être dû à l'autorisation du dossier dans lequel se trouve le fichier, ou le navigateur ne peut tout simplement pas le trouver en raison d'un chemin d'accès incorrect. Dans node.js, après avoir spécifié la route vers le fichier, tout fonctionne.


D'après cette page MS, cela semble être un problème de type MIME. Mais comment spécifier le MIMEtype dans Node.js? (On ne devrait pas avoir à spécifier les chemins complets vers tous les fichiers, mais uniquement vers les répertoires d'actifs, non?)
not2qubit

3

Ce pourrait être un mauvais chemin. Assurez-vous que dans votre fichier d'application principal, vous avez:

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

Exemple de lien vers votre css comme:

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

similaire pour le lien vers les fichiers js:

<script src="/js/clean-blog.min.js"></script>

2

J'ai résolu ce problème en changeant le jeu de caractères dans les fichiers js de UTF-8 sans BOM en UTF-8 simple dans Notepad ++


1

J'ai eu cette erreur lorsque j'utilisais le stockage azure comme site Web statique, les fichiers js copiés avaient le type de contenu comme text/plain; charset=utf-8et j'ai changé le type de contenu enapplication/javascript

Cela a commencé à fonctionner.


0

Voir pour les protocoles HTTPS et HTTP

Parfois, si vous utilisez des protocoles mixtes [cela se produit principalement avec les rappels JSONP], vous pouvez vous retrouver dans cette ERREUR.

Assurez-vous que la page Web et la page de ressources ont les mêmes protocoles HTTP.


0

Je suis également confronté à ce même problème sur le serveur django. J'ai donc changé DEBUG = True dans le fichier settings.py.


0

Cela m'est arrivé pour une mauvaise balise. Par erreur, j'ajoute le fichier js dans la linkbalise.

Exemple: (Le mauvais)

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

Il a été résolu en utilisant la bonne balise pour javascript. Exemple:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

0

https://cdn.rawgit.com est en cours de fermeture. Ainsi, l'une des options alternatives peut être utilisée. JSDeliver est un cdn gratuit qui peut être utilisé.

// charge n'importe quelle version, commit ou branche de GitHub

// note: nous vous recommandons d'utiliser npm pour les projets qui le supportent

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

// charge jQuery v3.2.1

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

// utilise une plage de versions au lieu d'une version spécifique

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

// omettre complètement la version pour obtenir la dernière

// vous ne devez PAS utiliser ceci en production

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

// ajoute ".min" à n'importe quel fichier JS / CSS pour obtenir une version minifiée

// s'il n'en existe pas, nous le générerons pour vous

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

// ajouter / à la fin pour obtenir une liste de répertoires

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

réf - https://www.jsdelivr.com/?docs=gh

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.