Express: X-Content-Type-Options blocking all css and js

[mohanen]

X-Content-Type-Options is been set to nosniff in express libraries and i am not able to override em from my code , its completely blocking my css and js .

[dougwilson]

I'm sorry to hear your issue. I'm confused, though, ad that hear is only set for content we control, so I'm not sure why it would affect your own content. Can you help us reproduce the issue?

1. Version of Node.js
2. Version of Express.
3. Code we can run to reproduce the issue.
4. Instruction on how to run the code, what we will see that indicates the issue and what you expect to happen.

Thanks!

[matheuslc]

@mohanen You can't set Content-Type properly?

[mohanen]

node v6.10.0 LTS

run the attached aws labs sample app

eb-node-express-sample.tar.gz

The resource from “http://127.0.0.1:3000/static/bootstrap/css/theme/flatly/bootstrap.css” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). 127.0.0.1:3000
The resource from “http://127.0.0.1:3000/static/bootstrap/css/jumbotron-narrow.css” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). 127.0.0.1:3000
The resource from “http://127.0.0.1:3000/static/jquery/jquery-1.11.3.min.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). 127.0.0.1:3000
The resource from “http://127.0.0.1:3000/static/bootstrap/js/bootstrap.min.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). 127.0.0.1:3000
ReferenceError: $ is not defined[Learn More] 127.0.0.1:3000:91:5

[dougwilson]

Hi @mohanen I don't see any code in your app that would actually serve up the files you listed above. All of those are giving 404 Not Found when I run your app, and since the 404 Not Found is HTML, it doesn't match the expected MIME type.

Did you forget to add a app.use('/static', express.static(__dirname + '/static')) in your app file? That fixes the issue for me.

[mohanen]

Yea thanks that fixed the issue . Sorry for the wrong issue report , my bad.

[dougwilson]

It's no problem, glad we were able to get to the root :) I'm not sure why the web browsers need to be so terse--just wait until you need to start using CORS :)

[DamianRutkiewicz]

Hi, where should i paste app.use('/static', express.static(__dirname + '/static')) ? Which file ?

[mohanen]

Hi @DamianRutkiewicz ,

app.use('/static', express.static(__dirname + '/static')) this is a specific answer for the issue .
like localhost:3000/static will serve the files in folder static

You just need set up express to serve the static files like css/images/js etc...

The Documentation explains clearly how to do it , You should take a look at it
https://expressjs.com/en/starter/static-files.html

[mike-aungsan]

I am having the same issue with latest Chrome Version 65.0.3325.181 (Official Build) (64-bit)

express.static does not return the right MIME type.

Express Version : 4.16.2 / 2017-10-09

[mike-aungsan]

@mohanen can you reopen this issue?

[SetTrend]

I'd like to add the following information as it may help new users searching for this issue:

This is sort of a "404 Not Found" error message. Have a look at your browser's DevTools network request section and you'll see that the requested files simply have not been served by Express.

Reference: https://stackoverflow.com/questions/40728554/resource-blocked-due-to-mime-type-mismatch-x-content-type-options-nosniff