[Bug] Some browsers do not work properly when running behind nginx reverse proxy

[tkymmm]

Some browsers do not work properly when running behind nginx reverse proxy
In my environment it works fine only with firefox
I open the page but the name still loads and the button on the top right cannot be opened except for the theme and information.

Desktop (please complete the following information):

• OS: Windwos11
• Browser edge
• Version 133.0.3065.69

Smartphone (please complete the following information):

• Device: iPhoneSE2
• OS: iOS18.3.1
• Browser safari
• Version [e.g. 22]

Bug occurs on official PairDrop instance https://pairdrop.net/
No
Version: v1.11.0

Bug occurs on self-hosted PairDrop instance
Yes

Self-Hosted Setup
Proxy: Nginx
Deployment: docker compose
Version: v1.11.0

Additional context
The nginx .conf looks like this

server {
    listen      443 ssl http2;
    listen [::]:443 ssl http2;
    server_name drop.mydmain.com;
    ssl_certificate /etc/ssl/certs/pairdrop-dev.crt;
    ssl_certificate_key /etc/ssl/certs/pairdrop-dev.key;

    expires epoch;

    location / {
        proxy_connect_timeout 300;
        proxy_pass http://localhost:3000;
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header X-Forwarded-for $remote_addr;
    }
}

[schlagmichdoch]

What do your browser logs say?
Please also post your docker compose file

[realchrislovett]

I have this running behind Nginx Proxy Manager and its working as expected on Safari (iPhone 16), Chrome and Brave (MacBook). My compose file is as follows:

services:
  pairdrop:
    hostname: pairdrop
    image: lscr.io/linuxserver/pairdrop:latest
    volumes:
      - /opt/pairdrop/rtc_config.json:/home/node/app/rtc_config.json
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=US/Eastern
      - RATE_LIMIT=1 #optional
      - WS_FALLBACK=true #optional
      - RTC_CONFIG=/home/node/app/rtc_config.json
      - DEBUG_MODE=false #optional
    restart: unless-stopped

Compare this to yours and/or post it here.

[tkymmm]

edge log

ui-main.js:514 Use OffscreenCanvas to draw background animation.
main.js:77 Service Worker registered
persistent-storage.js:14 Database initialised.
localization.js:74 Page successfully translated System language: ja Selected language: ja
main.js:44 Initial translation successful.
manifest.json:1  Manifest: Enctype should be set to either application/x-www-form-urlencoded or multipart/form-data. It currently defaults to application/x-www-form-urlencoded
drop.mydomain.com/:1  <meta name="apple-mobile-web-app-capable" content="yes"> is deprecated. Please include <meta name="mobile-web-app-capable" content="yes">
persistent-storage.js:148 Request successful. Retrieved 0 room_secrets
main.js:59 Load deferred assets...
network.js:1  Uncaught SyntaxError: Identifier 'Events' has already been declared (at network.js:1:1)
main.js:159 Script loaded successfully: scripts/network.js
ui.js:1  Uncaught SyntaxError: Identifier '$' has already been declared (at ui.js:1:1)
main.js:159 Script loaded successfully: scripts/ui.js
main.js:136 Stylesheet loaded successfully: styles/styles-deferred.css
main.js:159 Script loaded successfully: scripts/browser-tabs-connector.js
main.js:159 Script loaded successfully: scripts/util.js
main.js:159 Script loaded successfully: scripts/libs/qr-code.min.js
main.js:159 Script loaded successfully: scripts/libs/zip.min.js
main.js:159 Script loaded successfully: scripts/libs/no-sleep.min.js
main.js:159 Script loaded successfully: scripts/libs/heic2any.min.js
main.js:61 Loading of deferred assets completed.
main.js:63 Hydrate UI...
main.js:168  Uncaught (in promise) ReferenceError: AboutUI is not defined
    at PairDrop.hydrate (main.js:168:28)
    at PairDrop.initialize (main.js:64:20)
hydrate @ main.js:168
initialize @ main.js:64
await in initialize
PairDrop @ main.js:35
(匿名) @ main.js:241
bootstrap-autofill.js:1857  Uncaught TypeError: Cannot read properties of undefined (reading 'domQueryService')
    at checkPageContainsShadowDom (bootstrap-autofill.js:1857:14)
    at bootstrap-autofill.js:334:53
