MAIN UI custom icons not displaying in HTTPS (8443)

Add-ons UIs
1

System
openhabian on Raspberry Pi 8Gb Ram (multiple systems)

openHAB Version: 5.0.3 & 5.1 & 5.1.2.202512301418

UI Browser: Safari, Chrome and openHAB UI on IOS (both iPad and iPhone)

I have an issue i never noticed before and it appears on all three releases

i have a custom widget that display cloud and uses custom icons

if I view the page using http (port 8080 the icons display) but if I change to https(port 8443) then the icons do not display

All i do is change the protocol http/https and the port 8080/8443 using the same url otherwise

any advice and also tagging @florian-h05 because of the issue in 5.1

the html are similar but the https has an additional class=“no-icon” inserted not that i thinbk thats important but at least with the http(port 8080) the icons display

EDIT: for what its worth - I have one system still running 4.3.8 with the same widget and this does not happen.

EDIT: the custom icons are PNG files so this does not match with the “format=svg” in the html

http for the icon is first and the https second

HTTP:
<img onload="this.classList.remove('no-icon')" onerror="this.classList.add('no-icon')" color="black" f7="cloud" icon="/classic/meteosource-4" padding-left="5px" width="30" slot="default" src="/icon//classic/meteosource-4?format=svg&amp;anyFormat=true&amp;iconset=classic" style="width: 30px; height: auto; cursor: auto;">

HTTPS:
<img onload="this.classList.remove('no-icon')" onerror="this.classList.add('no-icon')" color="black" f7="cloud" icon="/classic/meteosource-4" padding-left="5px" width="30" slot="default" src="/icon//classic/meteosource-4?format=svg&amp;anyFormat=true&amp;iconset=classic" class="no-icon" style="width: 30px; height: auto; cursor: auto;">

image
image382×1278 83.6 KB

image
image394×1280 35.6 KB

2

When reporting issues with the UI, please always provide the network tab and the browser console.

3

Hi Florian

Apologies - i did not even know much about those but learnt a ton just looking at things - thanks for that.

I will do some more digging now that I know where to look but the first thing I can report back is on the HTTPS side of things those icons get a 400 from the openHAB webserver

I filtered on those to limit the data - strange how there icons just do not appear in https:

PS -

There is one error on the HTTP Side but i looking at the naming it could be an Error i have in my widget text - this i will confirm (last Screenshot) this same error appears in the https (the first one ) I will have a look at my widget and confirm / fix if it is in the widget coding)

Apologies for the screenshots - is there a better way to feedback the data from those tabs since there is a lot there

image
image1724×474 29.5 KB

image
image1724×677 95.1 KB

image
image1726×624 40.9 KB

image
image1720×500 36.4 KB

image
image1727×443 40.2 KB

image
image1718×616 42.2 KB

image
image1726×473 26.9 KB

4

I have tested with a direct ip address instead of the name (since the name will also resolve to a tailscale address ) –> the local IP shows the same error

I see that I have a // in the URL and perhaps that is causing the 400 on the https side - i will amend the Widget and report back

5

Hi Florian

The double // was indeed causing the issue on the HTTPS Side seems the http (insecure) is more tolerant.

I have a /classic/meteosource-6 and now have classic/meteosource-6 so I assume that the server url has a trailing “/”

thanks for the assistance.

Not sure if you need to do anything on this but it is worth a broader mention since we see performance gains when using https vs http

I can mark this as solved unless anything else needs mention/documenting

1 Like