DEV Community

loading...
Cover image for How to add SSL to your localhost development environment using Ruby on Rails with Puma

How to add SSL to your localhost development environment using Ruby on Rails with Puma

matayoshimariano profile image Mariano Matayoshi ・3 min read

Hi readers!

Well, with the new update from Chrome from 80, if we have third party cookies you will need to add theSameSite=None; Secure , but this means that third party cookies will only be sent over HTTPS connection.

The following video is explaining this way better than me:

Also, I leave you guys a blog post from Chrome with the SameSite Cookie Changes.

OK, so if you are like me, who is developing services that shared a cookie between each other and using Ruby on Rails with Puma as your web server you will need to have HTTPS connection.

Creating a certificate

So the first thing you will need to do is to create a certificate for your service you want to add the HTTPS connection. Let's use mkcert to generate it, i'm going to localhost, but you can use whatever name you want

➜  ~ mkcert localhost
Using the local CA at "/Users/marianomatayoshi/Library/Application Support/mkcert" ✨
Warning: the local CA is not installed in the system trust store! ⚠️
Warning: the local CA is not installed in the Firefox trust store! ⚠️
Run "mkcert -install" to avoid verification errors ‼️
Created a new certificate valid for the following names 📜
- "localhost"
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

Now we should mark these cert as trusted, I'm working on a Mac computer, so not sure how to handle this particular part on Windows or on a Linux distro.

For Mac users open the Keychain Access and drag the certificate to the Keychain, the localhost.pem file, you could see some error, but it will end up adding it..

alt text

Double-click the cert you just added, click the -> Trust

alt text
alt text

And at the When using this certificate: select the Always Trust option.

alt text

Localhost on SSL

Now the interesting part:
In your puma config you will want to have something like this:

I ended up creating a local-certs folder inside config folder and pasted the cert and key there.
Then running bundle exec puma -C puma.rb will prompt something like this:

➜  ~ bundle exec puma -C puma.rb
[97] Puma starting in cluster mode...
[97] * Version 4.1.0 (ruby 2.3.8-p459), codename: Fourth and One
[97] * Min threads: 5, max threads: 5
[97] * Environment: development
[97] * Process workers: 2
[97] * Phased restart available
[97] * Listening on tcp://0.0.0.0:3001
[97] * Listening on ssl://0.0.0.0:3000?cert=config/local-certs/localhost.pem&key=config/local-certs/localhost-key.pem&verify_mode=none&no_tlsv1=false&no_tlsv1_1=false
[97] Use Ctrl-C to stop
[97] - Worker 0 (pid: 105) booted, phase: 0
[97] - Worker 1 (pid: 108) booted, phase: 0

And if you go to https://localhost:3000, you will see something like this🤘

SSL on localshot:3000

Hope it helps you to sort out the Chrome update, ping me here or follow me on Twitter, StackOverflow, LinkedIn or Github :)

Mariano Matayoshi (matayoshi.mariano@gmail.com)

Discussion (1)

Collapse
ccastillop profile image
ccastillop • Edited

Hello Mariano,
Thank you for your post.

I tried all the steps and at last I obtained, with Chrome an Brave, a ERR_SSL_PROTOCOL_ERROR

With curl -v https://localhost:3000 I got error:1400410B:SSL routines:CONNECT_CR_SRVR_HELLO:wrong version number

Do you have any idea what is happening?

Thank for your time :)

bundle exec rails server 
=> Booting Puma
=> Rails 6.1.3 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.7 (ruby 3.0.0-p0), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
* Listening on ssl://0.0.0.0:3000?cert=config/local-certs/localhost.pem&key=config/local-certs/localhost-key.pem&verify_mode=none&no_tlsv1=false&no_tlsv1_1=false
Use Ctrl-C to stop
2021-05-02 19:08:17 -0500: HTTP parse error, malformed request (): #<Puma::HttpParserError: Invalid HTTP format, parsing fails.>
Enter fullscreen mode Exit fullscreen mode
Forem Open with the Forem app