Page Layout/CSS issues when enabling SSL (Nginx)

[Mattz0r]

• Steps to reproduce an issue.

1. Navigate to the NMS url via https

2. You will see the visual problem with the layout not displaying correctly, like it does with the http version.

• The output of ./validate.php

===========================================

Component	Version
LibreNMS	22.10.0-96-g0e9bb0407 (2022-11-08T17:22:37+00:00)
DB Schema	2022_08_15_084507_add_rrd_type_to_wireless_sensors_table (248)
PHP	8.1.11
Python	3.6.8
Database	MariaDB 10.3.35-MariaDB
RRDTool	1.7.0
SNMP	5.8
===========================================

[OK] Composer Version: 2.4.4
[OK] Dependencies up-to-date.
[OK] Database connection successful
[OK] Database Schema is current
[OK] SQL Server meets minimum requirements
[OK] lower_case_table_names is enabled
[OK] MySQL engine is optimal
[OK]
[OK] Database schema correct
[FAIL] Time between this server and the mysql database is off
Mysql time 2022-11-09 13:50:18
PHP time 2022-11-09 12:50:18
[OK] Active pollers found
[OK] Dispatcher Service not detected
[OK] Locks are functional
[OK] Python poller wrapper is polling
[OK] Redis is unavailable
[OK] rrd_dir is writable
[OK] rrdtool version ok

Visiting with HTTPS:

I can’t for the life of me figure out why the css isn’t loading…

P.S I’m a new user so can only attach one image, so I’ve uploaded the one with the broken layout… the other image is basically the login page formatted correctly, when not visiting via https.

nginx config:

server {

 listen      443 ssl http2;
 server_name nms;
 root        /opt/librenms/html;
 index       index.php;

access_log /var/log/nginx/scripts.log scripts;

ssl_certificate /etc/nginx/ssl/nms.crt;
ssl_certificate_key /etc/nginx/ssl/nms.key;

 charset utf-8;
 gzip on;
 gzip_types text/css application/javascript text/javascript application/x-javascript image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon;
 location / {
  try_files $uri $uri/ /index.php?$query_string;
}


 location ~ [^/]\.php(/|$) {
  fastcgi_pass unix:/run/php-fpm/librenms.sock;
  fastcgi_split_path_info ^(.+\.php)(/.+)$;
  include fastcgi.conf;
 }
 location ~ /\.(?!well-known).* {
  deny all;
 }
}

Regards,

Matt

[rhinoau]

Look at the browser dev tools / inspect and see what it’s accessing and if anything is failing.

Not sure if there is maybe something trying to access a http:// path?

I have port 80 listening and redirecting like this:

server {
   listen         80;
   server_name    x.x.x.x;
   root           /opt/librenms/html;
   index          index.php;
   return         301 https://$server_name$request_uri;
   ...
   ...
}

[Mattz0r]

Looks like something is still referring to http, and failing :S

I have my baseurl just set to / so not sure why it’s using http…

[vps-eric]

I just ran into this issue, but when setting up Caddy as a reverse proxy. I had to set APP_URL and ASSET_URL in /opt/librenms/.env to https://your.fqdn.com and reload services. This solved the CSS part, but AJAX queries were still over HTTP. To resolve that, I set the X-FORWARDED-PROTO header to https, and it began to work properly.