Resource blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)
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?
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
This can be fixed by changing your URL to use a mirror/proxy. Instead of using GitHub:
https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8
Use a third-party cache:
https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8
rawgit.com was a caching proxy service for GitHub that has shut down since 2018. See its FAQ
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.