Google Chrome - Mixed Content - Media Not Showing

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.