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
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.
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.
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
Open the page that you would like to view mixed content on (eg. https://sharptools.io)
Tap the Lock icon or ‘ Not secure’ message to the left of the URL, then select Site Settings
Or tap the following:
Scroll down to Insecure Content and change the setting to Allow
Close the Setting screen and reload the page so the setting takes effect and your images are displayed
View Steps for Chrome on Android
Open Chrome on Android and navigate to chrome://flags
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:
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:
After editing the setting, tap the Relaunch button that appears at the bottom of the screen
Fully Kiosk Browser is also popular on Android devices and newer versions have an option to Allow Mixed Content.
Note: Future versions of Chrome may change or remove these settings, but they are valid and tested as of the end of 2020.
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.
Tap to Expand
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
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