Authentication support for images in the dashboard?

📝 Dashboards Hubitat Dashboard
1

Has anyone been able to get auth protected images to load in a dashboard?

My setup:

1- basic auth configured in apache:

<VirtualHost *:80>
   <Directory "/var/www/html/mysite">
        AuthType Basic
        AuthName "My Site"
        AuthUserFile /etc/apache2/.htpasswd
        Require valid-user
    </Directory>
</VirtualHost>

2- Accessing the site's files using https://myuser:mypassword@mysite:portnumber/path/to/file.png from a private/incognito window works using tested mainstream browsers

3- But the same URL doesn't work when entered in the Image URL field of an Image template in a HE dashboard: displays the broken image icon in the rendered dashboard.

4- Interestingly enough, when right-clicking on the broken-pic icon and selecting "Open Image in new tab", the image displays fine in the new tab.

Is there a trick to be able to load auth-protected pictures in the dashboard? Using other authentication schemes is fine in case that helps. Can't have the web site open to public since these auto-generated pictures concern my property.

2

This a local webserver or internet hosted? The image tile doesn't play nice with encapsulation or authentication. It also has problems with some codecs. There are ways around it but it depends on your use cases.

3

local server accessible from Internet. I'm entering the external address (full domain name) in the URL field because I have not yet figured out how to differentiate URLs for local and cloud dashboards (filed a separate post for that)

4

I got your fix for the dashboard links. This will use the correct url depending on if you are connected locally or remote.

image
image809×840 108 KB

5

If you want the actual url's you can get those off the dashboard in apps.

image
image1087×880 45.3 KB

6

For the images you'll have to keep it set as the domain url to access remotely, but I think that the authentication is going to give you a lot of issues. You could leave it local and then use a vpn so you could use an unauthenticated link.

1 Like
7

I think he wants to pull images from local/public resources, depending on if he is using a cloud or a local dashboard. If that is correct it would take some doing (programming wise) and is not a built-in ability.

Hosting images for access via web browser and hosting images for access via an 'app' are different in how the information is requested by the app from the server. I know from my work with smartly icon/font hosting that you need at add additional lines to the .htaccess file or something to allow it, but I do not recall it exactly (I'm not a web dev). I know if access my dashes using chrome (incognito) I can see more images than I can using the HE app, normal chrome, and via cloud none of my images load.

8

If you control the server one trick I’ve used is creating a token that can be passed as token= and if that’s not present sending a 403 forbidden. Other solution is to use an ip whitelist and put your house up, either way you use a traditional url and not the ones the tile has issues with.

2 Likes
9

My problem is rather to differentiate within the same dashboard where the resources get loaded. Since it's a separate issue from auth, filed a separate post: Different URLs for image tiles in local and cloud dashboards

10

Yea, I realized it after I posted but just didn't bother to delete my posts.

11

Been thinking about this for a while now and the iRobot integration displays an image of the robosucker depending on it's state... I wonder if there's something to dig out of that code. Nm, it's https but not authenticated.

12

I think @rob121 still provided the best option for the built-in image tile.

13

Thanks for the suggestion. Went with the token based approach. Below the revised apache conf in case that helps someone with a similar issue. It allows regular users to use basic auth (good for when using a browser on a web page loading many assets on the site) and query-parameter based tokens (good for HE dashboard referencing individual assets directly).

   <Directory "/var/www/html/mysite">
        AuthType Basic
        AuthName "My Site"
        AuthUserFile /etc/apache2/.htpasswd

        # only require auth if coming from the router, i.e. external access
        <If "-R '192.168.1.1'">
            <RequireAny>
                # either basic auth
                Require valid-user
                # or our secret token on the query string
                Require expr "(%{QUERY_STRING} =~ /token=secret/)"
            </RequireAny>
        </If>
    </Directory>

Would be nice if the dashboards supported supported automatically injecting http headers or query parameters for regex matches on URL resources. That would allow among other things for centralized credentials management, and http headers are less problematic than query parameters for some scenarios.

1 Like