Create-react-app: Use valid cert for HTTPS in development

Created on 11 Nov 2017  路  7Comments  路  Source: facebook/create-react-app

Is this a bug report?

No. This is a question (for now) or discussion.

Which terms did you search for in User Guide?

HTTPS

Environment

  1. OS: Windows 10
  2. node -v: 8.4.0
  3. yarn --version: 0.27.5/1.0.0
  4. I haven鈥檛 ejected
  5. Browser: Chrome 62

Steps to Reproduce:

  1. Create a project
  2. Run: 'set HTTPS=true&&yarn start' (or npm start)
  3. Open https://localhost:3000 in the browser

Expected Behavior

Safe and secure HTTPS connection

Actual Behavior

Error message:

Your connection is not private


image

Main Question:

What I'm doing wrong and how to open secure connection without seeing errors or "unsafe connection warnings"?

proposal low (needs more information)

Most helpful comment

I fixed this in very interesting and tricky way:

  1. First I exported certificate from chrome (view this).
  2. Imported the certificate into Windows (using certmgr.msc).
  3. Allowed chrome://flags/#allow-insecure-localhost flag. - https://goo.gl/VBV6uR

And it works! Thanks to Samet Karaibryamov
image

The most interesting is that 1 and 2 can't fix the security error without 3 and 3 can't without 1 and 2.

All 7 comments

I fixed this in very interesting and tricky way:

  1. First I exported certificate from chrome (view this).
  2. Imported the certificate into Windows (using certmgr.msc).
  3. Allowed chrome://flags/#allow-insecure-localhost flag. - https://goo.gl/VBV6uR

And it works! Thanks to Samet Karaibryamov
image

The most interesting is that 1 and 2 can't fix the security error without 3 and 3 can't without 1 and 2.

Out of curiosity: Why is this needed?
My (random) thoughts:

  • The warning is correct, as the certificate is not signed by a CA.
  • npm run start should be used only for development and for that http should suffice
  • When we deploy to an environment any other user wants to access, we should ensure proper certificates are in place.

@Dubes I know all of these things, but... Google wants it. I requested verification request for using OAuth.
```
Dear Developer,
According to our information the following redirect URIs are not encrypted and secure.

post_message_origins: "http://localhost"
post_message_origins: "http://localhost:5000"

Please ensure your redirect URIs are encrypted and secure to ensure data theft does not take place.
It can be done by using an HTTPS protocol (a secure, encrypted connection).
Please reply back once you have updated all your redirect URIs for us to proceed with the verification process.

Sincerely,
Google Cloud Platform/API Trust & Safety

I'm not sure this is in scope of our project to fix, but I'm more than happy to accept a pull request and have some discussion about a possible solution for this.

Google shouldn't care if the cert isn't valid, I notice your error message says http:// and not https://, so maybe that's your problem?

It's going to be pretty low priority for us since you're the first to run into it (sorry!).

Yeah, you can add label priority: low, but please keep this open for discussion.
I'll try to learn more and if I can will open PR.

Closing as stale.

@Dubes you may use free CA like other js-lib do. I develop electron app, it can't open https://localhost:3000 if it has a invalid certificate, and, yes, use http can make it work, but it will be better as is support.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

riceyeh picture riceyeh  路  116Comments

gaearon picture gaearon  路  86Comments

andreypopp picture andreypopp  路  96Comments

benneq picture benneq  路  99Comments

gaearon picture gaearon  路  152Comments