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.
:/

[mserajnik]

Commenting this across a few related issue threads for visibility:

---

We upgraded our Synapse instance from a pre-1.11 spec version to the latest one yesterday.
Immediately we also hit this issue in Cinny (using the latest dev commit) where authenticated media requests are missing the Authorization header.

The Clear Cache & Reload button works, but it keeps seemingly randomly breaking afterwards, even with completely fresh browser sessions or different browsers that never had Cinny open before. The problem doesn't happen with Element, suggesting a bug with the MSC3916 implementation in Cinny.

According to a debug session with Claude, there might be a race condition with the service worker not being able to append the Authorization header in all cases. However, we weren't able to implement a working fix based on this knowledge, even with access token caching directly in the service worker and proactive token updates. We are also not sure if that is actually the problem, because once it breaks for one request it then breaks for all subsequent requests too, hinting towards a deeper issue (if it was a simple race condition, it shouldn't manifest itself for every single request after the first failed one).

Edit: It seems like we were able to fix this by changing the service worker to use a single event listener for all messages, see 5f91681 (in my fork). If that doesn't fully fix it, it at least alleviates the issue greatly, since none of our users has experienced it since then.

[mserajnik]

Immediately we also hit this issue in Cinny (using the latest dev commit) where authenticated media requests are missing the Authorization header.
The Clear Cache & Reload button works, but it keeps seemingly randomly breaking afterwards, even with completely fresh browser sessions or different browsers that never had Cinny open before. The problem doesn't happen with Element, suggesting a bug with the MSC3916 implementation in Cinny.

Facing the same issue on app.cinny.in (v4.10.3) + latest stable synapse. Works fine in Element with the same server.
It would be great to include this partial fix into the project.

We tried using the latest release yesterday (unmodified by us), which changes quite a bit about how the service worker operates (which made us hopeful this issue would be fixed), but it immediately started breaking again (as described in previous messages).

Our own attempt to fix this (that I already had linked previously) also won't work anymore now without undoing the recent changes here (which seems less than ideal going forward, we don't want our fork to deviate too much from upstream).