Portless HTTPS setup using the new ssl features

[carsoni]

I've been trying for a while to setup a port-less https connection to snapweb e.g. calling https://musicserver.example.com and getting to the snapweb with fully working features.

I finally got this working this morning and thought I would share the setup. I know it's not directly related to snapcast but it seemed like this might be useful info for users.

The basic architecture is to have a running snapserver - let's say on musicserver.example.com but just on http so access to snapweb would be via port 1780 - http://musicserver.example.com:1780

Then put an nginx proxy in front to catch and proxy calls to https://musicserver.example.com into 127.0.0.1:443. NB To maintain other https access to the server it's best to have the nginx server settings listen on the IP address of the server to avoid :443 clashes

And make the necessary adjustments to snapserver.conf to have it listen on 127.0.0.1:443 (actually the nginx file proxys to https://127.0.0.1) for the proxied calls.

Assuming your snapserver is up and running on http here are the snapserver.conf changes and the nginx site setting. Note that the certificate san and the "host" entry in snapserver.conf need to match.

Now you have clean secure access to snapweb with no ugly port numbers in the URL and images showing up in the UI. :-)

SNAPSERVER.CONF

#Partial Snapserver.conf (NB the[ssl] block needs to come before the [http] block)
[ssl]
certificate = "/etc/ssl/musicserver.crt"
certificate_key = "/etc/ssl/musicserver.key"

[http]
enabled = true
bind_to_address = 127.0.0.1
port = 1780
doc_root = /usr/share/snapserver/snapweb
host = musicserver.example.com

# ── Enable HTTPS on loop-back ──────────────────────────────────
ssl_enabled = true
ssl_port = 443
ssl_bind_to_address = 127.0.0.1

NGINX SITE FILE

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name musicserver.example.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

# Main HTTPS reverse proxy for Snapweb
server {
    listen 192.168.1.196:443 ssl http2;
    server_name musicserver.example.com;

    ssl_certificate     /etc/ssl/musicserver.crt;
    ssl_certificate_key /etc/ssl/musicserver.key;

    # ---------- LAN ACL ----------
    allow 192.168.1.0/24;  allow 127.0.0.1;  deny all;


    # Security headers
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
    add_header X-Frame-Options DENY;
    add_header X-Content-Type-Options nosniff;

    # CORS headers (global, also repeated in location blocks as needed)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

    # This next block covers both
    #   /__image_cache?name=…
    #   /__image_cache/?name=…
    # ^~ /__image_cache means “if the URI starts with /__image_cache, stop searching and use this block.”

    location ^~ /__image_cache {
        proxy_pass            https://127.0.0.1$request_uri;
        proxy_ssl_verify      off;
        proxy_ssl_server_name off;

        add_header Access-Control-Allow-Origin  * always;
        add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept" always;

        if ($request_method = OPTIONS) {
          add_header Content-Length 0;
          add_header Content-Type   text/plain;
          return 204;
        }
    }

    # Main Snapweb UI + WebSockets + CORS preflight
    location / {
        if ($request_method = OPTIONS ) {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            return 204;
        }

        proxy_pass https://127.0.0.1;
        proxy_ssl_verify off;
        proxy_ssl_server_name off;
        proxy_http_version 1.1;

        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;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_buffering     off;     # live audio / WS
        proxy_read_timeout  3600;

    }

    # Optional: favicon proxy
    location = /favicon.ico {
        proxy_pass https://127.0.0.1/favicon.ico;
        proxy_ssl_verify off;
        proxy_ssl_server_name off;
    }

    #Getting to the index.js for the snapweb UI
    location /assets/index- {
        proxy_pass https://127.0.0.1;
        proxy_ssl_verify off;
        proxy_ssl_server_name off;
        proxy_set_header Host $host;

    }
}