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

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?

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

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

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.

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

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

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' );

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.

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>

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 ++

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.

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.

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

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>

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/[email protected]/dist/jquery.min.js

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

https://cdn.jsdelivr.net/gh/jquery/[email protected]/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/[email protected]/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