Recurso bloqueado debido a una falta de coincidencia de tipo MIME (X-Content-Type-Options: nosniff)

90

Estoy desarrollando una página web usando JavaScript y HTML, todo funcionaba bien cuando recibí esta lista de errores de mi 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).

Estos errores aparecieron después de una actualización automática del navegador (Mozilla Firefox), es posible que algo haya cambiado en la configuración. ¿Conoces alguna forma de solucionar este problema?

javascript  mime 
— Sim81
fuente
10
No cargue archivos desde GitHub. En su lugar, use un CDN.
— SLaks

Respuestas:

72

Verifique si la ruta del archivo es correcta y el archivo existe, en mi caso ese fue el problema, cuando lo solucioné, el error desapareció

— dav
fuente
También estoy enfrentando el mismo problema y el archivo tampoco está en el directorio pub. ¿Qué tengo que hacer? Es un archivo de tema personalizado.
— dijo el
@SaiidatRLTSquare si el archivo no existe, debe buscarlo en algún lugar y colocarlo allí, o si ese archivo no es importante, simplemente elimine la línea que lo incluye (o cree un archivo vacío) para que no dé un error
— dav
El uso de Passenger con Node desvió mis rutas de construcción, actualizando las rutas lo solucionó. ¡Gracias!
— Aaron Belchamber
28

Esto se puede solucionar cambiando su URL, ejemplo malo:

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

Buen ejemplo:

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

rawgit.com es un servicio de proxy de almacenamiento en caché para github. También puede ir allí y derivar interactivamente una URL correspondiente para su URL original raw.githubusercontent.com . Ver sus preguntas frecuentes

— Steven Penny
fuente
3
En la addess raw.githubusercontent.comse reemplaza por cdn.rawgit.comque responderá con el tipo de mimo correcto.
— Axel Guilmin
salvó mi vida. ¡¡gracias!!
— Megan Byers
rawgit se está cerrando. puede usar jsdeliver como se explica en la siguiente respuesta - stackoverflow.com/a/64456518/9640177
— mayank1513
14

Comenzamos a enfrentar este error en producción después de que nuestro equipo de devops cambiara la configuración del servidor web agregando X-Content-Type-Options: nosniff. Ahora, debido a esto, el navegador se vio obligado a interpretar los recursos como se mencionó en el content-typeparámetro de encabezados de respuesta.

Ahora, desde el principio, nuestro servidor de aplicaciones establecía explícitamente el tipo de contenido de los archivos js como text/plain. Dado que, X-Content-Type-Options: nosniffno se configuró en el servidor web, el navegador interpretó automáticamente los archivos js como archivos JavaScript, aunque el tipo de contenido se mencionó como texto / plano. Esto se llama olfateo MIME. Ahora, después de configurar X-Content-Type-Options: nosniff, el navegador se vio obligado a no realizar el rastreo de MIME y tomar el tipo de contenido como se menciona en los encabezados de respuesta. Debido a esto, interpretó los archivos js como archivos de texto sin formato y se negó a ejecutarlos o los bloqueó. Lo mismo se muestra en sus errores.

Solución: es hacer que su servidor configure los content-typearchivos JS como

application/javascript;charset=utf-8

De esta manera, cargará todos los archivos JS normalmente y el problema se resolverá.

— Manish Bansal
fuente
Donde necesito configurar el tipo de contenido del servidor, me refiero a qué archivo necesito mantener, estoy usando el servidor tomcat 8.5
— Bhaskara Arani
Todo depende de la arquitectura de la aplicación. En nuestro caso, era una sencilla aplicación monolítica basada en servlets. Por lo tanto, se estaba configurando allí mismo en el método de servicio.
— Manish Bansal
¿Qué hay de cambiar el HTML en su lugar?
— Aaron Franke
Lo siento. No te entendí. Aquí, no había html. Teníamos una aplicación basada en servlets. ¿Qué cambio sugieres en html?
— Manish Bansal
6

¿Estás usando express?

Compruebe su ruta (observe el " /" después de / public /):

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

// nota: no necesita "/" antes de "css" porque ya está incluido arriba:

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

Espero que esto ayude

— JPaulino
fuente
5

Para Wordpress

En mi caso, simplemente me perdí la barra "/" después de get_template_directory_uri (), por lo que la ruta resultante / generada era incorrecta:

Mi código incorrecto:

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

Mi código corregido:

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

Esto puede deberse a que el navegador no puede acceder a un archivo. Me encontré con este tipo de error al crear una aplicación con node.js. Puede intentar solicitar directamente el archivo de secuencia de comandos (copiando y pegando la URL) y ver si puede recuperarlo. Entonces puede ver cuál es el verdadero problema. Puede deberse al permiso de la carpeta en la que se encuentra el archivo, o el navegador simplemente no puede encontrarlo debido a una ruta incorrecta. En node.js, después de especificar la ruta al archivo, todo funciona.

— Vadi
fuente
Según esta página de MS , parece ser un problema de tipo MIME. Pero, ¿cómo especificaría el MIMEtipo en Node.js? (Uno no debería tener que especificar rutas completas a todos los archivos, sino solo a los directorios de activos, ¿no?)
— not2qubit
3

Puede que sea un camino equivocado. Asegúrese de que en el archivo de su aplicación principal tenga:

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

Enlace de ejemplo a su css como:

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

similar para el enlace a los archivos js:

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

Resolví este problema cambiando el juego de caracteres en archivos js de UTF-8 sin BOM a UTF-8 simple en Notepad ++

— Sergey
fuente
1

Tuve este error cuando estaba usando el almacenamiento azul como un sitio web estático, los archivos js que se copiaron tenían el tipo de contenido como text/plain; charset=utf-8y cambié el tipo de contenido aapplication/javascript

Empezó a funcionar.

— Karthikeyan VK
fuente
0

Consulte los protocolos HTTPS y HTTP.

A veces, si está utilizando protocolos mixtos [esto sucede principalmente con devoluciones de llamada JSONP], puede terminar en este ERROR.

Asegúrese de que tanto la página web como la página de recursos tengan los mismos protocolos HTTP.

— Clain Dsilva
fuente
0

También me enfrento a este mismo problema en el servidor django, así que cambié DEBUG = True en el archivo settings.py, está funcionando

— sathish kumar
fuente
0

Me pasó por etiqueta incorrecta. Por error agrego el archivo js en la linketiqueta.

Ejemplo: (el equivocado)

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

Se solucionó usando la etiqueta correcta para javascript. Ejemplo:

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

https://cdn.rawgit.com se está cerrando. Por tanto, se puede utilizar una de las opciones alternativas. JSDeliver es un cdn gratuito que se puede utilizar.

// cargar cualquier versión, confirmación o rama de GitHub

// nota: recomendamos usar npm para proyectos que lo admitan

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

// carga jQuery v3.2.1

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

// usa un rango de versiones en lugar de una versión 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 la versión por completo para obtener la última

// NO deberías usar esto en producción

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

// agregue ".min" a cualquier archivo JS / CSS para obtener una versión reducida

// si no existe uno, lo generaremos para usted

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

// agrega / al final para obtener una lista de directorios

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

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

— mayank1513
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.