unsafe-eval in dev

[brandonmp]

I just added crossbuilder in a nested folder in another of my repositories (so it uses parent babelrc, eslintrc,etc.), so this problem could be related to my specific config, but wanted to share anyway.

When loading the extension and inspecting the background console, I get this error:

redux-devtools-extension.js:2 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' http://localhost:3000 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-CPbkA6xlx6EbHFrsB6YD4F99pTLewMUVM3xYm1Pt5hM='), or a nonce ('nonce-...') is required to enable inline execution.
e.injectOptions @ redux-devtools-extension.js:2(anonymous function) @ redux-devtools-extension.js:2(anonymous function) @ redux-devtools-extension.js:2target.(anonymous function) @ extensions::SafeBuiltins:19safeCallbackApply @ extensions::sendRequest:21handleResponse @ extensions::sendRequest:74
configureStore.js:33 GET STATE (configure, callback) {
  (0, _getStoredState2.default)(configure, function (store) {
    (0, _crossmessaging.onConnect)(function () {
      return { name: 'init', state: { counter: store.get… true

As the warning advises, I added the hash to manifest.dev.json, and it actually works fine (adding the unsafe-inline threw an error).

Is this a suitable solution? I thought the hash was a hash of the actual inline script, but when I make small modifications to the Counter component, the extension still injects it fine, so I assume I'm missing something.

[brandonmp]

error seemed similar to this, but looking @ the commit @jhen0409 references, it's not clear to me what it would affect in crossbuilder

[brandonmp]

upon closer inspection, it looks like the hash works for just injecting into https, but the description in the issue I linked above still applies--that is, it looks like the context is falling under the page's CSP (so CORs doesn't work, for example).

Is there a way to fix this? up to & including disabling hot-reload on https?

[zalmoxisus]

Seems like in the last versions of Chrome were added some restrictions for inlining scripts in the extension, so we cannot inject Redux DevTools Extension anymore. Using the hash is not a reliable solution because you'll have to change it everytime there's something new in Redux DevTools Extension. I'll figure out how better to handle it, and will update the extension.

For now you can just comment these two lines.

[zalmoxisus]

A possible solution would be to eval the Redux DevTools code, same as for the injected script:

const httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js');
httpRequest.send();
httpRequest.onreadystatechange = function () {
  if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
    eval(httpRequest.responseText);
  }
};

It would work in our case because the store is created asynchronously. But for most of other cases it will be executed after the store is created, thus DevTools enhancer will not be applied.

[zalmoxisus]

Thinking over, the best option would be to use remote-redux-devtools for extensions. So, we'll start remotedev-server together with webpack's developer server. It would be easier and more reliable than fetching and injecting Redux DevTools extension (we did it before because remote-redux-devtools wasn't released yet). In 3.0 there will be possible to inspect local and remote instances together in Chrome devpanel.

@jhen0409 what do you think? If you agree, I'll add a deprecation warning in redux-devtools-extension.js. I guess this is breaking now react-chrome-extension-boilerplate as well.

[jhen0409]

what do you think? If you agree, I'll add a deprecation warning in redux-devtools-extension.js. I guess this is breaking now react-chrome-extension-boilerplate as well.

Yeah it's breaking the boilerplate now. I agreed for use remote-redux-devtools instead. 👍