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

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.