Google Chrome - Mixed Content - Media Not Showing

SharpTools.io (web) Announcements
1

Google Chrome has begun rolling out an update that will block “Mixed Content” starting with Chrome 85. ‘Mixed Content’ is when non-SSL content is displayed on an SSL page (eg. displaying an insecure http:// image on an secure https:// site).

As of Chromium 111, a bug was introduced which breaks the ‘Allow Insecure’ option which is used for allowing mixed content. Keep in mind that this is the browser engine behind many modern web browsers like Chrome, Edge, Opera, the Android System Webview, and more.

More details and potential workarounds are included in the reply below.

Impact

For SharpTools dashboards, this will likely impact you if you are using Google Chrome to display cameras or media stream from your local network (LAN). For example, IP cameras, Blue Iris, or TinyCam streams served from your LAN.

image
image1390×545 42.7 KB

Workarounds

Google’s primary recommendation is to upgrade all resources to be HTTPS capable. This means upgrading the media source to be SSL enabled. Alternatively, you can disable the mixed content blocking in your browser’s settings.

Disable Mixed Content Blocking

You may be able to disable Mixed Content Blocking within your browser and allow the mixed content to be displayed.

View Steps for Chrome on Desktop

  1. Open the page that you would like to view mixed content on (eg. https://sharptools.io)

  2. Tap the Lock icon or ‘:warning: Not secure’ message to the left of the URL, then select Site Settings

    Or tap the following:
    chrome://settings/content/siteDetails?site=https://sharptools.io

    image
    image525×529 30.2 KB

  3. Scroll down to Insecure Content and change the setting to Allow
    image

  4. Close the Setting screen and reload the page so the setting takes effect and your images are displayed

View Steps for Chrome on Android

  1. Open Chrome on Android and navigate to chrome://flags

  2. Search for ‘secure’ and find the Insecure origins treated as secure setting and change it to Enabled

    Alternative, you should be able to click the following to link directly to the setting:
    chrome://flags/#unsafely-treat-insecure-origin-as-secure

  3. Enter the ‘origin’ of each camera or media source that you want to allow as a comma separated list.

    For cameras on your LAN, the origin will usually look like the format:

    http://192.168.1.10:8080

  4. After editing the setting, tap the Relaunch button that appears at the bottom of the screen

    image
    image864×1824 153 KB

Fully Kiosk Browser is also popular on Android devices and newer versions have an option under Advanced Web Settings ▸ Mixed Content Mode: Always Allow Mixed Content.

Note: Future versions of Chrome may change or remove these settings, but they are valid and tested as of late 2024.

:stop_sign: Chromium 111 introduced a bug where local IP addresses don’t work with the Mixed Content setting above.

You can use our wildcard DNS by appending .st-ip.net to the IP address to get a valid domain to workaround this limitation. (more info)

http://192.168.1.10.st-ip.net:8083/your/camera.jpg

Upgrade to HTTPS / SSL

If you are using an Network Video Recorder (NVR) solution like Blue Iris or TinyCam, the good news is that these solutions can be SSL enabled, though there is some technical effort involved.

  • Blue Iris has support for an application called stunnel which can be configured with an SSL certificate.
  • TinyCam has native support for SSL certificates under the Web server settings.

You could also use a modern reverse proxy with SSL support (like Apache or Nginx) - there’s quite a bit of technical effort in setting up the reverse proxy, exposing ports, and getting a valid SSL certificate - of which the technical details are outside the scope of this article.

Alternatively, you may prefer a service like ngrok which can provide a secure tunnel to resources on your network.

Author’s Note: while we believe Chrome’s approach to upgrading mixed content is great for the broader internet as a whole – where web developers should be serving content securely – we also believe that it’s short-sighted and unnecessary for use-cases like this where you are viewing your own camera streams within your own network.

Other Details

Tap to Expand

Browser Console Warning Messages

:information_source: The auto-upgrade of insecure resources was originally planned for Chrome 81 (February 2020), but was delayed to Chrome 85.

In earlier versions of Chrome, if you opened up the browser console, you would see the following warning message indicating that mixed content was being displayed

Mixed Content: The page at ‘SharpTools App’ was loaded over HTTPS, but requested an insecure image ‘http://192.168.1.10:8080/mjpg/video.mjpg’. This content should also be served over HTTPS.

Starting with Chrome 85, the browser console now indicates that the mixed content (HTTP image) is being automatically upgraded to HTTPS. But if the image is not available over HTTPS, it fails and does not display the image at all.

Mixed Content: The page at '‘SharpTools App’ was loaded over HTTPS, but requested an insecure element ‘http://192.168.1.10:8080/mjpg/video.mjpg’. This request was automatically upgraded to HTTPS, For more information see Chromium Blog: No More Mixed Messages About HTTPS

2

Interesting… I seem to be having issues with my media ties in Fully. Was it only Chrome that this impacted?

3

What type of device is it on? It’s actually changing in the upstream Chromium project that Google Chrome is based on.

Fully Kiosk uses the device’s “webview” to display pages. On Fire Tablets, this likely won’t be an issue as their WebView implementation tends to be a few versions behind and doesn’t get updated frequently.

On a modern Android device with Google Play, the web view gets updated automatically through the Play Store just like an app would. And Android’s webview is based on Chromium so it will inherit these changes at some point.

4

It’s an Amazon FireHD8 7th Gen I think. Might just try a reboot… Was working great literally until a couple days ago!

5

I had this issue as well, affecting my camera streams that come from a server on my local network. Interestingly, when I switched from using the server’s hostname to its local IP, the streams began working again. I did not do any of the workarounds above.

1 Like
6

2 posts were merged into an existing topic: Media and Thermostats

8

A post was split to a new topic: Cameras and saved passwords

9

:computer:
As of Chromium 111 – which is the engine behind many modern web browsers like Chrome, Edge, Opera, and more – a bug seems to have been introduced which breaks the ‘Allow Insecure’ option which is used for allowing mixed content when used with a local IP address for your media.

:bulb:
We’ve put together a Domain → IP resolver that can help with this in many cases. You can append .st-ip.net to the IP address to get a valid domain.

http://192.168.1.10.st-ip.net:8083/your/camera.jpg

There are also several other similar services available on the web if you prefer one of those (eg. nip.io, sslip.io, traefik.me). They use the same approach where you add the service domain, such as nip.io, between the IP address and the port in your media URL.

The only data sent to st-ip.net or nip.io is the host name (eg. 192.168.1.10.nip.io) for it to resolve the IP address. See the below reply for an explanation of how it works.

 
 

 
 

:leftwards_arrow_with_hook:
Some users have chosen to download an older version of their preferred browser, from before this bug was introduced, and disable auto updates so they can continue to use their image feeds.

For example, one user has documented how they downloaded an older version of Opera and disabled auto updates.

:iphone:
Please note that this Chromium bug also affects modern Android devices. Community members have suggested that the same general approach of rolling back to an older version works.

Uninstall the System WebView in the Google Play store so it rolls back to an old version. You can stick with that or download version 110 from a site like APK Mirror. --Austin

I’ve also posted a reply in the Issue Tracker from the Chromium with a sample reproduction, so hopefully the Chromium team will pick it up from there.

1 Like
10

So is there anything Sharptools can do internally to support this natively, A feature request? Even if they fix this chromium bug, past experience tells me things will change/update again down the road and it will go down again.

11

Perhaps this is above my pay grade, but I don’t understand how nip.io works.

Is this something that needs to run on my own server on my local net? Or is this an outside service that I can reference?

My dashboard does go straight to an IP address (http://192.168.2.131:88/cgi-bin/…) I don’t mind having a DNS server on my network, but is that what nip.io is?

12

It’s just a DNS server. What’s unique about it is you can enter any IP address in the format http://192-168-2-131.nip.io:88/cgi-bin/... and it tells your browser to open that page from the IP address you mentioned.

Normally, DNS is used to resolve human friendly names to a particular IP address on the internet. For example, my-favorite-site.com would map to a particular public IP address on the internet and DNS is what takes care of converting that domain name of my-favorite-site.com into an IP address so your browser knows what to talk to.

Normally, you wouldn’t point a domain name to an internal IP in your home, but it’s something you might have experienced if you work for an enterprise. Oftentimes enterprise organizations will have their own internal DNS servers that your computers automatically connect to for name resolution which means the company can create names like fileserver.company.com that might only work inside your corporate network since they point to local IP addresses. At the same time, they could have stuff like sharepoint.company.com on their public DNS that points to public IP addresses that you could access even from your home (of course, this is just an example and your company might choose to keep their SharePoint servers internal only).

So nothing (other than the DNS resolution) is running through nip.io or similar services. Your browser is still connecting directly to your local camera. These services are purely providing name resolution for IP addresses as a public service.

13

To support what exactly?

14

The new update to chrome has also blocked use of streaming to cameras, unfortunately, i found firefox is the only web browser that will allow those connections, its due to the way the ip address is written. For example it does not like http://0.0.0.0/image/liveview.cgi or how ever you type it unless it is a digital signed certificate which most ip cameras and dvrs will not have.

15

I’m using an older tablet, with I believe Android 7, which uses the webview nested inside the Chrome app.
I installed Firefox, removed Chrome and now my camera’s work again.

Hope this gets fixed before Firefox makes a breaking update. Or is this something to stay for good? I don’t feel like doing all the https stuff, I already stretched my knowledge with VPN and automatic stay connected with changing IP’s.

16

Will this work?

1 Like
17

Did google start blocking this again? I allowed mixed content but i still cant get it to work.

18

Check out this post as the Chromium 111 update may be impacting you. It includes some workarounds…

Google Chrome - Mixed Content - Media Not Showing - #9 by josh

19

I just started having this issue; image shows in manage resources, but not on dashboard. https was disabled and mixed content was enabled in fully kiosk. i even tried using https and get the same issue. this is a new fire tablet 8.

20

If it works in managed resources on the same device and browser, then it should work on the dashboard as well as they display the media resource the same way.

One difference on the actual Media Tile is if you have the Autorefresh enabled. When the media item first loads, it’s exactly the same as the Manage Resources tab… but once the refresh interval occurs, it will append an arbitrary URL parameter as a cache buster technique.

Since you mentioned that you already have the setting to allow mixed content enabled in Fully Kiosk, I would pay particular attention to the Chromium 111 bug mentioned above as many modern web browsers are based on that… check the reply above about using nip.io as a workaround.

Edit: If you are using Blue Iris, you might also check this post about embedding Blue Iris streams in a much more efficient way.

21

I misunderstood the nip.io workaround and thought it involved adding things or creating an account of some sort. So tried the much more efficient way, but that bothered me you can’t make it full screen. I really liked you could see all camera’s in 1 tile, but tapping a screen didn’t make it large enough.

So then I looked at the nip.io again and that was easy, just add it to the IP and done :sweat_smile:
At least now my tablet can simply update instead of running an old webcore. That’s how I used to do it, but suddenly my tablet decided to update anyway and broke it again.

1 Like