49

I am deploying a React app but am getting a strange error when I visit the page over https.

When I visit the page over https I receive the following error:

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

But when I go to the page over http it works perfectly.

The problem is I'm not using websockets as far as I can tell. I searched through the code to see if there is a request to http that should be to https or to ws: instead of wss: but I don't see anything.

Has anyone run into this before?

I am including a copy of the package.json file. Let me know if you need me to upload any other parts of code to help debug.

Thanks in advance.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "baffle": "^0.3.6",
    "cross-env": "^6.0.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-player": "^1.14.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-typist": "^2.0.5",
    "webpack-hot-dev-clients": "^2.0.2"
  },
  "scripts": {
    "start": "cross-env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Improve this question

10 Answers 10

Reset to default
61

For folks waiting for react-scripts for a patch:

For local testing over https, you can manually edit

node_modules/react-dev-utils/webpackHotDevClient.js

Here's the code you'll want at line 62 of that file:

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

For deployment follow below steps:

npm install -g serve // This can be done locally too

npm run build

And Then in your package.json add a deploy script to work with serve:

"scripts": {
    "deploy": "serve -s build",
}

And then

npm deploy or yarn deploy

Hope this answer helps you get rid of the error.

For more info refer to here`

This bug has been fixed in the latest version of the release. Click here to see the source file

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

i have the same issue, so I just have to edit this file inside node modules ?
@Versifiction yes. This has to be done until a new react-sripts patch is released.
probably shouldn't be modifying the node_modules manually as these won't be committed to the shared repo
So I am having the same issue and I am deploying my app to heroku. I even forcefully committed just websocket file and deployed it to heroku but I still get the same error, anyone have a work around to this? The only thing I haven't tried is committing the whole node_modules directory.
@TylerStrouth Is there a possibility that you can edit the node modules in Heroku?? Once you deployed to heroku it install the packages mentioned in package.json. This way the changes you made in the above file also gets override. Try editing the file inside node modules in heroku.
|
16

A lot of answers here do actually solve the issue but the simplest way I have found since I asked this question is to add npm package serve to your dependencies.

yarn add serve or npm i serve

and then replace your start script with the following:

"scripts": {
    "start": "serve -s build",
}

This is actually straight out of the create-react-app docs

Improve this answer

2 Comments

this does not work for me I get a 404 error when I launch my server locally
Sorry for late response, you would need to create a another script for local development. For example. "dev": "react scripts start" The you would run npm run dev to run locally.
12

There is a transport security requirement as you might have requested the page with https://

Replace ws:// with wss://.

This indicates that you want a secure websocket connection.

Improve this answer

Comments

9

Here's a simpler solution. Downgrade your react-scripts to 3.2.0 in your package.json (mine was at 3.3.0).

You may need to delete your package-lock.json and node_modules (rm -rf package-lock.json node_modules), then do a npm i. Commit both your new package.json and package-lock.json to the repo.

Improve this answer

1 Comment

Worked for me. Initially it kept reverting to 3.3.0 because I was instinctually running the suggested audit fix after npm install finished.
5

It's been a while since I was messing around with react, but react-scripts is built on top of webpack if I'm not mistaken, so it most likely use webpack-dev-server to speed up development. It uses websockets in order to communicate to the client to trigger a hot reload when it discovers changes on disk.

You are probably just starting the application in development mode, so if you're deploying it to a production environment, you should run npm run build which would create a set of javascript files that you can serve with your favourite webserver.

Improve this answer

7 Comments

That sounds right, thank you! I will try that and let you know if it works.
I am having exactly the same problem, I have run npm run build for deploying it to GitHub pages but it didn't work, so tried Heroku I get the above-mentioned error, it works on HTTP if I make an option to load unsafe scripts. Solution to make it secure and make this error get resolved would be helpful!
@Ganesha, then you're doing it wrong. You need to do a npm run build and upload only the contents in the build directory.
It's a problem with the react scripts 3.3.0 version. You can find the detailed documentation here "github.com/facebook/create-react-app/pull/8079". I downgraded react to scripts - 3.2.0 and I am getting no error now
@monsterpiece, strange. That was not the result when I tested although I didn't test on heroku, but locally. It might be that the env is a problem so it's probably always best to explicitly mention it. NODE_ENV=production npm run build, and then upload only the build directory to heroku (that is, build will be your webroot on the webserver, no need for node on the server unless using ssr). The production build should not have the webpack dev server even included, I would say that's a bug in that case.
|
4
  • Create in the back of the folder and node.js app
  • Create express router in the root of your app
  • Make a server.js file

Add this code into server.js

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

Into to pakage.json

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

And add the route proxy in to /folder-name-react-app/pakage.json

  "proxy": "http://localhost:8080"
Improve this answer

Comments

3

I solved this problem by setting 'https' property of devServer to true. the doc is here. webpack dev docs

enter image description here

Improve this answer

2 Comments

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
yes, I deal it by setting 'https' property of devServer to true, it's work in development. thx
1

anyone who is struggling with this issue on heroku deployment downgrade you reac-scripts module to 3.2.0 .

  1. remove package-lock.json file
  2. remove node_modules folder
  3. replace react-scripts version to 3.2.0
  4. npm install all modules again
Improve this answer

Comments

1

Simple to solve the issue by three steps

  1. set "react-scripts": "3.4.0" at package.json
  2. run [npm install]
  3. deploy to your host again, here I use an Azure NodeJS App Services https://fila.azurewebsites.net/Location and http://fila.azurewebsites.net/Location

Yes, react-script version 3.2.0 is also ok but react-scripts 3.3.0 only run with http

Good luck Thomas

Improve this answer

Comments

0

You need to look at this article from Create-React-App website. It explain how to deploy React app created with 'Create-React-App' properly which point to specific buildpack for React app, mars/create-react-app-buildpack, at Github that you needed when creating Heroku app.

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

I had the same problem with insecure websocket issue everyone is having here, so I tested the solution from Create-React-App article. It solved the problem. No need to modify node_module or anything.

All you need to do is us this command when creating heroku app from CLI at the root of React app:

heroku create --buildpack mars/create-react-app

then:

git push heroku master

when you go to your website at Heroku. it will run as expected without any "insecure websocket" error.

(I don't know how to add mars/create-react-app buildpack to it AFTER you already created/deployed to Heroku. I haven't got to that part yet.)

The above solution seems to be addressing the issue that the team of create-react-app have for deploying to Heroku.

Improve this answer

1 Comment

to add buildpack AFTER it was deployed to Heroku, go to Heroku app page-> 'Setting' tab -> 'Buildpacks' section. You add mers/create-react-app then click 'Add Buildpack' button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.