josefrichter

Self signed certificate on localhost

Hi,

I have a LiveView that loads a Vimeo player in an iframe, so the src is https.

For this to work on localhost, it seems I need to serve everything over https.

I tried the standard config to generate certificates with mix phx.gen.cert and do the additional endpoint setup:

config :fairpay, FairPayWeb.Endpoint,
  http: [port: 3000],
  https: [
    port: 4000,
    cipher_suite: :strong,
    keyfile: "priv/cert/selfsigned_key.pem",
    certfile: "priv/cert/selfsigned.pem"
  ]

When I initially run this, I get the browser warning about insecure site, and click to continue anyway.

But then I’m always getting

This site can’t be reachedThe web page at https://localhost:4000/ might be temporarily down or it may have moved permanently to a new web address.
ERR_HTTP2_PROTOCOL_ERROR

In Chrome I enabled Allow invalid certificates for resources loaded from localhost. I also tried to add the test certificate into my Keychain Access into System keychains.

In console, I see the server is running and actually responding, it’s just in the browser it behaves as if the server was down. I tried pretty much everything I was able to find, but now I’m out of ideas.

Any suggestions what should I check or try, please? Thank you very much.

7 comments

/phoenix #https #localhost

0 4965 7

2023-05-17 22:29:06 UTC

Most Liked

arcanemachine

I’m not an expert on the subject, but I believe there is some certificate management process on your computer that needs to approve the certificate. It’s not enough just to make the certificate.

I recommend disabling HTTPS in your Elixir code and use Caddy as a reverse proxy to manage the HTTPS automatically. Seriously, if you haven’t tried Caddy, it’s amazing, especially coming from nginx with its opaque, obtuse configuration requirements.

Basic steps for Caddy (may be slightly different depending on your OS, assuming Debian-ish Linux here):

Install Caddy: Install — Caddy Documentation
Ensure Caddy is running: sudo systemctl start caddy
Allow Caddy’s self-signed certificates: sudo caddy trust
Backup the default Caddyfile (it’s a handy reference): sudo mv /etc/caddy/Caddyfile /etc/caddy/Caddyfile.bak
Create a new Caddyfile that reverse-proxies your project’s port:
- sudo sh -c "echo 'reverse_proxy :4000' > /etc/caddy/Caddyfile"
Validate the new Caddyfile: cd /etc/caddy && sudo caddy validate
Load the new Caddyfile: cd /etc/caddy && sudo caddy reload
Now your site should be accessible via HTTPS: https://localhost/

Caddy is amazing.

If you’re dead set on managing your certs manually, try using mkcert. Like Caddy, it manages that whole “trust” thing easily. But I prefer Caddy because that way you’re not sticking a private key into your source control (or having Elixir complain because you pulled the repo and there’s no cert file there because you didn’t commit it to source control.).

Post #2

wceolin

I had a similar issue in the past and I had to use mkcert to make it work.

After you install mkcert, follow the steps below:

Create a cert directory under priv: mkdir priv/cert.
Generate a new certificate: mkcert -key-file priv/cert/selfsigned_key.pem -cert-file priv/cert/selfsigned.pem localhost.
Restart your local server.
Restart your browser.

Post #7

dwark

You might try https://127.0.0.1:4000, which browsers treat as more trustworthy than localhost
according to an letsencrypt article.
It also contains some tips on generating and installing your own certificates locally on the
machine and browser.

Post #1