Resource blocked due to MIME type mismatch X-Content-Type-Options nosniff

Question

I am developing a web page using JavaScript and HTML  everything was working good when I have received this list of errors from my HTML page   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     These errors appeared after an automatic browser update  Mozilla Firefox   may be something has been changed in the set up  Do you know any way to solve this problem

User · Answer

We started facing this error in production after our devops team changed the webserver configuration by adding X-Content-Type-Options: nosniff. Now, due to this, browser was forced to interpret the resources as it was mentioned in content-type parameter of response headers.

Now, from the beginning, our application server was explicitly setting content-type of the js files as text/plain. Since, X-Content-Type-Options: nosniff was not set in webserver, browser was automatically interpreting the js files as JavaScript files although the content-type was mentioned as text/plain. This is called as MIME-sniffing. Now, after setting X-Content-Type-Options: nosniff, browser was forced to not do the MIME-sniffing and take the content-type as mentioned in response headers. Due to this, it did interpret js files as plain text files and denied to execute them or blocked them. The same is shown in your errors.

Solution: is to make your server set the content-type of JS files as

application/javascript;charset=utf-8

This way, it will load all JS files normally and issue will get resolved.

User · Answer

Check if the file path is correct and the file exists - in my case that was the issue - as I fixed it  the error disappeared

User · Answer

It happened to me for wrong tag  By mistake I add the js file in link tag  Example   The Wrong One   lt link rel  quot stylesheet quot  href  quot plugins timepicker bootstrap-timepicker min js quot  gt   It solved by using the correct tag for javascript  Example   lt script src  quot plugins timepicker bootstrap-timepicker min js quot  gt  lt  script gt

User · Answer

For Wordpress  In my case i just missed the slash     after get template directory uri   so resulted   generated path was wrong   My Wrong code    wp enqueue script   retina-js   get template directory uri    js retina min js        My Corrected Code    wp enqueue script   retina-js   get template directory uri     js retina min js

User · Answer

This can be fixed by changing your URL  example bad     https   raw githubusercontent com svnpenn bm master yt-dl yt-dl js Content-Type  text plain  charset utf-8   Example good   https   cdn rawgit com svnpenn bm master yt-dl yt-dl js content-type  application javascript charset utf-8   rawgit com is a caching proxy service for github  You can also go there and interactively derive a corresponding URL for your original raw githubusercontent com URL  See its FAQ

User · Answer

I had this error when i was using the azure storage as a static website  the js files that are copied had the content type as text plain  charset utf-8 and i changed the content type to application javascript  It started working

User · Answer

This might be because the browser cannot access a file  I stumbled with this type of error when creating application with node js  You can try to directly request the script file  copying and pasting url  and see if you can retrieve it  You can see then what the real problem is  It can be because of permission of folder in which the file is located  or browser just cannot find it due to incorrect path to it  In node js  after specifying route to file  all works

User · Answer

check your path  this error will come if file was not exist into given path

User · Answer

See for the protocols HTTPS and HTTP   Sometimes if you are using mixed protocols  this happens mostly with JSONP callbacks   you can end up in this ERROR   Make sure both the web-page and the resource page have the same HTTP protocols

User · Answer

https   cdn rawgit com is shutting down  Thus  one of the alternate options can be used  JSDeliver is a free cdn that can be used      load any GitHub release  commit  or branch    note  we recommend using npm for projects that support it https   cdn jsdelivr net gh user repo version file    load jQuery v3 2 1 https   cdn jsdelivr net gh jquery jquery 3 2 1 dist jquery min js    use a version range instead of a specific version 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    omit the version completely to get the latest one    you should NOT use this in production https   cdn jsdelivr net gh jquery jquery dist jquery min js    add  quot  min quot  to any JS CSS file to get a minified version    if one doesn t exist  we ll generate it for you https   cdn jsdelivr net gh jquery jquery 3 2 1 src core min js    add   at the end to get a directory listing https   cdn jsdelivr net gh jquery jquery   ref - https   www jsdelivr com  docs gh

User · Answer

Are you using express   Check your path note the     after  public      app use express static   dirname     public          note  you do not need the     before  css  because its already included above   rel  stylesheet  href  css style css   Hope this helps

User · Answer

It might be a wrong path   Ensure in your main app file you have    app use express static path join   dirname  public        Example link to your css as    lt link href   css clean-blog min css  rel  stylesheet  gt    similar for link to js files    lt script src   js clean-blog min js  gt  lt  script gt

User · Answer

I ve solved this problem by changing charset in js-files from UTF-8 without BOM to simple UTF-8 in Notepad

User · Answer

i also facing this same problem in django server So i changed DEBUG   True in settings py file its working

[javascript] Resource blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

Examples related to javascript

Examples related to mime