Lazyload in Safari not working when Nginx reverse proxy to node.js

Question

Here is the problem: I have a node.js server which is behind a Nginx proxy. Nginx is configured to serve the static contents and proxy_pass others to node.js Also, in the node app, the images are loaded by a lazyloading solution.

In Chrome, when I access my app (example.com), everything works as it should. The lazyload works fine and images are loaded and served by nginx.

In Safari, my app (example.com) loads fine (which means that node.js server and nginx proxy are working). But images are not loaded ! It seams the request from lazyload are not sent or did not get any response.

If I enter the images' uri directly in Safari, they loads fine.

I should mention that when I locally use node.js server (without nginx) there is no problem even in Safari.

So It seems there is problem between lazyload, Nginx, Node.js and Safari, as everything is ok in Chrome.

Below you find my nginx.conf:

http {
   log_format  main  ‘$remote_addr - $remote_user [$time_local] “$request” ’
                     ‘$status $body_bytes_sent “$http_referer” ’
                     ‘“$http_user_agent” “$http_x_forwarded_for”’;
   access_log  /var/log/nginx/access.log  main;

   sendfile            on;
   tcp_nopush          on;
   tcp_nodelay         on;
   keepalive_timeout   65;
   types_hash_max_size 2048;

   include             /etc/nginx/mime.types;
   default_type        application/octet-stream;

   server {

    server_name  example.com www.example.com;

        access_log /var/log/nginx/example.com/nginx.access.log;
        error_log  /var/log/nginx/example.com/nginx.error.log;

    location /img/ {
       root          /var/nginx/html;
    }

    location / {

        proxy_pass http://127.0.0.1:3000; #nodejs server
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header 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 https;
     }

    error_page 404 /404.html;
            location = /40x.html {
        }

    error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

Answer 1

I would first try removing these if you're also using X-Forwarded-Proto

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

This allows you to terminate the SSL with the proxy, while speaking plain http downstream, therefore you should not need to upgrade the connection.

Answer 2

I just found the answer to my question myself. I post here in case it could be helpful for others.

I noticed in Safari console that it is blocking images from loading as their uri begin with http not https (insecure content over https), so they are not loaded But Chrome shows insecure contents over https, so images are loaded. It just shows a warning beside the url field.

So, it has nothing to do with node.js or nginx reverse proxy :)