#257 - [GH-ISSUE #392] Unable to login in Fifrefox addon behind reverse proxy - NetworkError when attempting to fetch resource. - starred/karakeep

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

Author

Owner

@MohamedBassem commented on GitHub (Sep 15, 2024):

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

@MohamedBassem commented on GitHub (Sep 15, 2024): 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

kerem commented

Author

Owner

@kamtschatka commented on GitHub (Sep 15, 2024):

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

@kamtschatka commented on GitHub (Sep 15, 2024): There is an authelia conf imported, are you using it? Does navigating to the page directly, using the URL work?

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Sep 15, 2024):

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 on GitHub (Sep 15, 2024): > 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?

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Sep 15, 2024):

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.

@gottoesplosivo commented on GitHub (Sep 15, 2024): > 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.

kerem commented

Author

Owner

@MohamedBassem commented on GitHub (Sep 15, 2024):

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

@MohamedBassem commented on GitHub (Sep 15, 2024): @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?

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Sep 15, 2024):

@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

@gottoesplosivo commented on GitHub (Sep 15, 2024): > @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

kerem commented

Author

Owner

@MohamedBassem commented on GitHub (Sep 15, 2024):

@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 on GitHub (Sep 15, 2024): @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.

kerem commented

Author

Owner

@MohamedBassem commented on GitHub (Sep 15, 2024):

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

@MohamedBassem commented on GitHub (Sep 15, 2024): @gottoesplosivo can you see the video attached to this comment: https://github.com/hoarder-app/hoarder/issues/23#issuecomment-2024080868

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Sep 15, 2024):

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

@gottoesplosivo commented on GitHub (Sep 15, 2024): @MohamedBassem please see my edit above, even without Authelia I can't login

kerem commented

Author

Owner

@kamtschatka commented on GitHub (Sep 15, 2024):

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.

@kamtschatka commented on GitHub (Sep 15, 2024): 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.

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Sep 15, 2024):

@MohamedBassem I get CORS error when trying to login:

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

@gottoesplosivo commented on GitHub (Sep 15, 2024): @MohamedBassem I get CORS error when trying to login: ![image](https://github.com/user-attachments/assets/410cdb31-10f0-4edc-ab8b-1c379a2885cd) @kamtschatka how would you suggest I do that? I'm not that well versed :D

kerem commented

Author

Owner

@MohamedBassem commented on GitHub (Sep 15, 2024):

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

@MohamedBassem commented on GitHub (Sep 15, 2024): 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

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Sep 15, 2024):

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

@gottoesplosivo commented on GitHub (Sep 15, 2024): @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?

kerem commented

Author

Owner

@norgur commented on GitHub (Sep 15, 2024):

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.

@norgur commented on GitHub (Sep 15, 2024): 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.

kerem commented

Author

Owner

@gottoesplosivo commented on GitHub (Oct 4, 2024):

Bumping this

@gottoesplosivo commented on GitHub (Oct 4, 2024): Bumping this

kerem commented

Author

Owner

@crosbyh commented on GitHub (Oct 6, 2024):

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.

@crosbyh commented on GitHub (Oct 6, 2024): 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.

kerem commented

Author

Owner

@MohamedBassem commented on GitHub (Oct 6, 2024):

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

@MohamedBassem commented on GitHub (Oct 6, 2024): hmmm, I think I can add a `test connection` button similar to the one that I added to the mobile app.

kerem commented

Author

Owner

@wbste commented on GitHub (Oct 7, 2024):

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?

@wbste commented on GitHub (Oct 7, 2024): I turned on the browser console in firefox [per this](https://stackoverflow.com/questions/12893981/logging-to-console-from-firefox-extension), 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?

kerem commented

Author

Owner

@atomicangel commented on GitHub (Oct 7, 2024):

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
}

