Phoenix self signed https certificate in dev container

Hey devs,

I am building a website using phoenix inside a container using vscode from few months. Recently i tried to enable https endpoint using mix phx.gen.cert. But i am getting below warning for every ping. I am not docker or domains expert :frowning: . Any idea on how to fix it?

[info] TLS :server: In state :abbreviated received CLIENT ALERT: Fatal - Certificate Unknown

[info] TLS :server: In state :abbreviated received CLIENT ALERT: Fatal - Certificate Unknown

FROM elixir:1.11.3

RUN apt-get update \
  && curl -sL | bash \
  && apt-get install -y apt-utils \
  && apt-get install -y nodejs \
  && apt-get install -y build-essential \
  && apt-get install -y inotify-tools \
  && apt-get install -y zsh \
  && apt-get install -y vim \
  && mix local.hex --force \
  && mix local.rebar -- \
  && apt-get install -y ruby \
  && gem install --no-ri --no-rdoc htmlbeautifier \
  && npm i -g npm \
  && apt-get autoremove -y \
  && apt-get clean -y \
  && rm -rf /var/lib/apt/lists/*

RUN sh -c "$(curl -sSL"
RUN git clone ~/.oh-my-zsh/custom/themes/powerlevel10k

version: "3.7"
    image: postgres:13.1
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - "database:/var/lib/postgresql/data"
      - 5432:5432

      context: ../
      dockerfile: .devcontainer/Dockerfile
    command: sleep infinity
      MIX_ENV: dev
      - "4001:4001"
      # Mounts the project folder to '/workspace'. The target path inside the container
      # should match should match what your application expects. In this case, the
      # compose file is in a sub-folder, so we will mount '..'. We'll then reference this
      # as the workspaceFolder in '.devcontainer/devcontainer.json' so VS Code starts here.
      - ..:/app:cached
      - .zshrc:/root/.zshrc
      - .p10k.zsh:/root/.p10k.zsh

      # This lets you avoid setting up Git again in the container
      - ~/.gitconfig:/root/.gitconfig
      - db


dev.exs conf file

config :je, JeWeb.Endpoint,
  https: [
    port: 4001,
    cipher_suite: :strong,
    certfile: "priv/cert/selfsigned.pem",
    keyfile: "priv/cert/selfsigned_key.pem"

The server says the client aborted the TLS handshake because it didn’t like the certificate. What client is making those request and how did you tell it that it’s ok to accept a self-signed certificate?

1 Like

I am just trying to access from browser.

Browsers don’t just silently accept a self-signed test certificate. Some pop up a message warning you of the risk, and let you proceed if you know what you’re doing. Others abort the connection unless you change some preferences. Some differentiate between regular domains and localhost.

If you tell us which browser you’re using, maybe someone who is familiar with that browser can describe their setup. I doubt that it is related to your Docker or VSCode setup

1 Like

yes! I got the pop ups and selected proceed. I tried chrome, chrome based edge browser earlier.
— Logs from chromium based browsers

info] Sent 200 in 8ms
[info] TLS :server: In state :abbreviated received CLIENT ALERT: Fatal - Certificate Unknown

[info] TLS :server: In state :abbreviated received CLIENT ALERT: Fatal - Certificate Unknown

[info] CONNECTED TO Phoenix.LiveView.Socket in 88µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "KhUjWh8EOxRAMxQUHy8NGyEpPCBhBjQ0Mlk9yBhaqUFPTLFCSNluWJWD", "_mounts" => "0", "vsn" => "2.0.0"}

But interestingly, I am not getting any warning when i try to access from Firefox today.
Firefox log

  Parameters: %{"page" => "home"}
  Pipelines: [:guest_web_pages]
[info] Sent 200 in 6ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 117µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "GgMjLyRaPR9vCA41IBAYTAAAeygCAQ9cliIvb2mp9NybdGVz8hMaxwa7", "_mounts" => "0", "vsn" => "2.0.0"}
[info] CONNECTED TO Phoenix.LiveView.Socket in 66µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "Bl8fKwcuZVhgKBkxBToZWkssfnlDRSwYp5urAF576nnfAmWlsDH093Bs", "_mounts" => "0", "vsn" => "2.0.0"}

So now I am sure that the issue is with the browser not the docker or vscode setup :slight_smile: .
These warnings are not the deal breaker though, since I am able to access server. but I like the logs to be clean :slight_smile: .

I fixed this issue in chrome, edge browsers by following this solution from stack overflow

ssl - Getting Chrome to accept self-signed localhost certificate - Stack Overflow

You might be interested in mkcert, which self describes as

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

1 Like

Can also consider GitHub - sasa1977/site_encrypt: Integrated certification via Let's encrypt for Elixir-powered sites

1 Like

You mean chrome://flags/#allow-insecure-localhost? The mix phx.gen.cert task does actually point that out after generating a certificate.

1 Like

I didn’t tried this earlier. but I undid the changes and tried this chrome://flags/#allow-insecure-localhost. I expected it will work but it didn’t. So I had to stick with previous solution again.

seems like good fit for prod. But I am just using https in my local to satisfy some SSO providers like Azure AD, Okta.