Generate a secure & valid self signed certificate for localhost in all the browsers in Mac and Windows virtual machine

Question

I wanted to generate a valid certificate for localhost in Mac and 192.168.1.1 in Windows virtual machine. I followed this thread in Mac:

[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.1,IP:127.0.0.1

And the command:

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

Then, I exported the certificate from Chrome and trusted it in Keychain Access in Mac and certmgr in Windows. It worked well. And I believe that the certificate was also secure without red warning.

However, today, I realize that, it shows a "Not Secure" red warning in Chrome, then I tried in different browsers, in Mac and Windows virtual machine. It returns different results as below.

Does anyone know how to generate a secure & valid self signed certificate for localhost in all the browsers in Mac and Windows virtual machine?

Not Secure with Chrome Version 109.0.5414.119 (Official Build) (x86_64) in Mac:

Not Secure with Firefox Version 109.0.1518.70 (Official build) (64-bit) in Windows virtual machine:

Not Secure with Firefox 109.0 (64-bit) in Mac

Secure with Edge Version 109.0.1518.70 (Official build) (64-bit) in Windows virtual machine:

Secure with Chrome Version 109.0.5414.120 (Official Build) (64-bit) in Windows virtual machine:

Answer 1

I realize that it is because my frontend calls a backend https://localhost:3000 whose certificate is not valid.

I then use the same certificate in https://localhost:3000 as in https://localhost:8000. There is no Not Secure red flag anymore.