React-devtools: Firefox blocks React dev addon when CSP set, regardless of what is whitelisted.

[DDR0]

Do you want to request a feature or report a bug?
Bug.

What is the current behavior?
Firefox blocks the dev addon with the message:

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src http://localhost:8002 'unsafe-eval' data: https://maps.googleapis.com https://www.google-analytics.com https://unpkg.com"). echopay:1:0
"Download the React DevTools for a better development experience: https://fb.me/react-devtools" react.15.3.2.js:6909:9

Despite my csp section being:

script-src 'self' 'unsafe-eval' data: https://maps.googleapis.com https://www.google-analytics.com https://unpkg.com;

(I believe that 'self' is being subbed in with http://localhost:8002 by Firefox 45.3, since the same CSP setting works in Chromium 53.0. When the addon tries to load, it loads from 'self' as opposed to http://localhost:8002. 'self' shows up in the policy when I look at the headers themselves on a request, which tells me I got the CSP serving correctly to FF.)

React will start up in the dev tools, but it will never connect to my react web app. (It just says "Looking for React...")

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar.
Install the Firefox React dev plugin and visit http://24.85.23.206:8002/admin-panel, if I've left my development machine running. Note the CSP violation in the dev console.

What is the expected behavior?
The addon should work if self is an allowed script-src. Indeed, it _should_ work whatever my CSP is.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React plugin 0.15.3 (from https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
Firefox 45.3 is affected.
OS: Debian 8

[ngyikp]

Try adding 'unsafe-inline' for script-src, the problem is the extension tries to inject an inline script but it is denied by CSP.

Or you could try the Electron app as a workaround.

[DDR0]

Thanks. I can't develop with unsafe-inline on consistently, though, as I'm not willing to enable it in production just for the react dev tools. I don't want to end up missing some inline piece of script in dev, only to eventually catch it in staging. (The dev tools do work in Chromium, so I'll just use them there for now.)

[gaearon]

Is this something you could file with Firefox? I'm not sure what the actionable takeaway is for us.

[gaearon]

Closing for lack of information. If you’re interested in fixing this, please contribute!

[julienw]

Related bugzilla issues:
https://bugzilla.mozilla.org/show_bug.cgi?id=1267027
https://bugzilla.mozilla.org/show_bug.cgi?id=1294996

[CamJN]

I have a suggestion for how to make this a bit nicer for those affected, though I'm not a CSP expert so if this won't work hopefully someone will correct me. You could add a nonce to the injected <script> tag and mention it in the readme. Then people could add that nonce to their CSP, which would enable the addon, while allowing them to develop with CSP enabled.