Google Chrome - Mixed Content - Media Not Showing

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).

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.

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

  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

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

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 ‘https://sharptools.io/user/resources/media’ 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 '‘https://sharptools.io/user/resources/media’ 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 https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

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

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.

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

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

on my chrome browser on my pc the cameras are working but for some odd reason the cameras aren’t showing up on my tablet that’s running fully kiosk browser. Not sure what happened but it was working on the weekend.

I have Wyze cameras running on Tinycam pro thats constantly on thru Nvidia Shield. So i’m not sure what the issue is.

I did the fix on my chrome browser on my PC and chrome on my android tablet worked but for some reason it isn’t showing on Fully Kiosk Browser