Self signed certificate only works with localhost, not 127.0.0.1

Question

I'm trying to generate a self-signed certificate such that my local development environment uses HTTPS, but I'm having some trouble. The reason for this is that I want to test push notifications on my phone through my local network (through my local IP 192.168.1.155 ) and notifications only work via a secure context.

It only seems to work when I go to localhost:8080 , and is still insecure when navigating to 127.0.0.1:8080 . When I navigate to 127.0.0.1:8080 Chrome's Security Page says: This site is missing a valid, trusted certificate (net::ERR_CERT_COMMON_NAME_INVALID).

Here's my setup I use to generate the certificate:

req.cnf:

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = US
ST = VA
L = SomeCity
O = MyCompany
OU = MyDivision
CN = 127.0.0.1
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = 127.0.0.1
DNS.3 = 192.168.1.155

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

I'd imagine perhaps my CN or alt_names is incorrect, but I'm not sure what to change them to such that the site will always work securely (either via localhost, 127.0.0.1, or 192.168.1.155)

Answer 1

In an unforseen case of rubber duck debugging, I seem to have finally solved this issue momentarily after posting it. Here's what I did:

req.cnf:

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = US
ST = VA
L = SomeCity
O = MyCompany
OU = MyDivision
CN = localhost
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = DNS:localhost,IP:192.168.1.155,IP:127.0.0.1

command prompt:

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

Then navigate to the page in Chrome, save the certificate (as it will still be invalid) as a DER file and then using mmc.exe , import it into the Trusted Root Certification Authorities on your machine (this is assuming you're using Windows)