Trust https://localhost:3000/ of MEAN stack in Chrome & Mac

Question

I use Chrome in macOS Sierra 10.12.3. I guess I have already set up ssl for localhost long time ago. Now, both http://localhost/ and https://localhost/ in Chrome return the list of folders under localhost. I have created a nodejs app. So after typing npm start in a command line to run the server, we could open http://localhost:3000/#/home as frond-end in Chrome.

Now, for some reason, I need to make https://localhost:3000/#/home work in Chrome. At the moment, it gives This site can't be reached; localhost unexpectedly closed the connection error.

Does anyone know how to amend this? Should I set up something in mac or in the code of my app?

Edit 1: I have found this page: SSL/HTTPS server with Node.js and Express.js. So I generated the files and modified the node code. Now loading https://localhost:3000/#/posts/editor/ displays the page, but I want to remove the annoying Not Secure warning.

As the above screenshot shows, I was able to view its certificate (though there is an error ERR_CERT_COMMON_NAME_INVALID). I copied the certificate to the desktop and dragged it to login of the Keychain Access tool and modified its setting to Always Trust. I restarted Chrome, reloaded the page, but the Not Secure warning is still there.

Could anyone help?

Interfaith

Stack Overflow is a site for programming and development questions. This question appears to be off-topic because it is not about programming or development. See What topics can I ask about here in the Help Center. Perhaps Super User or Unix & Linux Stack Exchange would be a better place to ask. Also see Where do I post questions about Dev Ops? – Kato

"I guess I have already set up ssl for localhost..." - Also see How do you sign Certificate Signing Request with your Certification Authority and How to create a self-signed certificate with openssl?. – Kato

Answer 1

There are actually lots of threads about this issue, which are quite confusing. I write the way that works for me.

1. I have finally followed this page to generate the files http://blog.mgechev.com/2014/02/19/create-https-tls-ssl-application-with-express-nodejs/. Note that I set localhost as Common Name (not sure if it's really mandatory).

2. In www of my MEAN project

   var fs = require("fs");
   var config = {
       key: fs.readFileSync('key.pem'),
       cert: fs.readFileSync('cert.pem')
   };
   var server = https.createServer(config, app).listen(3000);
   

3. In Chrome, I open https://localhost:3000/#/new, then I go to the Security tab of Dev Tools to view its certificate. Then drag the certificate to the desktop.

4. Double-click the certificate on the desktop, which opens Keychain Access. Make sure the certificate is in login (not necessarily system). If it's not, then drag the certificate in login.

5. Change everything to Always Trust

6. (maybe restart Chrome), after npm start the application, enjoy surfing https://localhost/#/new with Green Secure Light.

Interfaith

Answer 2

Are you sure you setup a Certificate Authority? Perhaps you only setup https in your code but forgot to setup a local Certificate Authority for your app to validate a certificate with. If this is the case please reference: http://www.techrepublic.com/blog/apple-in-the-enterprise/create-your-own-ssl-ca-with-the-os-x-keychain/

Earthwork

This next error you are facing is likely caused by the fact this is a self-signed certificate that does not come from a root level Certificate Authority. Essentially you should just need to add an exception for this in chrome. Please reference: linkedin.com/pulse/… – Earthwork

I don't see On the "Certificate Store" screen of the import... please see my update... – Interfaith