search

hoarder-app / hoarder

A self-hostable bookmark-everything app (links, notes and images) with AI-based automatic tagging and full text search
https://hoarder.app
GNU Affero General Public License v3.0
6.4k stars 231 forks source link

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

Open gottoesplosivo opened 2 months ago

gottoesplosivo commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

gottoesplosivo commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

@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 commented 2 months ago

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

gottoesplosivo commented 2 months ago

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

kamtschatka commented 2 months ago

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 commented 2 months ago

@MohamedBassem I get CORS error when trying to login: image

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

MohamedBassem commented 2 months ago

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 commented 2 months ago

@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.

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

norgur commented 2 months ago

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 commented 1 month ago

Bumping this

crosbyh commented 1 month ago

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 commented 1 month ago

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

wbste commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

crosbyh commented 1 month ago

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 commented 1 month ago

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

aweb-01 commented 2 days ago

I also had this issue with traefik. I run both traefik and cloudflare zero tunnels, so I just stuck this behind a cloudflare tunnel instead, but would prefer to get it working with traefik at some point.