Unable to login in Fifrefox addon behind reverse proxy - NetworkError when attempting to fetch resource.

[gottoesplosivo]

Hi,

I'm trying to connect through the Firefox add-on via reverse nginx proxy (I use SWAG), however I get this error when trying to login: NetworkError when attempting to fetch resource.

I'm sure the link I'm using is correct, as well as the login details. I can connect if using ip:port

Here's the reverse proxy for reference

`server { listen 443 ssl; listen [::]:443 ssl;

server_name hoarder.*;

include /config/nginx/ssl.conf;

client_max_body_size 0;

# enable for ldap auth (requires ldap-location.conf in the location block)
#include /config/nginx/ldap-server.conf;

# enable for Authelia (requires authelia-location.conf in the location block)
include /config/nginx/authelia-server.conf;

# enable for Authentik (requires authentik-location.conf in the location block)
#include /config/nginx/authentik-server.conf;

location / {
    # enable the next two lines for http auth
    #auth_basic "Restricted";
    #auth_basic_user_file /config/nginx/.htpasswd;

    # enable for ldap auth (requires ldap-server.conf in the server block)
    #include /config/nginx/ldap-location.conf;

    # enable for Authelia (requires authelia-server.conf in the server block)
    include /config/nginx/authelia-location.conf;

    # enable for Authentik (requires authentik-server.conf in the server block)
    #include /config/nginx/authentik-location.conf;

    include /config/nginx/proxy.conf;
    include /config/nginx/resolver.conf;
    set $upstream_app hoarder;
    set $upstream_port 3000;
    set $upstream_proto http;
    proxy_pass $upstream_proto://$upstream_app:$upstream_port;

}

 location ~ (/hoarder)?/api {
     include /config/nginx/proxy.conf;
     include /config/nginx/resolver.conf;
     set $upstream_app hoarder;
     set $upstream_port 3000;
     set $upstream_proto http;
     proxy_pass $upstream_proto://$upstream_app:$upstream_port;

 }

}`

Any help is appreciated :)

[MohamedBassem]

Hey, can you get the exact error using the instruction in this video:

https://github.com/MohamedBassem/hoarder-app/assets/2418637/a82e9cee-2454-4e06-b23e-8d3361eb02e1

[kamtschatka]

There is an authelia conf imported, are you using it? Does navigating to the page directly, using the URL work?

[gottoesplosivo]

Hey, can you get the exact error using the instruction in this video: Screen.Recording.2024-03-27.at.10.06.01.PM.mov

Hi, for some reason the video is not playing on firefox, could you send me a link to download it?

[gottoesplosivo]

There is an authelia conf imported, are you using it? Does navigating to the page directly, using the URL work?

Yes I'm using authelia with 2fa, navigating to the page directly using hoarder.address.ltd works normally.

[MohamedBassem]

@gottoesplosivo are you saying that there's authelia in front of Hoarder? If you open hoarder (using the domain) in an incognito page for example, do you go to hoarder, or are you greated with authelia first?

[gottoesplosivo]

@gottoesplosivo are you saying that there's authelia in front of Hoarder? If you open hoarder (using the domain) in an incognito page for example, do you go to hoarder, or are you greated with authelia first?

there's authelia in front of hoarder, is not supposed to have something in front of it when exposed to the outside?

EDIT: Also I just tried removing authelia in the proxy conf and the problem persists

[MohamedBassem]

@gottoesplosivo then that's probably the problem. The chrome extension has no way to authenticate to authelia right now. We probably will need to add support for attaching custom headers to the extension and configure authelia to use those headers for authentication or something.

[MohamedBassem]

@gottoesplosivo can you see the video attached to this comment: https://github.com/hoarder-app/hoarder/issues/23#issuecomment-2024080868

[gottoesplosivo]

@MohamedBassem please see my edit above, even without Authelia I can't login

[kamtschatka]

with https://github.com/hoarder-app/hoarder/issues/92 it will be possible to use the API directly in the extension. If you just circumvent the API endpoint with authelia, this should work fine, i would say.

[gottoesplosivo]

@MohamedBassem I get CORS error when trying to login:

@kamtschatka how would you suggest I do that? I'm not that well versed :D

[MohamedBassem]

hmmm, I wonder if nginx by default strips the CORS headers from the response (or if you are stripping them youself).

Can you add:

    proxy_pass_header Access-Control-Allow-Origin;
    proxy_pass_header Access-Control-Allow-Methods;
    proxy_pass_header Access-Control-Allow-Headers;
    proxy_pass_header Access-Control-Allow-Credentials;
    proxy_pass_header Access-Control-Max-Age;

To both sections of nginx? If it didn't work, can you share the output of:

