websocket loop error reporting in Safari

[medivh63]

When I'm on chrome everything is fine, only in Safari it recurs 。How do I solve this problem, I don't see an example in the documentation

[Nutomic]

Can you translate those chinese error messages? Or just post your instance url?

[medivh63]

aboring.site

[Nutomic]

Sorry i missed the part about safari. Sounds identical to https://github.com/LemmyNet/lemmy-ui/issues/730. Can you reproduce the problem on lemmy.ml? If not, there is something wrong with the Lemmy installation.

[dessalines]

How did you install lemmy, and can you post your nginx?

[medivh63]

Sorry i missed the part about safari. Sounds identical to LemmyNet/lemmy-ui#730. Can you reproduce the problem on lemmy.ml? If not, there is something wrong with the Lemmy installation.

sorry ，I can't reproduce . everything seems to be working fine now, maybe I upgraded macos yesterday. I have another macbook, I will try to reproduce later

[medivh63]

How did you install lemmy, and can you post your nginx?

I followed the lemmy installation documentation:Install with Ansible

Here are my nginx parameters：

cat aboring.site.conf 
limit_req_zone $binary_remote_addr zone=aboring.site_ratelimit:10m rate=1r/s;

server {
    listen 80;
    listen [::]:80;
    server_name aboring.site;
    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name aboring.site;

    ssl_certificate /etc/letsencrypt/live/aboring.site/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/aboring.site/privkey.pem;

    # Various TLS hardening settings
    # https://raymii.org/s/tutorials/Strong_SSL_Security_On_nginx.html
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    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_session_timeout  10m;
    ssl_session_cache shared:SSL:10m;
    ssl_session_tickets on;
    ssl_stapling on;
    ssl_stapling_verify on;

    # Hide nginx version
    server_tokens off;

    # Enable compression for JS/CSS/HTML bundle, for improved client load times.
    # It might be nice to compress JSON, but leaving that out to protect against potential
    # compression+encryption information leak attacks like BREACH.
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
    gzip_vary on;

    # Only connect to this site via HTTPS for the two years
    add_header Strict-Transport-Security "max-age=63072000";

    # Various content security headers
    add_header Referrer-Policy "same-origin";
    add_header X-Content-Type-Options "nosniff";
    add_header X-Frame-Options "DENY";
    add_header X-XSS-Protection "1; mode=block";

    # Upload limit for pictrs
    client_max_body_size 20M;

    # frontend
    location / {
      # The default ports:
      # lemmy_ui_port: 1235
      # lemmy_port: 8536

      set $proxpass "http://0.0.0.0:20754";
      if ($http_accept ~ "^application/.*$") {
        set $proxpass "http://0.0.0.0:7505";
      }
      if ($request_method = POST) {
        set $proxpass "http://0.0.0.0:7505";
      }
      proxy_pass $proxpass;

      rewrite ^(.+)/+$ $1 permanent;

      # Send actual client IP upstream
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # backend
    location ~ ^/(api|pictrs|feeds|nodeinfo|.well-known) {
      proxy_pass http://0.0.0.0:7505;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      # Rate limit
      limit_req zone=aboring.site_ratelimit burst=30 nodelay;

      # Add IP forwarding headers
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }


    # Redirect pictshare images to pictrs
    location ~ /pictshare/(.*)$ {
      return 301 /pictrs/image/$1;
    }
}

map $remote_addr $remote_addr_anon {
  ~(?P<ip>\d+\.\d+\.\d+)\.    $ip.0;
  ~(?P<ip>[^:]+:[^:]+):       $ip::;
  127.0.0.1                   $remote_addr;
  ::1                         $remote_addr;
  default                     0.0.0.0;
}

[dessalines]

Could you test and see if this is still an issue on : https://voyager.lemmy.ml/post/160

[sam365724]

I can confirm, that safari is broken on mac os.

Refused to connect to wss://domain.com/api/v3/ws because it does not appear in the connect-src directive of the Content Security Policy.
i — client.js:2:183632

https://stackoverflow.com/questions/68746912/safari-gives-error-refused-to-connect-to-because-it-does-not-appear-in-th

@dessalines Is there a quick fix for this? How can i change the CSP?

[sam365724]

The problem is that the wsUriBase is wrong, it should be wss:// in the csp, but it's acually ws://

This is the string copied from browser with dev tools: content-security-policy: default-src 'none'; connect-src 'self' ws://domain.com; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'

Where can i change that in the config? It seems that https and thus wss is not set correct.y @Nutomic @dessalines Root cause found again, hopefully.

Also your CSP blocks webmanifest on safari:

Refused to load https://domain.net/static/assets/manifest.webmanifest because it appears in neither the manifest-src directive nor the default-src directive of the Content Security Policy.
client.js:2:938798

I can confirm that changing the CSP as outlined above fixes the problem. I did it with nginx config: proxy_hide_header Content-Security-Policy; proxy_add .... ;

[Nutomic]

This problem should be fixed already in main branch, although we dont have any Apple devices to test with. Here is the current CSP.

If you run your own Lemmy instance, you could compile from source to get the fix. Basically checkout 0.16.6 tag, apply changes in the file I linked above, then docker build and deploy docker image on your server.

[sam365724]

Could you push a new 0.16.7 rc version for this please? Then i can easily use the docker image.

[Nutomic]

There is actually dessalines/lemmy-ui:0.16.7-rc.2 already out, you can try that and see if it fixes the problem.

[dessalines]

0.16.7 is building now, should be done in 30 mins or so.

[sam365724]

Confirmed that 0.16.7 works on Safari.