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.

Answer 1

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

Answer 2

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.