curl -v -XHEAD <INSERT_HOARDER_DOMAIN_HERE>/api/trpc

This can help us understand if the CORS headers are correctly set or not.

NOTE: do that with authelia disabled.

EDIT: modified the curl request to include the api endpoint

[gottoesplosivo]

@MohamedBassem

here's the output

`curl -v -XHEAD https://hoarder.domain.ltd/api/trpc Warning: Setting custom HTTP method to HEAD with -X/--request may not work the way you want. Consider using -I/--head instead. % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Host hoarder.domain.ltd:443 was resolved.

• IPv6: (none)
• IPv4:
• Trying :443...
• Connected to hoarder.domain.ltd (8) port 443
• ALPN: curl offers h2,http/1.1 } [5 bytes data]
• TLSv1.3 (OUT), TLS handshake, Client hello (1): } [512 bytes data]
• CAfile: none
• CApath: /etc/ssl/certs { [5 bytes data]
• TLSv1.3 (IN), TLS handshake, Server hello (2): { [122 bytes data]
• TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8): { [19 bytes data]
• TLSv1.3 (IN), TLS handshake, Certificate (11): { [2044 bytes data]
• TLSv1.3 (IN), TLS handshake, CERT verify (15): { [79 bytes data]
• TLSv1.3 (IN), TLS handshake, Finished (20): { [52 bytes data]
• TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1): } [1 bytes data]
• TLSv1.3 (OUT), TLS handshake, Finished (20): } [52 bytes data]
• SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384 / [blank] / UNDEF
• ALPN: server accepted h2
• Server certificate:
• subject: CN=domain.ltd
• start date: Aug 22 23:16:52 2024 GMT
• expire date: Nov 20 23:16:51 2024 GMT
• subjectAltName: host "hoarder.domain.ltd" matched cert's "*.domain.ltd"
• issuer: C=US; O=Let's Encrypt; CN=E6
• SSL certificate verify ok.
• Certificate level 0: Public key type ? (256/128 Bits/secBits), signed using ecdsa-with-SHA384
• Certificate level 1: Public key type ? (384/192 Bits/secBits), signed using sha256WithRSAEncryption
• Certificate level 2: Public key type ? (4096/128 Bits/secBits), signed using sha256WithRSAEncryption } [5 bytes data]
• using HTTP/2
• [HTTP/2] [1] OPENED stream for https://hoarder.domain.ltd/api/trpc
• [HTTP/2] [1] [:method: HEAD]
• [HTTP/2] [1] [:scheme: https]
• [HTTP/2] [1] [:authority: hoarder.domain.ltd]
• [HTTP/2] [1] [:path: /api/trpc]
• [HTTP/2] [1] [user-agent: curl/8.9.1]
• [HTTP/2] [1] [accept: /] } [5 bytes data]

  HEAD /api/trpc HTTP/2 Host: hoarder.domain.ltd User-Agent: curl/8.9.1 Accept: /

  { [5 bytes data]

• TLSv1.3 (IN), TLS handshake, Newsession Ticket (4): { [57 bytes data]
• TLSv1.3 (IN), TLS handshake, Newsession Ticket (4): { [57 bytes data]
• Request completely sent off { [5 bytes data] < HTTP/2 404 < server: nginx < date: Sun, 15 Sep 2024 12:57:27 GMT < content-type: text/html; charset=utf-8 < access-control-allow-origin: < access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS < access-control-allow-headers: Content-Type, Authorization < access-control-allow-credentials: true < cache-control: private, no-cache, no-store, max-age=0, must-revalidate < vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding < x-powered-by: Next.js < cache-control: no-transform < content-security-policy: upgrade-insecure-requests; frame-ancestors 'self' < permissions-policy: interest-cohort=() < referrer-policy: same-origin < x-content-type-options: nosniff < x-frame-options: SAMEORIGIN < x-ua-compatible: IE=Edge < x-xss-protection: 1; mode=block < access-control-allow-origin: < { [0 bytes data] 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
• Connection #0 to host hoarder.domain.ltd left intact `

If I try to go to hoarder.domain.ltd/api I get a 404 error, maybe the api endpoint is not exposed properly?

[norgur]

I have the same issue right now, no reverse proxies, no authelia, nothing. Just Hoarder running on Docker inside my tailscale network. I tried to get the logs as seen in the video, yet I can't, because I don't have an "inspect" button where yours was.

[gottoesplosivo]

Bumping this

[crosbyh]

I'm experiencing this as well with the Firefox addon.

Using Traefik + Authelia. I have OIDC setup with Authelia and use that to login in the browser. Works in various browsers, incognito mode, etc.

