loading...

HTTPS localhost Really easy way to use HTTPS on localhost

rhymes profile image rhymes ・1 min read

Testing if your site works well on your local machine is always burdensome.

I found a tool that makes it really simple, mkcert:

➜  localhost-https mkcert -install
Using the local CA at "/Users/.../mkcert" ✨
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊
The local CA is now installed in Java''s trust store! ☕️

➜  localhost-https mkcert localhost
Using the local CA at "/Users/.../mkcert" ✨

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem"

Then you can test with a simple HTML page:

➜  localhost-https cat index.html
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: index.html
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ <html>
   2   │ <body>
   3   │ HELLO WORLD
   4   │ </body>
   5   │ </html>
───────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
➜  localhost-https ./node_modules/http-server/bin/http-server -S -C ./localhost.pem -K ./localhost-key.pem                                                                                                                         [18:12:41]
Starting up http-server, serving ./ through https
Available on:
  https://127.0.0.1:8080
  https://192.168.1.69:8080
Hit CTRL-C to stop the server

this is the result:

GitHub logo FiloSottile / mkcert

A simple zero-config tool to make locally trusted development certificates with any names you'd like.

mkcert

mkcert is a simple tool for making locally-trusted development certificates. It requires no configuration.

$ mkcert -install
Created a new local CA at "/Users/filippo/Library/Application Support/mkcert" 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊
$ mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1
Using the local CA at "/Users/filippo/Library/Application Support/mkcert" ✨
Created a new certificate valid for the following names 📜
 - "example.com"
 - "*.example.com"
 - "example.test"
 - "localhost"
 - "127.0.0.1"
 - "::1"
The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem" ✅

Chrome and Firefox screenshot

Using certificates from real certificate authorities (CAs) for development can be dangerous or impossible (for hosts like example.test, localhost or 127.0.0.1), but self-signed certificates cause trust errors. Managing your own CA is the best solution, but usually involves arcane commands, specialized knowledge and manual steps.

Posted on by:

rhymes profile

rhymes

@rhymes

Software developer @ Forem

Discussion

pic
Editor guide
 

OK, but, what version of cat is that? Never seen anything like it. And how do you turn the extra stuff off?

 

Hi John,

it's bat aliased to cat :-)

And how do you turn the extra stuff off?

what do you mean?

 

I just meant if you wanted the standard behaviour of cat, because if you did cat file.txt > otherfile.txt that formatting would cause you to have a bad time, OK?

Ah ok!

No, it doesn't happen:

➜  ~ unalias cat
➜  ~ cat > filea.txt
this is a file written with standard cat
➜  ~ bat filea.txt
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: filea.txt
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ this is a file written with standard cat
───────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
➜  ~ bat filea.txt > fileb.txt
➜  ~ cat fileb.txt
this is a file written with standard cat

I'm curious to how it knows to change the output depending where the output is directed to. Like aren't both stdout from the point of view of bat?

You can detect if the output is being redirected with POSIX functions isatty(3) and fstat(2)

 

I'm not that familiar with Docker so I don't know. The tool is a standard Go binary and I guess if you open the port of the web app serving you might accomplish something.

You need to root in your container to install it though, just downgrade your permissions after that.

 

Hope it works well with Rails. I have had so much trouble trying to a local HTTPS server running with Rails :( I almost always end up using ngrok.

 

Works fine with rails. After creating / installing your certificate as described in the article, start your rails server via rails s -b 'ssl://localhost:3000?key=./localhost-key.pem&cert=./localhost.pem'

 

Let me know, I haven't tried :)

 

Hey, that's really useful, thanks for sharing!

 

Why? You can create a test domain or subdomain and use letsencrypt.

 

You can also use ngrok, mkcert seems easier than all the options I can think of, ngrok included

 

Yes, but letsencrypt will work even if someone else is accessing your dev server and the effort isn't any bigger, so why bother creating local certificates if you can create a valid one?

Can you write an article about it? It would be useful for everyone. Thank you!

 

Do you know if this works with a XAMPP or LAMPP localhost server? I would like to use this for my wordpress projecs.

 

I believe so, it's independent from the technology of the server. It just needs to support TLS.

I'm not familiar with either XAMPP or LAMPP but judging from a search engine query you need a tutorial on how to use a certificate with Apache. This seems a valid one (from Step 2): digitalocean.com/community/tutoria...

 

Thanks, in the past I tried some tutorials and other techniques but I found difficult to install them in the browser "trust stores", this one seems easy, I will give it a try!

 

Thanks
Thanks
Thanks
Thanks
Thanks
Thanks 🙏

 
 

Can I use this with Next.js?

 

I'm not familiar with Next.js but it's language agnostic. As long as you can point a web server to the certificate you should be able to use it!

 

I figured it out. I used a custom server and pointed it to the certificate. Thanks!

 

This is exactly what I needed....trying it right now...thanks for sharing!