SecurityError: The operation is insecure - React Heroku

Question

I am trying to deploy an application I created using create-react-app. It works locally just fine. But when deployed on Heroku, the following error is shown:

SecurityError: The operation is insecure.

I am using the Pusher library to make a reactive notepad, but I don't see how to deloy it correctly on heroku. I have tried on firefox, chrome and edge but it seems not to be working.

It indicates the problem is in the /app/webpack/bootstrap.

  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;```

Any ideas on how to solve this error would be much appreciated.

score 3 · Answer 1 · answered Dec 24 '19 at 20:00

I've just run into the same issue. Perhaps surprisingly the error traces didn't match up with the real error. Check your JavaScript console for an error for the "CSP" or "Content Security Policy". The solution is to allow the server's web socket in your Content Security Policy.

https://github.com/w3c/webappsec-csp/issues/7

Declaring a CSP with connect-src ‘self’ will not allow websockets back to the same host/port, since they're not same origin. This might come as a surprise to developers that haven't studied the CSP specification in detail and have a firm grasp of the same origin security model.

Modify your public/index.html to include this connect-src:

<meta http-equiv="Content-Security-Policy" content="
      ...
      connect-src 'self' wss://host:port ws://host:port; <% // Remove ws:/wss: after https://bugs.webkit.org/show_bug.cgi?id=201591 is fixed %>
      ...
    " />

Assuming it's a development server and not intended for production, use this instead:

<meta http-equiv="Content-Security-Policy" content="
      ...
      connect-src 'self'<%= process.env.NODE_ENV === 'development' && " ws:" || "" %>; <% // Remove ws: after https://bugs.webkit.org/show_bug.cgi?id=201591 is fixed %>
      ...
    " />

The bug tracking this for Safari: https://bugs.webkit.org/show_bug.cgi?id=201591

David Krause · Answer 2 · 2019-12-28T23:44:50.170

I think Stephanfalcon is on the right track. All you'll need to do temporarily is use react-scripts 3.2.0. I filed this bug with create-react-app:

https://github.com/facebook/create-react-app/issues/8250

In react-scripts 3.3.0 they changed the protocol of the websockets from:

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

to:

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

Reading related issues on the Create React App Github it sounds like they will have this fixed in react-scripts 3.3.1.

So on the issue that I posted I was quickly corrected. We see this message because we are deploying the development build. To fix this change your start script in your package.json to ```npm install -g serve && serve -s build``` and you should be good. — David Krause, Dec 29 '19 at 02:29

score 1 · Answer 3 · answered Dec 18 '19 at 15:09

I ran across the same issue. I couldn't find a solution.

Until someone figures it out, I have a workaround, with Docker.

Put a Dockerfile in the project root folder.

FROM node:alpine

ENV NODE_ENV=production

WORKDIR /usr/src/app

COPY . .

RUN npm i\
 && npm run build\
 && npm i -g serve

CMD serve -s build

And run these heroku commands with the Heroku CLI

$ heroku container:login
$ heroku container:push web
$ heroku container:release web

I think this is pretty ghetto, so I just deployed my react app to github pages. But, I guess if I really wanted it to be on Heroku, I'd have done this.

score 1 · Answer 4 · answered Dec 19 '19 at 22:25

been dealing with this problem for about a week now.

This isn't a great solution but it works.

go to your package.json file
remove dependencies
replace with these previous version:
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
npm install in terminal
push to heroku

really stupid but is worked for me.

SecurityError: The operation is insecure - React Heroku

4 Answers4