I receive the same NetworkError when trying to use the Firefox extension. Neither API Key, nor email/pass login work.

[MohamedBassem]

hmmm, I think I can add a test connection button similar to the one that I added to the mobile app.

[wbste]

I turned on the browser console in firefox per this, and got this output trying to connect to another pc on my LAN via HTTP, no nginx or anything used in front of it, just the http://pcname:port format, which I'll call [HOST] below.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [HOST]/api/trpc/apiKeys.exchange?batch=1. (Reason: CORS request not http).

Note I had Enable HTTPS-Only Mode in all windows enabled up until this point. Once I disabled that (Don’t enable HTTPS-Only Mode), I logged in right away. Toggle this setting under Settings > HTTPS-Only Mode.

Note I already had the HOST added in the exception list of firefox (so the web site would load), but seems the extension doesn't/can't read that exception?

[atomicangel]

Here's my Nginx config that worked OOB with the extension. Since I have a .dev domain, I had to specify https://hoarder.example.com in the app on my phone and in the extension.

# The `upstream` directives ensure that you have a http/1.1 connection
# This enables the keepalive option and better performance
#
# Define the server IP and ports here.
upstream hoarder {
  zone hoarder 64k;
  server hoarder.internal.lan:3000;     # I use my internal DNS entries instead of IP addresses, so use what you have here.
  keepalive 2;
}

# Needed to support websocket connections
# See: https://nginx.org/en/docs/http/websocket.html
# Instead of "close" as stated in the above link we send an empty value.
# Else all keepalive connections will not work.
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      "";
}

# Redirect HTTP to HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name hoarder.example.com;

    if ($host = hoarder.example.com) {
        return 301 https://$host$request_uri;
    }
    return 404;

}

server {
    # For older versions of nginx appened http2 to the listen line after ssl and remove `http2 on`
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    #http2 on;
    server_name hoarder.example.com;

    client_max_body_size 525M;

    location / {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;

      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;

      proxy_pass http://hoarder;
    }

    ssl_certificate /etc/letsencrypt/live/hoarder.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/hoarder.example.com/privkey.pem; # managed by Certbot
}

[mounta11n]

I turned on the browser console in firefox per this, and got this output trying to connect to another pc on my LAN via HTTP, no nginx or anything used in front of it, just the http://pcname:port format, which I'll call [HOST] below.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [HOST]/api/trpc/apiKeys.exchange?batch=1. (Reason: CORS request not http).

Note I had Enable HTTPS-Only Mode in all windows enabled up until this point. Once I disabled that (Don’t enable HTTPS-Only Mode), I logged in right away. Toggle this setting under Settings > HTTPS-Only Mode.

Note I already had the HOST added in the exception list of firefox (so the web site would load), but seems the extension doesn't/can't read that exception?

Thanks for the hint @wbste Toggling off "https only for all sites" worked for me!

@MohamedBassem for me it seems like this is an http/https issue with firefox only and not a problem from the extension itself. Because I've had the same Error as OP even within my local network - no reverse proxy or anything - when using firefox (librewolf 130.0.1-1). But when using a chrome based webbrowser (Brave 1.69.153 Chromium: 128.0.6613.85) everything works fine with the exact same settings. There is also no problem [EDIT: for firefox/librewolf extension] to connect to my hoarder docker container on my cloud-server, which is behind a reverse proxy, as long as it is https. [EDIT: So it looks like firefox can not manage the https only exception when it comes to extensions.]

[mounta11n]

Ah and fyi @gottoesplosivo I'm using caddy as my reverse proxy. caddy manages the ssl automatically, I can absolutely recommend it.

[crosbyh]

I'm experiencing this as well with the Firefox addon.

Using Traefik + Authelia. I have OIDC setup with Authelia and use that to login in the browser. Works in various browsers, incognito mode, etc.

I receive the same NetworkError when trying to use the Firefox extension. Neither API Key, nor email/pass login work.

An update to this... I also tested in Chrome and that extension did not work for me either. If I add this to my traefik config file:

        accessControlAllowOriginList:
          - "*" 

Then both Chrome & Firefox extensions are able to connect successfully. If I comment that line out, both break immediately. Doesn't seem to work if I add my personal domain/subdomain to the allow list, only works with the wildcard so far.

This seems out of the ordinary as I'm able to use other selfhosted bookmarklets and browser extensions successfully without this added config. Hoping to find a better way to manage this config, as I believe allowing the wildcard is not ideal for security.

[kamtschatka]

sounds like traefik might be removing that, because we are definitely setting that on all the /api responses: https://github.com/hoarder-app/hoarder/blob/main/apps/web/next.config.mjs#L31