@atomicangel commented on GitHub (Oct 7, 2024): 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 } ```

kerem commented

Author

Owner

@mounta11n commented on GitHub (Oct 8, 2024):

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 on GitHub (Oct 8, 2024): > I turned on the browser console in firefox [per this](https://stackoverflow.com/questions/12893981/logging-to-console-from-firefox-extension), 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.]

kerem commented

Author

Owner

@mounta11n commented on GitHub (Oct 8, 2024):

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

@mounta11n commented on GitHub (Oct 8, 2024): Ah and fyi @gottoesplosivo I'm using caddy as my reverse proxy. caddy manages the ssl automatically, I can absolutely recommend it.

kerem commented

Author

Owner

@crosbyh commented on GitHub (Oct 18, 2024):

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.

@crosbyh commented on GitHub (Oct 18, 2024): > 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.

kerem commented

Author

Owner

@kamtschatka commented on GitHub (Oct 23, 2024):

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

@kamtschatka commented on GitHub (Oct 23, 2024): 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

kerem commented

Author

Owner

@aweb-01 commented on GitHub (Nov 20, 2024):

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.

@aweb-01 commented on GitHub (Nov 20, 2024): 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.

kerem commented

Author

Owner

@pewter77 commented on GitHub (Jan 29, 2025):

I run some secure headers for my Traefik instance, so not all will be relevant.

This would help if you're using some secure headers, at least for chrome, Firefox plugin is gone for now from the store so maybe I'll check it later and see how to fix it. You'd have to change DOMAIN to your own domain in env variables if you're using them. Firefox probably has a different URL method.

The following is a middleware and whoever is reading this probably will need to figure it that out to get it working.

      - "traefik.http.middlewares.secure-headers.headers.accesscontrolallowmethods=GET,POST"
      - "traefik.http.middlewares.secure-headers.headers.accesscontrolallowheaders=*"
      - "traefik.http.middlewares.secure-headers.headers.accesscontrolalloworiginlist=${DOMAIN},chrome-extension://kgcjekpmcjjogibpjebkhaanilehneje"
      - "traefik.http.middlewares.secure-headers.headers.accesscontrolmaxage=100"
      - "traefik.http.middlewares.secure-headers.headers.addvaryheader=true"

Alternatively you can use =*" for accesscontrolalloworiginlist but... I don't roll that way.

@pewter77 commented on GitHub (Jan 29, 2025): I run some secure headers for my Traefik instance, so not all will be relevant. This would help if you're using some secure headers, at least for chrome, Firefox plugin is gone for now from the store so maybe I'll check it later and see how to fix it. You'd have to change DOMAIN to your own domain in env variables if you're using them. Firefox probably has a different URL method. The following is a middleware and whoever is reading this probably will need to figure it that out to get it working. ``` - "traefik.http.middlewares.secure-headers.headers.accesscontrolallowmethods=GET,POST" - "traefik.http.middlewares.secure-headers.headers.accesscontrolallowheaders=*" - "traefik.http.middlewares.secure-headers.headers.accesscontrolalloworiginlist=${DOMAIN},chrome-extension://kgcjekpmcjjogibpjebkhaanilehneje" - "traefik.http.middlewares.secure-headers.headers.accesscontrolmaxage=100" - "traefik.http.middlewares.secure-headers.headers.addvaryheader=true" ``` Alternatively you can use =*" for accesscontrolalloworiginlist but... I don't roll that way.

kerem commented

Author

Owner

@vanhellthing93 commented on GitHub (Feb 4, 2025):

Get working behind nginx + authelia with this config (works both for browser extension as well as mobile app)

include /data/snippets/authelia-location.conf;

location / {
    include /data/snippets/proxy.conf;
    include /data/snippets/authelia-authrequest.conf;
    proxy_pass $forward_scheme://$server:$port;
}

location /api {
    include /data/snippets/proxy.conf;
    proxy_pass $forward_scheme://$server:$port;
}

@vanhellthing93 commented on GitHub (Feb 4, 2025): Get working behind nginx + authelia with this config (works both for browser extension as well as mobile app) ``` include /data/snippets/authelia-location.conf; location / { include /data/snippets/proxy.conf; include /data/snippets/authelia-authrequest.conf; proxy_pass $forward_scheme://$server:$port; } location /api { include /data/snippets/proxy.conf; proxy_pass $forward_scheme://$server:$port; } ```

kerem commented