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?

Don't load files from GitHub. Instead, use a CDN. – SLaks Nov 21 '16 at 20:16 — SLaks, Nov 21 '16 at 20:16

score 112 · Answer 1 · answered Dec 25 '16 at 08:56

112

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

answered Dec 25 '16 at 08:56

dav

8,931
15
76
140

I'm also facing the same issue and file is also not there in pub directory. What should I do? Its a custom theme file. – saiid Mar 06 '17 at 14:13
@SaiidatRLTSquare if file does not exist you should find from somewhere and put it there - or if that file is not important - just remove the line that includes it (or create empty file) so it will not give an error – dav Mar 06 '17 at 19:43
Using Passenger with Node threw my build paths off, updating the paths fixed it. Thank you! – Aaron Belchamber Apr 08 '20 at 15:44

score 40 · Answer 2 · edited Jul 27 '21 at 09:33

40

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

edited Jul 27 '21 at 09:33

Avindra Goolcharan

4,032
3
41
39

answered Dec 24 '16 at 01:07

Zombo

1
62
391
407

3

In the addess `raw.githubusercontent.com` is replaced by `cdn.rawgit.com` which will respond with the correct mime-type. – Axel Guilmin Oct 06 '17 at 15:09
5

rawgit is shutting down. you can use jsdeliver as explained in following answer - https://stackoverflow.com/a/64456518/9640177 – Mayank Kumar Chaudhari Oct 21 '20 at 04:06

score 35 · Answer 3 · answered Oct 30 '18 at 10:42

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.

Where i need to set the server content-type, I mean which file i need to keep, I am using tomcat 8.5 server — Bhaskara Arani, Jun 14 '19 at 16:52
It all depends on application architecture. In our case, it was a plain old servlet based monolith application. Hence, it was getting set right there in service method. — Manish Bansal, Sep 23 '19 at 03:30
Sorry. I didn't get you. Here, there was no html. We had servlet based application. What change are you suggesting in html? — Manish Bansal, Nov 09 '19 at 05:23

score 13 · Answer 4 · answered Jul 14 '17 at 12:58

13

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

answered Jul 14 '17 at 12:58

Priyanka Acharya

131
1
4

score 13 · Answer 5 · edited Oct 06 '17 at 19:28

13

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

edited Oct 06 '17 at 19:28

JP. Aulet

4,375
4
26
39

answered Oct 06 '17 at 17:20

JPaulino

3,297
1
9
7

score 7 · Answer 6 · answered May 28 '19 at 13:37

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:

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

similar for link to js files:

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

score 5 · Answer 7 · edited Jan 22 '20 at 11:28

5

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

edited Jan 22 '20 at 11:28

dav

8,931
15
76
140

answered Jul 06 '17 at 13:04

Sabir Hussain

2,802
2
14
19

Vadi · Answer 8 · 2017-04-26T10:33:33.350

4

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.

edited Apr 26 '17 at 10:33

answered Apr 26 '17 at 09:53

Vadi

3,279
2
13
30

According to [this MS page](https://msdn.microsoft.com/en-us/library/gg622941(v=vs.85).aspx) it seem to be a MIME type problem. **But how would do specify `MIME` type in Node.js?** (One should not have to specify full paths to all files, but only to the assets directories, no?) – not2qubit Feb 13 '18 at 20:35
@not2qubit got the same problem. ideas? – BenKoshy Mar 31 '22 at 07:05

score 2 · Answer 9 · answered May 06 '17 at 14:47

2

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

answered May 06 '17 at 14:47

Sergey

21
2

score 1 · Answer 10 · answered Apr 02 '20 at 10:56

1

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.

answered Apr 02 '20 at 10:56

Karthikeyan VK

5,310
3
37
50

score 1 · Answer 11 · answered Sep 07 '20 at 20:51

It happened to me for wrong tag. By mistake I add the js file in link tag.

Example: (The Wrong One)

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

It solved by using the correct tag for javascript. Example:

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

score 0 · Answer 12 · answered Aug 23 '18 at 07:32

0

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.

answered Aug 23 '18 at 07:32

Clain Dsilva

1,631
3
25
34

Friedrich -- Слава Україні · Answer 13 · 2022-08-10T16:53:24.853

I got this problem, when having a function name in the url parameters (firefox 68).

E.g. https://.../test.html?concat() where test.html is

<!DOCTYPE html>
<html>
<script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
</html>

concat is a function in math.js.

I have no idea, why it happens at all. And it occurs least for this function, while some other functions have no effect.

A space between concat and the parenthesis https://.../test.html?concat () solves the problem.

score 0 · Answer 14 · answered Feb 04 '23 at 14:09

0

app.static() does not preserve the file directory. For example: If you use app.static('static/') and link to the file as <script src="/static/code.js"></script> then the file will not be found as it is looking in the long place. Changing the code to <script src="code.js"></script> solved the problem for me

answered Feb 04 '23 at 14:09

Umar Zahid

17
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 07 '23 at 15:21

score 0 · Answer 15 · answered Mar 29 '23 at 07:16

0

I got this error in a Vue 3 application after updating Vite from v2.9.9 to v4.1.4.

It was solved after I cleared the cache in Firefox (How to clear the Firefox cache)

answered Mar 29 '23 at 07:16

Anna Madsen

384
3
15

score -2 · Answer 16 · answered Jun 25 '20 at 05:19

-2

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

answered Jun 25 '20 at 05:19

sathish kumar

1
1

2

Should not do this on a production server – Davy Oct 14 '21 at 14:52

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

16 Answers16

Linked