Livewire updates fail when running through a HTTP proxy such as Cloudflare tunnels

[husterk]

Describe the bug I have a working instance of Speedtest Tracker installed via a Docker Compose configuration. I can access the service and perform all expected actions (e.g. create users, enable notifications, run speed tests, etc.) when I directly navigate to the service using the exposed port (e.g. https://my-local-docker-host:8700).

I am exposing this service to the web via a Cloudflare Zero Trust tunnel. This tunnel effectively creates a route from the internal https://my-local-docker-host:8700 URL to the publicly facing https://my-public-domain URL. I am still able to access the web UI and log in when I navigate to the public URL. However, a lot of the web UI features are broken due to the underlying Livewire connection failing (see error message below).

Following the error link takes me to the utils.js file and the following line of code.

/**
 * Livewire's update URI. This is configurable via Livewire::setUpdateRoute(...)
 */
export function getUpdateUri() {
    return document.querySelector('[data-update-uri]')?.getAttribute('data-update-uri') ?? window.livewireScriptConfig['uri'] ?? null
}

The issue is that the Livewire update URI is not properly mapped to the publicly exposed URL. I tried to fix this by setting the APP_URL environment variable but that did not resolve the issue. Is there any way to properly map this URL so that the web UI will work correctly from the publicly exposed URL?

To Reproduce Attempt to utilize the web UI from an HTTP proxy URL.

Expected behavior The web UI should be fully functional.

Environment (please complete the following information):

• OS: Docker Compose (Linux)
  • Architecture: amd64
• Browser: Chrome
• Version: Speedtest Tracker v0.21.2

Screenshots See the error screenshot above.

Logs See the description above.

Additional context N/A

[svenvg93]

Hi @husterk,

Im running mine through a CF tunnel as well without any problems or errors. But I'm just using normal https without any additional ports. Just https://speedtest.domain.com -> http://speedtest-tracker (as they are on the same docker network)

Can you share your docker compose and CF tunnel configuration in zero trust for this domain. So I can try to replicate it and see where there problem might be to fix it.

[husterk]

Here is my Docker compose file. I have tried setting the APP_URL to both the internal and external URL but that didn't seem to change anything. Which value should be applied to the APP_URL environment variable?

services:
  # Reference: https://docs.speedtest-tracker.dev/getting-started/installation/installation#install-with-docker-compose-recommended
  speedtest-tracker:
    image: lscr.io/linuxserver/speedtest-tracker:0.21.2
    restart: unless-stopped
    ports:
      # Only expose the HTTPS port.
      #- 8080:80
      - 8700:443
    environment:
      - PUID=1000
      - PGID=1000
      - APP_URL=<MANUALLY_SET_IN_PORTAINER_STACK>
      # Will be set manually in Portainer (for now).
      # ------------------------------------------------------------
      # TODO - Grab the secret from 1Password and apply via CI/CD.
      # ------------------------------------------------------------
      - APP_KEY=<MANUALLY_SET_IN_PORTAINER_STACK>
      - DB_CONNECTION=sqlite
      # Schedule: Every 1 hour
      # See: https://crontab.guru/every-1-hour
      - SPEEDTEST_SCHEDULE=0 * * * *
      # Optional: Leaving the default for now.
      # See: https://c.speedtest.net/speedtest-servers-static.php
      #- SPEEDTEST_SERVERS=
      - PRUNE_RESULTS_OLDER_THAN=90 # Days
      # Optional: Leaving the default for now.
      # See: https://www.php.net/manual/en/datetime.format.php
      #- CHART_DATETIME_FORMAT=
      # Optional: Leaving the default for now.
      # See: https://www.php.net/manual/en/datetime.format.php
      #- DATETIME_FORMAT=
      - APP_TIMEZONE=US/Mountain
      - DISPLAY_TIMEZONE=US/Mountain
      # Email notification settings
      # --------------------------------------------------------------
      # TODO - Set these values as part of the CI/CD process.
      # --------------------------------------------------------------
      - MAIL_MAILER=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_HOST=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_PORT=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_USERNAME=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_PASSWORD=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_ENCRYPTION=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_FROM_ADDRESS=<MANUALLY_SET_IN_PORTAINER_STACK>
      - MAIL_FROM_NAME=<MANUALLY_SET_IN_PORTAINER_STACK>
    volumes:
      - /volume1/docker/speedtest-tracker/config:/config
      # Note: Not currently using custom SSL keys.
      #- /path/to-custom-ssl-keys:/config/keys
    labels:
      # Prevent Watchtower from attempting to update this container.
      # Updates will be handled through Portainer's stack management tools.
      - "com.centurylinklabs.watchtower.enable=false"

Here is a screenshot of my Cloudflare tunnel settings for this site. The rest of the settings below this screenshot are all set to default values. FWIW, I also use the Cloudflare Zero Trust gateway to filter junk network traffic, but I do not see filtering being applied to this site.

[svenvg93]

Hi @husterk,

I had a quick look that this. Redeployed my container with the same port settings as yours. I didn't had any problems with the UI. There were some other Livewire errors in the console. I was able to solved those by setting the Origin Server Name in the Cloudflare tunnel config. This will need to be the hostname from the local machine like: https://server1.local.

Can you check if that fixes your problem as well?

[husterk]

@svenvg93 Thanks for the quick reply. Unfortunately, I am still encountering the same issue. I tried setting the following values in the Origin Server Name field but none of these options allowed the site to work properly.

• my-host.local
• https://my-host.local
• https://my-host.local:{PORT_NUM}

Would you be able to post a screenshot of your Cloudflare tunnel settings for the site that you set up to test my Docker config?

[svenvg93]

Im not sure what's happening here. When I use your full compose, with the Cloudflare tunnel below, there is are no errors on the console for the last half hour while clicking around, creating and changing users etc

I will give it some more thoughts, and tries to see if I can replicate it.

[husterk]

@svenvg93 Thanks for digging into this. I'll also take a look at my overall Cloudflare Zero Trust configuration. I may have some other configuration issue that is resulting in these errors. I'll let you know if I can find a root cause on my end.

[svenvg93]

Can you try to set the ASSET_URL. Should have the same value as the APP_URL.

[alexjustesen]

@husterk any luck? I'm following along as this is something I need to hook up sooner or later.

[husterk]

@alexjustesen I gave up on Cloudflare Zero Trust altogether for several reasons similar to this issue. I have since moved my home lab/network security to Tailscale, and now everything just works! 😀