checkPageContainsShadowDom @ bootstrap-autofill.js:1857
(匿名) @ bootstrap-autofill.js:334
requestIdleCallback
requestIdleCallbackPolyfill @ bootstrap-autofill.js:334
CollectAutofillContentService.processMutations @ bootstrap-autofill.js:1179
(匿名) @ bootstrap-autofill.js:633
setTimeout
(匿名) @ bootstrap-autofill.js:630
(匿名) @ bootstrap-autofill.js:334
requestIdleCallback
requestIdleCallbackPolyfill @ bootstrap-autofill.js:334
CollectAutofillContentService.handleMutationObserverMutation @ bootstrap-autofill.js:1167
attributes
(匿名) @ ui-main.js:191
setTimeout
fadeIn @ ui-main.js:190
initialize @ main.js:55
await in initialize
PairDrop @ main.js:35
(匿名) @ main.js:241

docker-compose.yml

version: "3.9"
services:
  pairdrop:
    container_name: PairDrop
    image: ghcr.io/linuxserver/pairdrop:latest
    security_opt:
      - no-new-privileges:false
      - seccomp:unconfined
    healthcheck:
      test: timeout 10s bash -c ':> /dev/tcp/127.0.0.1/3000' || exit 1
      interval: 10s
      timeout: 5s
      retries: 3
      start_period: 90s
    environment:
     RATE_LIMIT: false #Set to true instead of false to limit clients to 100 requests per 5 min.
     WS_FALLBACK: false #Set to true instead of false to enable websocket fallback if the peer to peer WebRTC connection is not available to the client.
     RTC_CONFIG: #Path to a json file containing custom STUN/TURN config.
     DEBUG_MODE: false #Set to true instead of false to debug the http server configuration by logging clients IP addresses used by PairDrop to STDOUT.
     TZ: Asia/Tokyo
     PUID: 1000
     PGID: 1000
    ports:
      - 3000:3000
    restart: unless-stopped

Connections from local addresses that do not pass nginx work fine

[schlagmichdoch]

bootstrap-autofill.js:1857 Uncaught TypeError: Cannot read properties of undefined (reading 'domQueryService')
at checkPageContainsShadowDom (bootstrap-autofill.js:1857:14)
at bootstrap-autofill.js:334:53
checkPageContainsShadowDom @ bootstrap-autofill.js:1857
(匿名) @ bootstrap-autofill.js:334
requestIdleCallback
requestIdleCallbackPolyfill @ bootstrap-autofill.js:334
CollectAutofillContentService.processMutations @ bootstrap-autofill.js:1179
(匿名) @ bootstrap-autofill.js:633
setTimeout
(匿名) @ bootstrap-autofill.js:630
(匿名) @ bootstrap-autofill.js:334
requestIdleCallback
requestIdleCallbackPolyfill @ bootstrap-autofill.js:334
CollectAutofillContentService.handleMutationObserverMutation @ bootstrap-autofill.js:1167

We don’t use bootstrap so this seems to be from some browser plugin. Try to load the page without plugins or with another browser and see if that works. Also, be sure to load the page in a private tab to ensure there is no problem with logs.

If Firefox works but everything else does not, this hints to a problem with your browsers as well.

There have been some fixes on PairDrop v1.11.1. Consider updating the container and retrying.

 RTC_CONFIG: #Path to a json file containing custom STUN/TURN config.

RTC_CONFIG should be set to false or a path to specify a file that contains the WebRTC config.

Apart from that your setup looks fine.

Do the docker container logs contain errors?

[tkymmm]

I updated it to 1.11.1 and setting RTC_CONFIG to false.
Both iPhone safari and Windows edge worked fine on private tabs, but it seems to be not good on normal tabs.
Nothing is recorded in the docker container log.

[schlagmichdoch]

Then this seems to be a cache issue.

To clear the cache on edge:

1. Navigate to your website
2. Press F12 to open DevTools
3. Open the 'Application' tab
4. Go to the third entry 'Storage'
5. Click on 'Clear site data'

Application Side Bar:

Storage page