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)

Unbolted

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)

Unbolted

To explain why your rubber duck debugging succeeded: in your original certificate you had 127.0.0.1 defined as DNS type in subjectAltName instead of IP type. This was fixed with the new certificate. – Schwartz

Answer 2

Another option for development proposes is set a flag in chrome. In the URL bar go to

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Enable it and be sure to add your IP with the port of your dev server in the box provided

Padilla