iQbit doesn't work through NGINX reverse proxy

[dm-vodopyanov]

After switching from default qBittorrent WebUI to iQbit, webpage become inaccessible through NGINX reverse proxy. The webpage has caption "iQbit" and the content of the page is completely white. However, the service works through localhost:30000 correctly. Restarting NGINX doesn't help.

Please provide instructions of how to setup iQbit through NGINX reverse proxy, or implement the support of NGINX reverse proxy. Currently this bug blocks usage of iQbit.

For reference, this is my configuration:

upstream php-handler {
    server unix:/var/run/php/php7.4-fpm.sock;
}

map $arg_v $asset_immutable {
    "" "";
    default "immutable";
}

server {
    listen 80;
    listen [::]:80;
    server_name SERVER.COM;

    server_tokens off;

    return 301 https://SERVER.COM$request_uri;
}

server {
    listen 443      ssl http2;
    listen [::]:443 ssl http2;
    server_name SERVER.COM;

    root /var/www;

    ssl_certificate           /home/SERVER.COM/fullchain.cer;
    ssl_trusted_certificate   /home/SERVER.COM/SERVER.COM.cer;
    ssl_certificate_key       /home/SERVER.COM/SERVER.COM.key;

    ssl on;
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1.3 TLSv1.2;
    ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256';
    ssl_ecdh_curve prime256v1:secp384r1:secp521r1;
    ssl_session_cache shared:TLS:50m;
    ssl_session_timeout 1d; # default is 5 min 
    ssl_session_tickets off;

    ssl_stapling on; 
    ssl_stapling_verify on;

    access_log            /var/log/nginx/SERVER.COM.access.log;

    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

    server_tokens off;

    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    location /qbt/ {
        proxy_pass         http://127.0.0.1:30000/;
        proxy_http_version 1.1;
        http2_push_preload on; # Enable http2 push

        proxy_set_header   Host               127.0.0.1:30000;
        proxy_set_header   X-Forwarded-Proto  $scheme;
        proxy_set_header   X-Forwarded-Host   $server_name:$server_port;
        proxy_set_header   X-Forwarded-For    $remote_addr;
        proxy_set_header   X-Real-IP          $remote_addr;
        proxy_hide_header       Referer;
        proxy_hide_header       Origin;
        proxy_set_header        Referer                 '';
        proxy_set_header        Origin                  '';
        add_header              X-Frame-Options         "SAMEORIGIN";

        proxy_cookie_path / "/; Secure";
    }
}

[dm-vodopyanov]

Could be the same: #38, which is in open state since Aug 30, 2022.

[ntoporcov]

Yeah, it's hard to fix something that I don't use and don't necessarily understand how it's used so I prioritized other issues..

What is this reverse proxy thing? Why do you use it? What is it actually doing in your network?

[dm-vodopyanov]

@ntoporcov in simple terms, reverse proxy is used to access self-hosted services through web. E.g., you have your server which is located far away from you, not in the same local network. It hosts some service on localhost. You want to access this service. Of course, it can be accessed through VPN, but e.g., you want to give the access to this service not only to you (example: Nextcloud) - and in case of using VPN, you provide the access not only to this service, but also to other recourses which you don't want to share with others, e.g., due to security reasons. Other thing: you may not want to use VPN at all to access your service (switching it on and off, waste battery power on enabled VPN). That's where reverse proxy comes in handy. E.g., you have your own website or use some of DDNS services. Using reverse proxy, you can easily map your service which is on address localhost:1234 to website my-server.com/my-service (SERVER.COM/qbt in the config above). Reverse proxy also supports SSL certificates and prohibit http access, to access only through https.

qBittorrent repo has at least two docs regarding NGINX reverse proxy:

• NGINX Reverse Proxy for Web UI
• Linux WebUI HTTPS with Let's Encrypt certificates and NGINX SSL reverse proxy

Default qBittorrent WebUI works without any issues through reverse proxy. iQbit doesn't. But default WebUI is not optimized at all for smartphones, and it's hard to use its interface on them. Here comes iQbit which can provide excellent UX on smartphones. Supporting reverse proxy, it can be accessed securely through user's website from anywhere with an internet connection.

BTW, that's what ChatGPT answered on the request to provide the list of self-hosted services with reverse proxy support:

