Self signed certificate on localhost

Phoenix Forum Questions / Help
, ,
1

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.

2

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.

1 Like
3

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.).

3 Likes
4

using 127.0.0.1 doesn’t seem to help, other than showing a new “notice”

[notice] TLS :server: In state :certify received CLIENT ALERT: Fatal - Certificate Unknown

I still don’t understand whether this is actually a server issue or something on client side, or both. Tried both Chrome and Safari, same issue on both.

Edit: also came across this, linked here from the forum, but don’t understand whether that’s something Erlang generic, or specific to that package: APIacAuthMTLS — apiac_auth_mtls v1.0.0

5

Well, I’m not an expert on certificates either, but the “notice” seems to suggest that your
local browser (the client) isn’t trusting the vimeo’s certificate. In Making and trusting your own certificates
they suggest how to create your own certficate but donot detail how you make your browser trust
your own certificate. They also hint at using www.localhost and modifying your /etc/hosts file
accordingly, since that seems to have an effect on how browsers behave. Also, you could browse to
the vimeo (local) link and inspect the certificate presented and how the browser treats it…

6

try this

config :my_app, MyAppWeb.Endpoint,
  # Binding to loopback ipv4 address prevents access from other machines.
  # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
  http: [
    port: 5001,
    protocol_options: [
      idle_timeout: 1_800_000
    ]
  ],
  https: [
    ip: {0, 0, 0, 0},
    port: 5000,
    cipher_suite: :compatible,
    protocol_options: [
      idle_timeout: 1_800_000
    ],
    certfile: "priv/cert/selfsigned.pem",
    keyfile: "priv/cert/selfsigned_key.pem"
  ],
7

Hmm none of this seems to help. I kinda gave up and started a blank project from scratch, gradually migrating pieces of code into it. The original project was untouched for 2 years and there may be some relics that I am unable to identify and fix. Thanks everyone for help.

8

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.
2 Likes