Nosniff error in FS app?

1

Hi all,

So, I have this error message when I attempt to browse the production mode of my app : any get request returns a 404
with the following fields :

  • Content-type: “text/html; charset=utf-8”
  • X-content-type-options: “nosniff”
  • Content-security-policy: “default-src self”

I understand it’s some added security in the browser to avoid attacks. But I don’t quite understand why I get this error.

Thanks for your kind help :slight_smile:

2

You have a security policy in your server that only allows content from “default-src self”, that should be only “self”, without “default-src”. This is just an educated guess, as i’m not sure if the error would display your complete string on the browser. If i were to debug it, I’d go there, though.

Here is an example of similar content policy configuration:

3

Thanks for your answer.

THe full console error message is as follows :

Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:5000”). Source: ;(function installGlobalHook(window) { ....

The installGlobalHook function seems to come from reduxdevtools, which i indeed used for dev.

However, even after I delete the reduxdevtools stuff from my index.js file, I still have that same error message that prevents my page from loading. And the same 404 returned by any server request.

Have you encountered this kind of error before ? I feel really stuck at this stage. I tried configuring reduxdevtools using its npm package, as described here (http://extension.remotedev.io/#usage), but that still doesn’t work.

About the solution your offered : I understood CSP is meant to avoid XSS attacks. Doesn’t redefining the CSP policy mean you sort of break that added security rules against XSS attacks ? (just asking, I don’t know enough about CSP and XSS and stuff yet)

4

Yes, but in a back end context. I cannot guarantee the message was exactly this one, however. But the same problem happened.

Not really, unless you add the IP of an attacker as an exception, you have nothing to worry about. The change you have to make is to allow your own local host machine and nothing else.

5

Well, that does not work. Thank you for your tip here. I read a bit about helmet and CSP, but it does not solve my problem.

What I don’t understand is the homepage loads fine. It successfully gets the css file, the bundle.js file, and the few pictures I have on the homepage. I can see my homepage structure from the react devtools.

However, from there I can’t do anything. Any navigation link returns a 404. But everything works fine in dev mode.

I must be missing something obvious here, but I can’t figure out what.

Any suggestion what I can do or check or test to move on ?

6

Can you paste your CSP configuration? Instead of the error.

7

I didn’t set any CSP configuration. I don’t know if that’s even necessary for my project. Here is my project github folder.

I have no idea what it is I am doing wrong at this stage. I suspect it has to do with react-router, but it could be something else.

Would be grateful if you had time to look at it.

8

There are some github issues about this problem, do you have cookies enabled? If you don’t, try enabling it and trying again. Try another browser, too, if it’s a browser problem at least you’ll have a lead on where to go next.
This seems to be the most informative thread: https://github.com/ReactTraining/history/issues/97

I’ve never had this exact problem so i can’t be of much help. But it happens often enough, just google “react-router content security” or “react content security” for more information.