Skip to content

NodeBB socket with CloudFlare

Solved Performance
24 3 9.2k 1
  • I bought a lot of Nginx reverse proxy servers, but cf is too slow in my country, I set my main server nodebb to be accessible only via vpn network, and I think that’s fine if no one attacks the server!

    @veronikya only accessible via VPN is very secure, and easily the best way to completely isolate the site from the rest of the Internet.

    The downside of this is that your site isn’t publicly accessible without the VPN connection which would mean it falls under the umbrella of deep web. However, depending on the content, it may be what is required in order to keep sensitive information or topics secured.

  • Hello

    just for test, I wanted to test that configuration in my dev instance :

    https://community.nodebb.org/topic/7930/using-cloudflare-with-nodebb

    But I have this error uninterruptedly :

    b5eb4be0-873f-45c7-8c70-08f83bf35e34-image.png
    And I don’t know why

    Nodebb config for socket.io :

    aa9716b3-506c-4551-a582-50d4cf91cf89-image.png

    Nginx config for socket.XXXX.XXXX

    server {
    	server_name socket.XXXXX.fr www.socket.XXXX.fr mail.socket.XXXX.fr;
    	root /home/XXXXX/domains/socket.XXXX.fr/public_html;
    	index index.php index.htm index.html;
    	access_log /var/log/virtualmin/socket.XXXX.fr_access_log;
    	error_log /var/log/virtualmin/socket.XXXX.fr_error_log;
    	fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    	fastcgi_param SERVER_SOFTWARE nginx;
    	fastcgi_param QUERY_STRING $query_string;
    	fastcgi_param REQUEST_METHOD $request_method;
    	fastcgi_param CONTENT_TYPE $content_type;
    	fastcgi_param CONTENT_LENGTH $content_length;
    	fastcgi_param SCRIPT_FILENAME "/home/XXXXX/domains/socket.XXXXXX.fr/public_html$fastcgi_script_name";
    	fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    	fastcgi_param REQUEST_URI $request_uri;
    	fastcgi_param DOCUMENT_URI $document_uri;
    	fastcgi_param DOCUMENT_ROOT /home/XXXXX/domains/socket.XXXXX.fr/public_html;
    	fastcgi_param SERVER_PROTOCOL $server_protocol;
    	fastcgi_param REMOTE_ADDR $remote_addr;
    	fastcgi_param REMOTE_PORT $remote_port;
    	fastcgi_param SERVER_ADDR $server_addr;
    	fastcgi_param SERVER_PORT $server_port;
    	fastcgi_param SERVER_NAME $server_name;
    	fastcgi_param PATH_INFO $fastcgi_path_info;
    	fastcgi_param HTTPS $https;
    	location ^~ /.well-known/ {
    		try_files $uri /;
    	}
    	location ~ "\.php(/|$)" {
    		try_files $uri $fastcgi_script_name =404;
    		default_type application/x-httpd-php;
    		fastcgi_pass unix:/var/php-fpm/16908800991403014.sock;
    	}
    
    	location / {
            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host            $http_host;
            proxy_set_header X-NginX-Proxy   true;
            proxy_set_header Upgrade         $http_upgrade;
            proxy_set_header Connection      "upgrade";
            proxy_redirect                   off;
            proxy_http_version               1.1;
            proxy_pass                       http://localhost:4567;
        }
    
    	fastcgi_split_path_info "^(.+\.php)(/.+)$";
    	location /cgi-bin/ {
    		gzip off;
    		root /home/XXXXX/domains/socket.XXXXX.fr/cgi-bin;
    		fastcgi_pass unix:/var/fcgiwrap/16908800991403014.sock/socket;
    		fastcgi_param SCRIPT_FILENAME "/home/XXXXXXX/domains/socket.XXXXXX.fr$fastcgi_script_name";
    		fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    		fastcgi_param SERVER_SOFTWARE nginx;
    		fastcgi_param QUERY_STRING $query_string;
    		fastcgi_param REQUEST_METHOD $request_method;
    		fastcgi_param CONTENT_TYPE $content_type;
    		fastcgi_param CONTENT_LENGTH $content_length;
    		fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    		fastcgi_param REQUEST_URI $request_uri;
    		fastcgi_param DOCUMENT_URI $document_uri;
    		fastcgi_param DOCUMENT_ROOT /home/XXXXXXX/domains/socket.XXXXXXX.fr/public_html;
    		fastcgi_param SERVER_PROTOCOL $server_protocol;
    		fastcgi_param REMOTE_ADDR $remote_addr;
    		fastcgi_param REMOTE_PORT $remote_port;
    		fastcgi_param SERVER_ADDR $server_addr;
    		fastcgi_param SERVER_PORT $server_port;
    		fastcgi_param SERVER_NAME $server_name;
    		fastcgi_param PATH_INFO $fastcgi_path_info;
    		fastcgi_param HTTPS $https;
    	}
    	listen x.x.x.x:443 ssl;
    	listen [x.x.x.x::1]:443 ssl;
        ssl_certificate /etc/letsencrypt/live/media.XXXXXX.fr/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/media.XXXXXXXX.fr/privkey.pem;
     # managed by Certbot
    }
    server {
        if ($host = socket.virtuaverse.fr) {
            return 301 https://$host$request_uri;
        } # managed by Certbot
    
    
    	server_name socket.XXXXXXXX.fr www.socket.XXXXXX.fr mail.socket.XXXXXXx.fr;
    	listen x.x.x.x;
    	listen [x.x.x.x::1];
        return 404; # managed by Certbot
    
    
    }
    

    Cloudflare config :

    6dd0bf70-d22d-4fb5-a5c3-e5a275722dcc-image.png

  • Hello

    just for test, I wanted to test that configuration in my dev instance :

    https://community.nodebb.org/topic/7930/using-cloudflare-with-nodebb

    But I have this error uninterruptedly :

    b5eb4be0-873f-45c7-8c70-08f83bf35e34-image.png
    And I don’t know why

    Nodebb config for socket.io :

    aa9716b3-506c-4551-a582-50d4cf91cf89-image.png

    Nginx config for socket.XXXX.XXXX

    server {
    	server_name socket.XXXXX.fr www.socket.XXXX.fr mail.socket.XXXX.fr;
    	root /home/XXXXX/domains/socket.XXXX.fr/public_html;
    	index index.php index.htm index.html;
    	access_log /var/log/virtualmin/socket.XXXX.fr_access_log;
    	error_log /var/log/virtualmin/socket.XXXX.fr_error_log;
    	fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    	fastcgi_param SERVER_SOFTWARE nginx;
    	fastcgi_param QUERY_STRING $query_string;
    	fastcgi_param REQUEST_METHOD $request_method;
    	fastcgi_param CONTENT_TYPE $content_type;
    	fastcgi_param CONTENT_LENGTH $content_length;
    	fastcgi_param SCRIPT_FILENAME "/home/XXXXX/domains/socket.XXXXXX.fr/public_html$fastcgi_script_name";
    	fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    	fastcgi_param REQUEST_URI $request_uri;
    	fastcgi_param DOCUMENT_URI $document_uri;
    	fastcgi_param DOCUMENT_ROOT /home/XXXXX/domains/socket.XXXXX.fr/public_html;
    	fastcgi_param SERVER_PROTOCOL $server_protocol;
    	fastcgi_param REMOTE_ADDR $remote_addr;
    	fastcgi_param REMOTE_PORT $remote_port;
    	fastcgi_param SERVER_ADDR $server_addr;
    	fastcgi_param SERVER_PORT $server_port;
    	fastcgi_param SERVER_NAME $server_name;
    	fastcgi_param PATH_INFO $fastcgi_path_info;
    	fastcgi_param HTTPS $https;
    	location ^~ /.well-known/ {
    		try_files $uri /;
    	}
    	location ~ "\.php(/|$)" {
    		try_files $uri $fastcgi_script_name =404;
    		default_type application/x-httpd-php;
    		fastcgi_pass unix:/var/php-fpm/16908800991403014.sock;
    	}
    
    	location / {
            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host            $http_host;
            proxy_set_header X-NginX-Proxy   true;
            proxy_set_header Upgrade         $http_upgrade;
            proxy_set_header Connection      "upgrade";
            proxy_redirect                   off;
            proxy_http_version               1.1;
            proxy_pass                       http://localhost:4567;
        }
    
    	fastcgi_split_path_info "^(.+\.php)(/.+)$";
    	location /cgi-bin/ {
    		gzip off;
    		root /home/XXXXX/domains/socket.XXXXX.fr/cgi-bin;
    		fastcgi_pass unix:/var/fcgiwrap/16908800991403014.sock/socket;
    		fastcgi_param SCRIPT_FILENAME "/home/XXXXXXX/domains/socket.XXXXXX.fr$fastcgi_script_name";
    		fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    		fastcgi_param SERVER_SOFTWARE nginx;
    		fastcgi_param QUERY_STRING $query_string;
    		fastcgi_param REQUEST_METHOD $request_method;
    		fastcgi_param CONTENT_TYPE $content_type;
    		fastcgi_param CONTENT_LENGTH $content_length;
    		fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    		fastcgi_param REQUEST_URI $request_uri;
    		fastcgi_param DOCUMENT_URI $document_uri;
    		fastcgi_param DOCUMENT_ROOT /home/XXXXXXX/domains/socket.XXXXXXX.fr/public_html;
    		fastcgi_param SERVER_PROTOCOL $server_protocol;
    		fastcgi_param REMOTE_ADDR $remote_addr;
    		fastcgi_param REMOTE_PORT $remote_port;
    		fastcgi_param SERVER_ADDR $server_addr;
    		fastcgi_param SERVER_PORT $server_port;
    		fastcgi_param SERVER_NAME $server_name;
    		fastcgi_param PATH_INFO $fastcgi_path_info;
    		fastcgi_param HTTPS $https;
    	}
    	listen x.x.x.x:443 ssl;
    	listen [x.x.x.x::1]:443 ssl;
        ssl_certificate /etc/letsencrypt/live/media.XXXXXX.fr/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/media.XXXXXXXX.fr/privkey.pem;
     # managed by Certbot
    }
    server {
        if ($host = socket.virtuaverse.fr) {
            return 301 https://$host$request_uri;
        } # managed by Certbot
    
    
    	server_name socket.XXXXXXXX.fr www.socket.XXXXXX.fr mail.socket.XXXXXXx.fr;
    	listen x.x.x.x;
    	listen [x.x.x.x::1];
        return 404; # managed by Certbot
    
    
    }
    

    Cloudflare config :

    6dd0bf70-d22d-4fb5-a5c3-e5a275722dcc-image.png

    @DownPW Does this issue manifest itself in Incognito mode?

  • yes, it does

  • Hello

    just for test, I wanted to test that configuration in my dev instance :

    https://community.nodebb.org/topic/7930/using-cloudflare-with-nodebb

    But I have this error uninterruptedly :

    b5eb4be0-873f-45c7-8c70-08f83bf35e34-image.png
    And I don’t know why

    Nodebb config for socket.io :

    aa9716b3-506c-4551-a582-50d4cf91cf89-image.png

    Nginx config for socket.XXXX.XXXX

    server {
    	server_name socket.XXXXX.fr www.socket.XXXX.fr mail.socket.XXXX.fr;
    	root /home/XXXXX/domains/socket.XXXX.fr/public_html;
    	index index.php index.htm index.html;
    	access_log /var/log/virtualmin/socket.XXXX.fr_access_log;
    	error_log /var/log/virtualmin/socket.XXXX.fr_error_log;
    	fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    	fastcgi_param SERVER_SOFTWARE nginx;
    	fastcgi_param QUERY_STRING $query_string;
    	fastcgi_param REQUEST_METHOD $request_method;
    	fastcgi_param CONTENT_TYPE $content_type;
    	fastcgi_param CONTENT_LENGTH $content_length;
    	fastcgi_param SCRIPT_FILENAME "/home/XXXXX/domains/socket.XXXXXX.fr/public_html$fastcgi_script_name";
    	fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    	fastcgi_param REQUEST_URI $request_uri;
    	fastcgi_param DOCUMENT_URI $document_uri;
    	fastcgi_param DOCUMENT_ROOT /home/XXXXX/domains/socket.XXXXX.fr/public_html;
    	fastcgi_param SERVER_PROTOCOL $server_protocol;
    	fastcgi_param REMOTE_ADDR $remote_addr;
    	fastcgi_param REMOTE_PORT $remote_port;
    	fastcgi_param SERVER_ADDR $server_addr;
    	fastcgi_param SERVER_PORT $server_port;
    	fastcgi_param SERVER_NAME $server_name;
    	fastcgi_param PATH_INFO $fastcgi_path_info;
    	fastcgi_param HTTPS $https;
    	location ^~ /.well-known/ {
    		try_files $uri /;
    	}
    	location ~ "\.php(/|$)" {
    		try_files $uri $fastcgi_script_name =404;
    		default_type application/x-httpd-php;
    		fastcgi_pass unix:/var/php-fpm/16908800991403014.sock;
    	}
    
    	location / {
            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host            $http_host;
            proxy_set_header X-NginX-Proxy   true;
            proxy_set_header Upgrade         $http_upgrade;
            proxy_set_header Connection      "upgrade";
            proxy_redirect                   off;
            proxy_http_version               1.1;
            proxy_pass                       http://localhost:4567;
        }
    
    	fastcgi_split_path_info "^(.+\.php)(/.+)$";
    	location /cgi-bin/ {
    		gzip off;
    		root /home/XXXXX/domains/socket.XXXXX.fr/cgi-bin;
    		fastcgi_pass unix:/var/fcgiwrap/16908800991403014.sock/socket;
    		fastcgi_param SCRIPT_FILENAME "/home/XXXXXXX/domains/socket.XXXXXX.fr$fastcgi_script_name";
    		fastcgi_param GATEWAY_INTERFACE CGI/1.1;
    		fastcgi_param SERVER_SOFTWARE nginx;
    		fastcgi_param QUERY_STRING $query_string;
    		fastcgi_param REQUEST_METHOD $request_method;
    		fastcgi_param CONTENT_TYPE $content_type;
    		fastcgi_param CONTENT_LENGTH $content_length;
    		fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    		fastcgi_param REQUEST_URI $request_uri;
    		fastcgi_param DOCUMENT_URI $document_uri;
    		fastcgi_param DOCUMENT_ROOT /home/XXXXXXX/domains/socket.XXXXXXX.fr/public_html;
    		fastcgi_param SERVER_PROTOCOL $server_protocol;
    		fastcgi_param REMOTE_ADDR $remote_addr;
    		fastcgi_param REMOTE_PORT $remote_port;
    		fastcgi_param SERVER_ADDR $server_addr;
    		fastcgi_param SERVER_PORT $server_port;
    		fastcgi_param SERVER_NAME $server_name;
    		fastcgi_param PATH_INFO $fastcgi_path_info;
    		fastcgi_param HTTPS $https;
    	}
    	listen x.x.x.x:443 ssl;
    	listen [x.x.x.x::1]:443 ssl;
        ssl_certificate /etc/letsencrypt/live/media.XXXXXX.fr/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/media.XXXXXXXX.fr/privkey.pem;
     # managed by Certbot
    }
    server {
        if ($host = socket.virtuaverse.fr) {
            return 301 https://$host$request_uri;
        } # managed by Certbot
    
    
    	server_name socket.XXXXXXXX.fr www.socket.XXXXXX.fr mail.socket.XXXXXXx.fr;
    	listen x.x.x.x;
    	listen [x.x.x.x::1];
        return 404; # managed by Certbot
    
    
    }
    

    Cloudflare config :

    6dd0bf70-d22d-4fb5-a5c3-e5a275722dcc-image.png

    @DownPW You should simplify the nginx config - below a suggestion

    server {
    	server_name socket.XXXXX.fr www.socket.XXXX.fr mail.socket.XXXX.fr;
    	access_log /var/log/virtualmin/socket.XXXX.fr_access_log;
    	error_log /var/log/virtualmin/socket.XXXX.fr_error_log;
    	listen x.x.x.x:443 ssl;
    	listen [x.x.x.x::1]:443 ssl;
        ssl_certificate /etc/letsencrypt/live/media.XXXXXX.fr/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/media.XXXXXXXX.fr/privkey.pem;
    
    	location / {
            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host            $http_host;
            proxy_set_header X-NginX-Proxy   true;
            proxy_set_header Upgrade         $http_upgrade;
            proxy_set_header Connection      "upgrade";
            proxy_redirect                   off;
            proxy_http_version               1.1;
            proxy_pass                       http://localhost:4567;
        }
    
    
     # managed by Certbot
    }
    server {
        if ($host = socket.virtuaverse.fr) {
            return 301 https://$host$request_uri;
        } # managed by Certbot
    	server_name socket.XXXXXXXX.fr www.socket.XXXXXX.fr mail.socket.XXXXXXx.fr;
    	listen x.x.x.x;
    	listen [x.x.x.x::1];
        return 404; # managed by Certbot
    }
    
  • @phenomlab done

  • @DownPW Also remove these lines and restart nginx

    root /home/XXXXX/domains/socket.XXXX.fr/public_html;
    
    	index index.php index.htm index.html;
    
  • Same

    image.png

  • I see this on start log nodebb

    e5fc0e62-fa92-461d-9bfe-2b2b9ace2232-image.png

  • phenomlabundefined phenomlab forked this topic on
  • There’s more of an issue here - try to change any CSS or JS in the ACP, and you’ll see that it does not save.

  • ???

  • I see this on start log nodebb

    e5fc0e62-fa92-461d-9bfe-2b2b9ace2232-image.png

    @DownPW Now working for me in Incognito. Can you check

  • There’s more of an issue here - try to change any CSS or JS in the ACP, and you’ll see that it does not save.

    @phenomlab said in NodeBB socket with CloudFlare:

    There’s more of an issue here - try to change any CSS or JS in the ACP, and you’ll see that it does not save.

    due to socket.io configuration in nodebb config.json file

    Actually I have delete socket.io block and change CSS and save is good.

  • @phenomlab said in NodeBB socket with CloudFlare:

    There’s more of an issue here - try to change any CSS or JS in the ACP, and you’ll see that it does not save.

    due to socket.io configuration in nodebb config.json file

    Actually I have delete socket.io block and change CSS and save is good.

    @DownPW Ok, but that now means you should not need the socket A record anymore because it’s not used. From the logs, the socket is running on the site’s URL.

  • normal that it is not used (A record) @phenomlab because there currently, I do not use it because the socket.io block is removed from config.json.

    I’m just in normal mode with Cloudflare :

    5272437e-9b74-4482-881a-5c376cf73900-image.png

    I can put it back if you want ?

  • normal that it is not used (A record) @phenomlab because there currently, I do not use it because the socket.io block is removed from config.json.

    I’m just in normal mode with Cloudflare :

    5272437e-9b74-4482-881a-5c376cf73900-image.png

    I can put it back if you want ?

    @DownPW It seems to be working fine without it, so I’d leave it. I see zero socket errors, so all good.

  • because I’m alone on the server.

    The goal is to try to market this method before putting it into production where i have a lot of errors

    And we can see that it doesn’t work when I try to reroute the web sockets in non-proxied mode. (socket error, no save when chnage in ACP, etc…)

    I don’t know if I can make myself understood. @phenomlab 🙂

  • because I’m alone on the server.

    The goal is to try to market this method before putting it into production where i have a lot of errors

    And we can see that it doesn’t work when I try to reroute the web sockets in non-proxied mode. (socket error, no save when chnage in ACP, etc…)

    I don’t know if I can make myself understood. @phenomlab 🙂

    @DownPW Understood. Even with just the two of us connected, I was still getting the websocket error, but I think that was related to config etc. In all honesty, this is yet another reason why I stopped using CF. I know you need it to hide your IP address, but if you bypass CF for the socket, you are exposing your IP anyway.

  • I know, I know,

    too bad… I just wanted to test this method but it seems more complex than it looks to make it work correctly

    The reverse proxy method is currently too expensive for me and technically too abstract

  • I know, I know,

    too bad… I just wanted to test this method but it seems more complex than it looks to make it work correctly

    The reverse proxy method is currently too expensive for me and technically too abstract

    @DownPW it’s your only realistic option at this stage.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • 4 Votes
    3 Posts
    479 Views
    thanks @DownPW ! this is definitely very helpful.
  • Email validation NodeBB

    Bugs nodebb
    21
    3 Votes
    21 Posts
    7k Views
    @Panda said in Email validation NodeBB: Did you configure that as a custom change to the usual quote icon. How do you do that? I notice on NodeBB site its a solid blue quotes Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.
  • build nodebb Warning in entrypoint size limit

    Solved Performance nodebb
    2
    0 Votes
    2 Posts
    874 Views
    @eeeee they are nothing to worry about, and can be ignored.
  • NodeBB: The global Search option

    Solved Configure search nodebb
    5
    0 Votes
    5 Posts
    1k Views
    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it. The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.
  • NodeBB v3.0.0-rc.1

    Performance nodebb v3.0.0
    1
    1 Votes
    1 Posts
    546 Views
    No one has replied
  • 1 Votes
    3 Posts
    960 Views
    @qwinter yes, I recently migrated this site to CF in full and noticed the same thing. Seems CF also has native socket support now under the free plan, so win/win. I’ve not noticed any degradation of service since moving so happy to stay put for the time being.
  • ineffecient use of space on mobile

    Solved Customisation nodebb
    10
    2
    7 Votes
    10 Posts
    2k Views
    @phenomlab Thanks
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    107k Views
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!