dashboard not loading data, Mixed Content error

[KLForsythe]

This is a wonderful project, and I am really excited about it. Thank you so much for creating it @dcaputo-harmoni. I'm working now on getting this set up for our systems, so that hopefully we'll be able to use OpenBalena for our device management going forward.

However, I've run into an issue.
The OpenBalena dashboard is unable to load any data:

On inspecting the console, I see the following errors (mydomain is a substitution for my actual domain) (I have one device and one fleet):

Mixed Content: The page at 'https://admin.mydomain.com:8080/#/' was loaded over HTTPS, but requested an insecure resource 'http://postgrest.mydomain.com:8000/device%20type?limit=1000&offset=0&order=id.asc'. This request has been blocked; the content must be served over HTTPS.

Followed by:

performPessimisticQuery.js:56
TypeError: Failed to fetch
    at <anonymous>:1:876
    at Module.fetchJson (fetch.js:41:1)
    at httpClient (App.js:46:1)
    at Object.getList (postgrestDataProvider.js:188:1)
    at performPessimisticQuery (performPessimisticQuery.js:36:1)
    at doQuery (doQuery.js:59:1)
    at Proxy.<anonymous> (useDataProvider.js:188:1)
    at index.js:19:1
    at index.js:76:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)

It appears that the main problem is that the dashboard is sending the request to postgrest.mydomain.com:8000 over http, not https. Any idea why that is happening, and what needs to be adjusted so that the dashboard knows to send the request to https://postgrest.mydomain.com:8000?

Thanks so much!

[dcaputo-harmoni]

Thanks for your feedback!
Did you try running quickstart in insecure mode?
-i insecure host mode (open-balena-admin services available via http instead of https) Default is secure

[KLForsythe]

@dcaputo-harmoni I tried to run quickstart in in secure mode just now, but could not.

When attempting to use -i (open-balena-admin/scripts/quickstart -j $OPENBALENA_JWT_SECRET -v $OPENBALENA_API_VERSION_TAG -d $OPENBALENA_HOST_NAME -i), I see the following:

Invalid argument: -i
usage: open-balena-admin/scripts/quickstart [-h] [-d DOMAIN] [-U USERNAME] [-P PASSWORD] [-p PORT] -v VERSION -j JWT_SECRET

  -d DOMAIN     the domain that your openbalena instance was installed on. Default is 'openbalena.local'
  -U USERNAME   the username used to log in to your openbalena db instance.  Default is 'docker'
  -P PASSWORD   the password used to log in to your openbalena db instance.  Default is 'docker'
  -p PORT       the port of your openbalena db instance.  Default is '5432'
  -i            insecure host mode (open-balena-admin services available via http instead of https)  Default is secure
  -v VERSION    the version tag of your openbalena api instance
  -j JWT_SECRET the JWT secret of your openbalena instance

That said, I do ultimately want to run in secure mode, not insecure mode - my goal is to get the dashboard making secure requests, including its requests to postgrest.

[KLForsythe]

@dcaputo-harmoni I edited the services.yml file (for testing purposes), adjusting two env variables to use https rather than http:

REACT_APP_OPEN_BALENA_POSTGREST_URL: https://postgrest.${OPENBALENA_HOST_NAME}:8000
 REACT_APP_OPEN_BALENA_REMOTE_URL: https://remote.${OPENBALENA_HOST_NAME}:10000 

Doing this, I was able to load my fleet and device:

While this works, I'm clearly not using the services as intended, if I am editing the services.yml file. I do want to run in secure mode, so I want to access https://admin.mydomain.com, not http://admin.mydomain.com, and from the errors I was getting before my edits to the services.yml file, in order to do that, the postgrest url needs to use https, not http.

Any ideas?

[tchey290]

@KLForsythe Did you ever come up with a solution for this? I am running into the same issue.

[KLForsythe]

@tchey290 No, unfortunately I did not find a solution.

[tchey290]

@tchey290 No, unfortunately I did not find a solution.

So far I've been able to get around this particular issue using cloudflare tunnel to provide SSL and proxy the requests. But now I am getting a different error:

WebSocket connection to 'wss://<ADMIN-URL>:8080/ws' failed:

Which I believe is because with the cloudflare tunnel it should be accessing the url through port 443 (SSL) which all my environment variables are set this way but it still tries to use 8080. I can't figure out where this url is set and how to change the port.

@dcaputo-harmoni are you able to direct me to where it can be changed or add this as an environment variable if it's not?

[giuseppe443]

@tchey290 No, unfortunately I did not find a solution.

So far I've been able to get around this particular issue using cloudflare tunnel to provide SSL and proxy the requests. But now I am getting a different error:

WebSocket connection to 'wss://<ADMIN-URL>:8080/ws' failed:

Which I believe is because with the cloudflare tunnel it should be accessing the url through port 443 (SSL) which all my environment variables are set this way but it still tries to use 8080. I can't figure out where this url is set and how to change the port.

@dcaputo-harmoni are you able to direct me to where it can be changed or add this as an environment variable if it's not?

You need to dited the service.yml here:
REACT_APP_OPEN_BALENA_UI_URL: http://admin.${OPENBALENA_HOST_NAME}:8080 REACT_APP_OPEN_BALENA_POSTGREST_URL: http://postgrest.${OPENBALENA_HOST_NAME}:8000 REACT_APP_OPEN_BALENA_REMOTE_URL: http://remote.${OPENBALENA_HOST_NAME}:10000
changing out the http to https and the ports to the ones from the reverse proxy (in your case 443?)
Then just compose down and compose up
This should give the UI container the new env variables with your ssl ports