Google Chrome - Mixed Content - Media Not Showing

In my case, its the stream coming from tinycam that still isnt working, w/ nip.io.
maybe it needs to come direct from the camera?

No, there’s no such limitation.

I would recommend creating a separate thread and sharing the details of your configuration so we can best assist you.

:page_facing_up: Effective Ways to Seek Help and Troubleshoot

1 Like

this may be a dumb question, but does FKB act as its own browser or leverage default browser app of device? Can it call Firefox?

:point_down:

And no, you can’t have it run the Firefox engine.

1 Like

My FKB just started not loading my local lan images, thanks for the nip.io workaround! Really easy once I got my head around it lol.

1 Like

I’m on a Kindle with FK, and it does not seem to work, it does work in Chrome though. I assume that is has to do with the SSL/Mixed, even when I change the settings.

Could be… hard to tell without more details. Fully Kiosk uses the ‘webview’ bundled with the system. So if that webview is running version 85 or newer, it would be impacted by the mixed content issue (HTTP image on HTTPS page)… or if it’s running 111 or newer, it would be impacted by the local IP limitation.

Both are discussed in detail in the posts above including workarounds for both.

wanted to update; everything all of a sudden started working, including using nip.io. i didn’t touch it or change anything, and one day it started showing up. i assume something was updated on the browser side.

1 Like

Hi,

Could you give an example how the full adress should look like given my cam is at
http://192.168.1.xx/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=kd7f8djlleaijd8sjs9e&user=admin&password=xxxx&st_uuid=123456

woudl it be
http://192-168-2-131.nip.io:88/cgi-bin/92.168.1.xx/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=kd7f8djlleaijd8sjs9e&user=admin&password=xxxx&st_uuid=123456
thx
??

That’s close. If your original URL doesn’t have a port, then you don’t need to include a port in the wildcard DNS version either.

In your original sample URL, the port was not included and since it was an HTTP request, it would be implied to be port 80. In your sample nip.io converted URL, you had appended a port of :88. Also note that your sample nip.io URL had some weirdness where that path seemed to have extra stuff added like /cgi-bin twice and 92.168.1.xx included in the path as well.

I also suspect that the st_uuid came from the SharpTools autorefresh, so I dropped that, but if that’s something else, you could of course add it back in if needed.


So reading between the lines from your example, that would become something like the following, assuming your sample nip.io URL was the actual local IP and the port wasn’t on the original URL:

nip.io
http://192-168-2-131.nip.io/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=kd7f8djlleaijd8sjs9e&user=admin&password=xxxx

Thanks a lot!
Took me a couple of days to figure it out

The links work fine on media on my PC with chrome browser.
However it doesn’t work on my android phone, nor on my android tablet which are in the same house /wifi AP “failed to load image”

any hint on how to get this working?

What browser are you using on those devices?

You may need to disable Mixed Content blocking on those browsers as well as noted in the first post of the thread.

As a first step in trouleshooting, I would also double check that those devices are able to view the media URL you are using directly in the browser – directly in the URL bar of the browser rather than embedded within a Media Item – that helps verify that they can resolve the URL as expected and communicate directly with the camera.

1 Like

Can this work for Open in Modal?

I’d like to use a lovelace dashboard as a popup, but so far without luck… I’ve disabled mixed content blocking and have sent the site through st-ip.net . It seems to launch in a new window, but won’t open in modal.

What error messages are you seeing when you review your browser console?

The message is: “The webpage does not appear to be loading. The website may block being loaded within another page. Try changing the hyperlink to open in a new window”.

If i open it as another window, it loads ok, but it gets me out of what I was trying to do on the dash.

I mean from a desktop browser you should be able to open the browser console and see if any errors were reported by the browser itself. Often times those errors are not exposed directly to the web app, so it has to guess that what is happening. But the browser logs themselves often expose interesting details. Usually accessed via F12 or your browser menu.

Mixed Content: The page at ‘SharpTools App’ was loaded over HTTPS, but requested an insecure frame ‘http://xxx.xxx.xx.xxx.st-ip.net:8123/lovelace/sonos-alone’. This request has been blocked; the content must be served over HTTPS.

I’m not sure if this made any direct progress, as I’m trying to get it to display in fully kiosk… but I tried with firefox for the errors.

I’ve tried to load a homeassistant lovelace dashboard three ways.

  1. new tab hyperlink (works fine, but not ideal)
  2. As a custom tile which the error:

Secure Connection Failed

An error occurred during a connection to 192.168.86.119.st-ip.net:8123. SSL received a record that exceeded the maximum permissible length.

Error code: SSL_ERROR_RX_RECORD_TOO_LONG
Firefox Can’t Open This Page

  1. As a hyperlink in Modal. This gives the error in as:
    To protect your security, 192.xxx.xx.xx.st-ip.net will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.
    The F12 details are: "The loading of “http://192.168.86.119.st-ip.net:8123/lovelace/sonos” in a frame is denied by “X-Frame-Options“ directive set to “sameorigin“.

Thanks

Update:
Some progress.

RE: the Mmodal, my issue was that X-Frame-Options.

It requires the configuration.yaml in HA to have:

http:
  use_x_frame_options: false

I’m quite happy w/ Modal, but if anyone has tips for the custom tile that would also be very cool.

Final Update:
The _x_frame_options worked for the custom tile problem as well!

I much prefer Sharptools to Lovelace, but their Sonos card was hard to top, especially with grouping. Nice to have the option here.

1 Like

Thanks for sharing the solution! Some sites block embedding them in other pages by default through X-Frame-Options or Content-Security-Policy directives included in the headers of their page responses.

I’ll have to give it a try sometime. I stubbed out a direct Sonos integration for SharpTools as a proof-of-concept a long time back and that was one of the interesting things about their implementation. Their concept of grouping is much more ephemeral than things like devices which are typically much more persistent.

Thanks as always for your help… I’d definitely be interested in a native sonos integration, but I think this works for me for now.

This is the card I’m using in HA

The grouping was where I struggled when I tried to set things up using rules. There’s recently been a driver in hubitat called sonos advanced ([Nearing Release] Sonos Advanced Controller - ⚙️ Custom Apps and Drivers - Hubitat ) which allowed for grouping, but as you mentioned, it depends on which is playing and which device is the parent to be paired to. A lot of permutations especially if your are paring more than one sonos.