Can't connect via websockets using https (self signed certs)

Connecting via http and ws, via localhost and port 8080. No problems.

However, my app uses mic/video via webrtc and thus needs either ssl or localhost:8080.

I put dgraph behind nginx and with a self-signed cert, https works fine.

Unfortunately wss does not. Has anyone else tested this?

Thanks

What error message are you getting when attempting to send wss requests?

It’s likely that the browser does not accept wss requests with a self-signed certificate. You can check if your requests start succeeding when adding your own CA to your trusted keystore (here’s an example of how to do that in Chrome).

Thanks for the reply.

I’m using GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like. to generate the certs.

I’ve added them to the keystore and they show up in Chrome. The certs work fine for the other services that are running on ssl.

This is the console:

This is the connection settings:

const httpLink = new HttpLink({
  uri: "https://dgraph.platformdev.com/graphql", // Or your Slash GraphQL endpoint (if you're using Slash GraphQL)
})

const wsLink = process.browser
  ? new WebSocketLink({
      uri: `wss://dgraph.platformdev.com/graphql`, // Can test with your Slash GraphQL endpoint (if you're using Slash GraphQL)
      options: {
        reconnect: true,
      },
    })
  : null

const withApollo = nextWithApollo(
  ({ initialState, headers }) => {
    return new ApolloClient({
      ssrMode: typeof window === "undefined",
      link: splitLink,
      headers: {
        ...(headers as Record<string, string>),
      },
      cache: new InMemoryCache().restore(initialState || {}),
    })
  },

Here is the nginx for the dgraph endpoint:

upstream dgraph {
    # Enumerate all upstream servers here
    #sticky;
    ip_hash;
    server localhost:8080;
}

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server
{
    listen 443 ssl;
    server_name dgraph.platformdev.com;

    access_log /usr/local/var/log/nginx/app/access.log;
    error_log /usr/local/var/log/nginx/app/error.log;

    ssl_certificate      /usr/local/etc/nginx/ssl/platformdev.crt.pem;
    ssl_certificate_key  /usr/local/etc/nginx/ssl/platformdev.key.pem;

    # Only retry if there was a communication error, not a timeout
    # on the Tornado server (to avoid propagating "queries of death"
    # to all frontends)
    proxy_next_upstream error;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Scheme $scheme;
    proxy_set_header Host $http_host;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $host;
        proxy_pass http://dgraph;
    }

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

My schema:

# Dgraph.Allow-Origin "http://localhost:3000"
# Dgraph.Allow-Origin "https://app.platformdev.com"

Please let me know if I have missed something.

Appreciate your time!

Thanks

Thanks for sharing the configuration setup. According to the Nginx docs WebSocket proxying, you’ll need to set the following configuration for reverse proxying WebSocket connections:

        location / {
            ...
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
           ...
            proxy_pass http://dgraph;
        }

I tried setting those three things (proxy_http_version and the two proxy_set_header) with your example and it worked.

1 Like

That was it. Thank you so much for your time!

1 Like