Constantly having to authorize when using static links

I'm using example buttons - Dashboard 2 Beta development - #162 by hotNipi but finding whenever I load the DB page I have to re-authorized it :hot_face:
I'm using httpStaticAuth to protect endpoints, and thinking that it's due to the CSS using a static served image which is hosted in my NR instance.

.dusk_city_icon{
    --icon_src: url("/static/noderedbutton/cityscape-at-dusk.svg");
    --button_background:#f4900c;
}

Any way to stop this PITA, apart from hosting the image elsewhere or using inbuilt icons?

As always, if you used a proxy to handle all the TLS and auth, everything would be covered I think.

If your are also using httpNodeAuth and depending on how you set httpStaticRoot and httpNodeRoot, the static paths may be behind 2 basic-auth middlewares.

Just tried hosting the image files in Github, and accessing them via Github Pages instead of serving them via node-RED static.
Seems to solve the problem :smiley:

Any problems with using this solution?

I can think of a number of potential security and operational related issues. But much depends on the detailed configuration.

It would certainly be better to work out why this is happening and fix it. I don't know enough about your config to suggest something I'm afraid.

You could turn the SVG into a data: embedded image but that is likely to be quite large. May be worth trying though. Then the image can be part of your CSS directly without having to load it.

2 Likes

If you now wonder how to do it - just find an online converter and convert the svg to the base64 string and then replace the content of the --icon_src url

2 Likes

You know me too well!!

Thanks @TotallyInformation & @hotNipi - Yes, that works well, and on simple icons, the file size isn't too bad.

1 Like