How to correctly setup TLS/SSL on localhost using http-server?

Question

I'm using http-server to serve my local project through HTTPS. To create the key.pem and the cert.pem files, I followed the documentation:

First, you need to make sure that openssl is installed correctly, and you have key.pem and cert.pem files. You can generate them using this command:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

You will be prompted with a few questions after entering the command. Use 127.0.0.1 as value for "Common name" if you want to be able to install the certificate in your OS's root certificate store or browser so that it is trusted.

This generates a cert-key pair and it will be valid for 3650 days (about 10 years).

Then you need to run the server with -S for enabling SSL and -C for your certificate file.

http-server -S -C cert.pem

I used the openssl.exe come with the Git, and installed the generated certificate on Windows (onto the "Trusted Root Certification Authorities" entry). Here is the output after running the server:

Starting up http-server, serving ./ through https

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  https://10.20.30.232:8080
  https://192.168.56.1:8080 
  https://192.168.1.126:8080
  https://127.0.0.1:8080
Hit CTRL-C to stop the server

But, when I access the https://127.0.0.1:8080, I'm encountered with the following error on Google Chrome:

Your connection is not private
...
NET::ERR_CERT_COMMON_NAME_INVALID
Subject: 127.0.0.1
Issuer: 127.0.0.1
...
This server could not prove that it is 127.0.0.1; its security certificate does not specify Subject Alternative Names.

And, the following is the error message Mozilla Firefox presents:

127.0.0.1:8080 uses an invalid security certificate.
The certificate does not come from a trusted source.
Error code: MOZILLA_PKIX_ERROR_CA_CERT_USED_AS_END_ENTITY

https://127.0.0.1:8080/
The server uses a certificate with a basic constraints extension identifying it
as a certificate authority. For a properly-issued certificate, this should not
be the case.
HTTP Strict Transport Security: false
HTTP Public Key Pinning: false

So, what am I missing on setting up the HTTPS server to avoid the aforementioned errors?!

Answer 1

Chrome should accept this certificate if you explicitly list 127.0.0.1 as a "Subject Alternative Name" (SAN) of type IP. You can do so by adding -addext "subjectAltName = IP:127.0.0.1" to the openssl command:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem -addext "subjectAltName = IP:127.0.0.1"

Firefox complains about a very different issue, i.e. that a certificate with a basic constraints extension with CA:TRUE is being used as an end-entity certificate. See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1034124

You could try to generate the certificate without the basic constraints extenstion.

The shortcut solution would be to leverage existing solutions like https://github.com/FiloSottile/mkcert or https://github.com/davewasmer/devcert.