how to start https server with SSL cert?

[mksuper1]

Hi,

I am able to start the https server in windows using set HTTPS=true&&npm start.
Is it possible to pass the SSL cert and key to the https server?

e.g. for node http-server, I can start the https server with
http-server S -C c:\cert\server.pem -K c:\cert\server.key.

How do I achieve the same result for create-react-app?

[Reanmachine]

The development server

You can't currently, react-scripts uses webpack-dev-server and it would need to pass key/cert files in this configuration block.

The better question is why do you want to pass a specific certificate for your dev server? You're not really gaining much other than identity verification (which you're in control of the server so you know the identity). The self-signed default certificate it uses may not be "valid" but will still encrypt the data in transit which will protect the data if your dev server is across an untrusted network.

The production server

See the discussion in #1409 for details about HTTPs in production.

[gaearon]

I’m going to close since it doesn’t seem really necessary in DEV, and it would either require configuration, or having some sort of convention for the filenames of the cert. If you feel strongly about this feel free to send a PR that uses a filename convention for them, and we can review it.

[bitsandbytes]

I'm surprised this was closed. Two-way client authentication is a typical part of our webapp's security design. And create-react-app does a lot to make developers' lives easier, so getting rid of the pesky security error would be nice.

Our particular use case is:

1. Install self-signed CA chain on both server and browser.
2. Install user's cert in browser, and server's cert in server.
3. When a browser connects, verify the user's cert's CA chain matches the server's.

So part of our development includes writing/testing the code that handles (3) above. This is not currently possible using the dev server.

[gaearon]

Can you raise a new issue and describe your proposal in more detail? It's not clear to me what we should do to enable this. We do support HTTP=true environment variable which switches HTTPS mode in WebpackDevServer but I presume you need something more.

[bitsandbytes]

You're right my above comment wasn't clear and was conflating the original request with 2-way authentication. I've submitted #2759.

[jamesmfriedman]

I have the same issue, I need to pass a certificate file in to webpackDevServer like so

https: {
  key: path/to/key/file,
  cert: path/to/pem/file
}

[disaacson]

I'm running into this in dev as well. The use case is using some web services that use HTTPS, and browsers not allowing HTTP and HTTPS to be mixed on the same page for security reasons.

[jamesmfriedman]

@disaacson check out the epic hack I found to get this working #2759 (comment)

[tobias74]

The Use-Case: Developing a webapp that uses websockets.

Websockets will be declined by chrome with unsecure self-signed certificates.

[mihir0x69]

I just made this change to scripts/start.js.

before-

    const devServer = new WebpackDevServer(compiler, serverConfig);

after-

    const devServer = new WebpackDevServer(compiler, {
      ...serverConfig,
      https: true
    });

Webpack dev server creates the certificate. Just navigate to https://localhost:3000, allow chrome to visit the site and you're good to go. It goes without saying that this is not a good practice. But a quick fix.

[roniger]

Looked at the code and it seems to be sensitive to an environment variable called HTTPS.
Changed my start script to HTTPS=true react-scripts start and it automatically generates the certificates and opens with https.
Looking on how I can supply my own certificate. Let me know if that interests any of you and I will share my findings :)

[sshadmand]

+1 for

how I can supply my own certificate

[roniger]

You will need to save your certificate as a pem file with the name server.pem into your node_modules/webpack-dev-server/ssl

Hope this helps

[jh0l]

if you run chrome enabling this seems to work

chrome://flags/#allow-insecure-localhost

[A4Abhiraj]

Why was this closed?
I'm requesting rss feed from a wordpress site. Now wordpress won't accept cross origin requests from a non secure origin. I don't understand the security implications behind this but I'm sure the guys at wordpress won't enable it for me.

[itnirmaan]

I used following in start.js
At start

process.env.HTTPS = 'true';

and in WebpackDevServer

{
      ...serverConfig,
      https: {
        key: fs.readFileSync( "/path/server.key"),
        cert: fs.readFileSync("/path/server.crt")
      }
}

[eladmoshe]

@roniger solution is great, thanks.
I added to my package.json's scripts section a postinstall script that create a symlink from the local development certificate into the appropriate node_modules folder. This make sure the certificate is always in the right place, even if someone clones the repo, delete and reinstall node_modules etc.
Here is the gist if it helps someone.