401 Media issue on Cinny v4.5.1

[poggingfish]

Describe the bug

Whenever I login to Cinny all the media is gone giving a 401.

Here are the errors:

Here is an example of what it looks like:

Both of the users have a profile picture.

And here is proof that it is not a problem with my Conduwuit server:

(fetched via postman)

I believe the issue is that Cinny is not giving the bearer token to Conduwuit. I dont know why though

Reproduction

1. Go to Cinny
2. Refresh without cache (CTRL+SHIFT+R)
3. You will see the same issue.

Expected behavior

The media should appear

Platform and versions

1. OS: Windows 11
2. Browser: Firefox
3. Cinny Version: v4.5.1
4. Conduwit Version: conduwuit 0.5.0 (b6e9dc3)

Additional context

No response

[kfiven]

Use Firefox normal tab as incognito doesn't support service worker.

[jblumie]

I suppose that fixed it for poggingfish, but I'm getting the exact same issue and can't get it working. Both on incognito and normal tabs in Firefox but also Chromium. I deleted the cache and all of that, both from the browser and the info->clear cache in Cinny. The Element app and the app at app.cinny.in do work though.

This happened upon updating both cinny and synapse to latest versions (cinny v4.5.1 and synapse v1.127.1 respectively)

Server logs show SynapseError: 401 - Missing access token:

2025-03-27 06:46:25,542 - synapse.http.server - 130 - INFO - GET-590 - <XForwardedForRequest at 0x7f5c5c26e850 method='GET' uri='/_matrix/client/v1/media/thumbnail/fai.st/igCRtJajDLhyEbcknIPDZakA?width=48&height=48&method=crop&allow_redirect=true' clientproto='HTTP/1.0' site='8008'> SynapseError: 401 - Missing access token
2025-03-27 06:46:25,543 - synapse.http.server - 130 - INFO - GET-591 - <XForwardedForRequest at 0x7f5c5c3dab10 method='GET' uri='/_matrix/client/v1/media/thumbnail/fai.st/SucOLanECzlNmmsVpVuXkxsE?width=96&height=96&method=crop&allow_redirect=true' clientproto='HTTP/1.0' site='8008'> SynapseError: 401 - Missing access token
2025-03-27 06:46:25,564 - synapse.http.server - 130 - INFO - GET-603 - <XForwardedForRequest at 0x7f5c5c2e02d0 method='GET' uri='/_matrix/client/v1/media/thumbnail/mint.lgbt/UYJVHLJiwc5gMlvuUKHngbq6VN9KTrZx?width=96&height=96&method=crop&allow_redirect=true' clientproto='HTTP/1.0' site='8008'> SynapseError: 401 - Missing access token
2025-03-27 06:46:25,565 - synapse.http.server - 130 - INFO - GET-604 - <XForwardedForRequest at 0x7f5c5c1c0890 method='GET' uri='/_matrix/client/v1/media/thumbnail/matrix.org/JnXUoNhKLYYYbrWvRnfvfgVf?width=96&height=96&method=crop&allow_redirect=true' clientproto='HTTP/1.0' site='8008'> SynapseError: 401 - Missing access token
2025-03-27 06:46:25,565 - synapse.http.server - 130 - INFO - GET-605 - <XForwardedForRequest at 0x7f5c5c276ed0 method='GET' uri='/_matrix/client/v1/media/thumbnail/envs.net/357599d499ee2f1fb215236447f84c775a2e55d11788440473447170048?width=96&height=96&method=crop&allow_redirect=true' clientproto='HTTP/1.0' site='8008'> SynapseError: 401 - Missing access token

It being on the same server or some sort of cinny configuration might have something to do? Because official Cinny installation and Element work

[kfiven]

@jblumie can you share your cinny hosted url?

[jblumie]

Sure, it's https://cinny.fai.st

[ajbura]

@jblumie Thanks, it looks like your instance is not serving the service worker file https://cinny.fai.st/sw.js and instead return index html as response.

[jblumie]

Oh, you're right. Fixed it with the updated example nginx configuration, now the images work. Thanks! 😄

[vrcxz]

I get the same error on mine.

I am particularly new to matrix and its clients, so I'm not quite sure what I did wrong.
I have synapse on docker running at port 8008 and cinny on nginx (http).
When accessing the webserver on other devices, I get CORS error and so threw this abomination at the nginx config to make them the same origin.

server {
    listen 80;
    server_name 192.168.2.132;
 
    proxy_http_version 1.1;

    # Serve Cinny frontend
    location / {
        alias /var/www/html/;
        index index.html;
    }

    # Proxy Matrix Synapse API
    location /_matrix/ {
        proxy_pass http://localhost:8008;

        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_set_header Authorization $http_authorization;
        proxy_pass_header Authorization;

        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
        add_header Access-Control-Allow-Credentials true always;

         if ($request_method = OPTIONS) {
            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type "text/plain; charset=UTF-8";
            add_header Content-Length 0;
            return 204;
        }
    }
}

Now, I am getting the 401 Unauthorized Error.

Though it works fine on the device I'm hosting

This is what happens when I tried accessing on a different device

[kfiven]

@vrcxz It's because service workers needs secure contexts to work. So it won't work in case of http:// unless it is localhost.

[vrcxz]

Thanks for replying, that was fast. I tried self-signing my own ssl cert and also tried the device verification if that even helped.

server {
    listen 80;
    listen [::]:80;
    
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;

    ssl_certificate /etc/nginx/nginx-selfsigned.crt;
    ssl_certificate_key /etc/nginx/nginx-selfsigned.key;

    server_name 192.168.2.132;

    location / {
        root /var/www/html/;

        rewrite ^/config.json$ /config.json break;
        rewrite ^/manifest.json$ /manifest.json break;

        rewrite ^/sw.js$ /sw.js break;
        rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;

        rewrite ^/public/(.*)$ /public/$1 break;
        rewrite ^/assets/(.*)$ /assets/$1 break;

        rewrite ^(.+)$ /index.html break;
    }

    # Proxy for Matrix Synapse API endpoints
    location ~* ^(/_matrix|/_synapse|/_client) {
        proxy_pass http://localhost:8008;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        client_max_body_size 50M;
    }

    # Client discovery endpoint
    location /.well-known/matrix/client {
        return 200 '{"m.homeserver": {"base_url": "https://192.168.2.132"}}';
        default_type application/json;
        add_header Access-Control-Allow-Origin *;
    }
}

---

I can now view images on https://192.168.2.132 but only on the host machine. Still unauthorized on different device.

[vrcxz]

Okay, apparently the service workers don't work on sites with self-signed certs unless you explicitly trust it with your browser. This is unfortunate for my use case since I was meaning to have a portable LAN to share my server with my friends, and having them download and configure the certs on their browser (which I am not even sure how to do on android's chrome) one by one seems tedious. I wonder if there is an easier way to this.

[SPiRiT369]

I tried a new Cinny setup (checking it as Element Web alternative). I have the same problem. Images are not shown and I get 401 error, "Missing access token".
On Brave (Desktop + Android) it's completely broken.
On Firefox (Desktop) it's broken but if I press F5 it reloads the images properly.
I tried latest version and two versions back, same issue.
:/