There are several self-hosted services that support reverse proxy, allowing you to route traffic to them through a reverse proxy such as NGINX. Some examples include:

1. Nextcloud: A popular open-source cloud storage solution that allows you to sync files, manage calendars, and more.

2. Plex: A media server that allows you to stream your movies, TV shows, and music to any device.

3. GitLab: A web-based Git repository manager that allows you to manage your source code, track issues, and more.

4. WordPress: A popular content management system that allows you to create and manage websites.

5. Bitwarden: An open-source password manager that allows you to securely store and access your passwords.

6. Gitea: A lightweight Git service that allows you to host your own repositories.

7. Home Assistant: An open-source home automation platform that allows you to automate your home.

8. Grafana: An open-source analytics and monitoring platform that allows you to visualize and analyze data.

9. BookStack: An open-source wiki-like platform that allows you to create and manage documentation.

10. Syncthing: An open-source file synchronization tool that allows you to sync files between devices.

These are just a few examples of self-hosted services with reverse proxy support. Many other self-hosted services also support reverse proxy, and the list is constantly growing as more developers recognize the benefits of this approach.

And that's what it answered on the question "And what about qBittorrent?":

Yes, qBittorrent is a self-hosted BitTorrent client that supports reverse proxy. By default, qBittorrent listens on a specific port, but you can use a reverse proxy such as NGINX to route traffic to qBittorrent through a different port or domain name.

Using a reverse proxy can provide several benefits, such as enabling SSL encryption and allowing you to access qBittorrent remotely. Here's an example NGINX configuration for qBittorrent:

server {
    listen 80;
    server_name torrent.example.com;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /api {
        proxy_pass http://localhost:8080/api;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

In this configuration, NGINX listens on port 80 and routes traffic to qBittorrent, which is listening on port 8080. The proxy_set_header directives ensure that the correct headers are passed along to qBittorrent, including the original host and IP address of the client.

Note that you may need to adjust the configuration based on your specific setup, such as if you want to enable SSL encryption or use a different domain name. Also, be sure to secure your qBittorrent instance with a strong username and password, and consider using additional security measures such as IP whitelisting.

[yunkaig]

I'm using apache2. You need to reverse proxy the static path as well.

I set

ProxyPass "/qbittorrent/" "http://127.0.0.1:7654/"

ProxyPass "/api" "http://127.0.0.1:7654/api"

ProxyPass "/static" “ http://127.0.0.1:7654/static”

in the .conf file. That fixed my reverse proxy and now everything works just fine.

Not quite sure about nginx, but I think the solution would look similar.

[OctoSheep]

I'm using apache2. You need to reverse proxy the static path as well.

I set

ProxyPass "/qbittorrent/" "http://127.0.0.1:7654/"

ProxyPass "/api" "http://127.0.0.1:7654/api"

ProxyPass "/static" “ http://127.0.0.1:7654/static”

in the .conf file. That fixed my reverse proxy and now everything works just fine.

Not quite sure about nginx, but I think the solution would look similar.

Thanks! I tried this in Nginx and that works.

  location /qbit/ {
    proxy_pass http://127.0.0.1:7233/;
    proxy_http_version 1.1;
    proxy_set_header Host 127.0.0.1:7233;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_cookie_path / "/; Secure";
  }
  location /api {
    proxy_pass http://127.0.0.1:7233/api;
    proxy_http_version 1.1;
    proxy_set_header Host 127.0.0.1:7233;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_cookie_path / "/; Secure";
  }
  location /static {
    proxy_pass http://127.0.0.1:7233/static;
    proxy_http_version 1.1;
    proxy_set_header Host 127.0.0.1:7233;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_cookie_path / "/; Secure";
  }
  location /assets {
    proxy_pass http://127.0.0.1:7233/assets;
    proxy_http_version 1.1;
    proxy_set_header Host 127.0.0.1:7233;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_cookie_path / "/; Secure";
  }

Note: If you want to show iQbit's icon correctly, then add this below. But this may break your other websites' icons.

  location /favicon.ico {
    proxy_pass http://127.0.0.1:7233/favicon.ico;
    proxy_http_version 1.1;
    proxy_set_header Host 127.0.0.1:7233;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_cookie_path / "/; Secure";
  }