Trust https://localhost:3000/ of MEAN stack in Chr

问题:

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?

回答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.

回答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/