+3
Discuss & Vote

Images on media tiles are not loading on Google Chrome browser

sk108 3 years ago in Media Tiles / Images updated by Alex (ActionTiles) (Co-Founder) 1 month ago 30 2 duplicates

Images on media tiles are not loading on Google Chrome browser on PC, however they load on the phone browser. When I try to edit those "Media" tiles, it says "Enter valid URL". Please note that the URL is valid and that media tile is showing correctly on the Android phone browser (Google Chrome). It is happening with all media tiles on the PC browser. It used to work fine till last week on PC as well as on phone. Please help, thanks in advance.

Answer

Answer
Discuss & Vote

All of the issues serving video streams and images are due to browsers and operating systems enforcing Mixed Content policies.

Mixed content refers to a situation that arises when a secure (HTTPS) webpage contains elements, such as video streams or images that are loaded using an insecure (HTTP) connection.

More and more web browsers enforce strict security policies to protect users' data and privacy. When a secure webpage includes insecure content, it poses a risk and compromises the integrity and security of the entire webpage.

To mitigate this risk, modern browsers typically block mixed content by default. They either prevent the insecure content from loading or display a warning to the user. To maintain a secure browsing experience, it's important to ensure that all elements on a secure webpage are loaded using secure (HTTPS) connections. This can be achieved by updating the resource URLs to use HTTPS or by hosting the resources on secure servers.

ActionTiles does not host or process your local video streams and images. It is impossible for ActionTiles to upgrade connections to HTTPS.

ActionTiles cannot affect the browser and operating system and relies on them to display the content. There's absolutely nothing that ActionTiles can do to make the browser display content that the browser does not allow.

The Mixed Content limitation that is now imposed by modern browsers is not an issue that's unique to ActionTiles. Every web page and Progressive Web App is affected by this.

There are two ways to resolve this issue:

  • Serve content over HTTPS.
  • Configure the browser to allow mixed content. There are several issues with this option, since some browsers do not have this configuration or ignore it.
Duplicates 2
Discuss & Vote

Hi,

Please check if you are able to view the images on your PC using the Chrome browser directly, rather than via ActionTiles app. It's possible that the phone and the PC have different types of access to the network resources.

Yes, I can view them directly in the same browser. Both PC and phone have same access, also they are on same wifi network.

It doesn't have any embedded credentials. However, that url fetches details from a google sheet and outputs it as an image. I am still unsure why it is working normal in another tab in the same browser, but not working on media tiles. Previously it used to work perfectly.

I was able to solve this by going in to site settings for actiontiles.com in chrome browser and by allowing "insecure content".

Could you please send me (privately) a sample of such image URL?

Previously ActionTiles was able to display "mixed content" without any issues. Mixed content are resources served over HTTP to HTTPS sites. I wonder if browser policy has now changed to disallow that.

How to share the link with you privately? Can you please elaborate so that I can share the link with you.

Solution Exists

In a move for safer web, Chrome no longer allows to display images that are served over insecure HTTP. Chrome tries to upgrade connections to HTTPS, but if the server (or camera) is not able to respond, the image will not be loaded.

This is a major problem for ActionTiles users who often use Chrome and derivative browser to stream video on local network.

The ActionTiles mobile app is not currently affected by this issue. The app is available here:

https://support.actiontiles.com/knowledge-bases/8/articles/10267-actiontiles-moble-app

Some Chrome mobile users were able to make HTTP video streams work by turning off Safe Browsing. This option is available under kebab menu (top-right) > Settings > Privacy and Security > Safe Browsing > No Protection.

Please note that this comes with all the caveats of reducing internet security.

Thanks Alex. For now I have enabled SSL certificate on my domain. Please keep us posted if you figure out something else as well.

Thanks,

Satyam

Had this cause me issues as of today, its not really a "Fix" but you can get around it by allowing mixed content for just app.actiontiles.com

Some instructions from Adobe (just do this on your action tiles web page instead) : https://docs.adobe.com/content/help/en/target/using/experiences/vec/troubleshoot-composer/mixed-content.html

Now I'm off how to find out how to upgrade my BlueIris to do HTTPS

I already did this. However, sadly there is no such option on mobile chrome browser. BTW, I have now enabled SSL certificate on my hosting.

Thanks for this!  I just ran into this very issue trying to embed images from my local WeeWX weather station server.  I marked the lone panel as mixed and bam.  Now if I can get the generated current weather RSS feed to work like the example RSS feeds..

Some users reported that mixed content sill works using the Samsung browser. To my knowledge this should also work in Firefox. For now, anyway.

This solved my embedded Media Tiles that point to my Amcrest Camera Live Video that were not showing up and appeared as a broken link. I just added 
https://beta.actiontiles.com under Settings - Insecure Content - Allow

It did not fix the link that points to my BloomSky Camera that used to work as a .php link as a Still Image or Gif within a Media Tile. I can visit this link http://bloomsky.rf.gd/bloomSkyLatest.php?i=0 in my Chrome Browser and it is displayed , however when I add it as a Media Tile it will not display. I added http://bloomsky.rf.gd in the same manner described above to allow Insecure Content , but it did not resolve it. This link used to display without issue.  

Closed: Duplicate Issue

Hi David,

This is going to be a source of heartache for many of our users.

The following thread was already started and also lists your workaround:

https://support.actiontiles.com/communities/12/topics/9592-images-on-media-tiles-are-not-loading-on-google-chrome-browser-on-pc

Fixed for my setup.

In Chrome on each device you need to use action tiles... Set this too enabled....

chrome://flags/#allow-insecure-localhost

camera views now work on my hub tablet.

I enabled that setting and still no Bloomsky! I was super hopeful that this would solve the issue though.

Thanks for the reply!

try this one..

chrome://flags/#unsafely-treat-insecure-origin-as-secure

Nope!  Here is the link that used to display as a Media Tile after one visited the site and loaded the image once. It would then display and update within ActionTiles/ Media Tile

http://bloomsky.rf.gd/bloomSkyLatest.php?i=0

Hi, thanks for this info, I hoped it would cure things for me but didnt.

I view actiontiles on a RaspPi , it was all working fine, stupidly i ran an update and then actiontiles will not display my CCTV media feed. If I paste the CCTV snapshot URL into a different Chromium tab, i can see the CCTV snap shot no problem, so i am a bit confused why its not working in ActionTiles, I wondered if you had any ideas?

typical that i spend hours on it and then when i post in here i get it working straight away. 
I had to go into:
chrome://settings/content
and relax some settings and the camera feed appeared in Action Tiles again. :-)  

ensure you relaunch chrome as well.

I did . there is a message to the effect that one has to relaunch thier Chrome Browser.

ok. I see your trying to view a PHP script, which runs and produces an image. That's quite different from just viewing a jpg as I was doing. 

There is a topic / discussion on this here..

https://support.actiontiles.com/communities/12/topics/9439-bloomsky-current-image-display-was-working-great-but-recently-stopped-working

Yes. This method used to work and display the sky image from the BloomSky weather station as a Media Tile within ActionTiles, but something changed and it no longer works. Thanks for your help! 

Edge mobile browser is a nice stop gap, can also link to Mobile desktop.

Some Chrome mobile users were able to make HTTP video streams work by turning off Safe Browsing. This option is available under kebab menu (top-right) > Settings > Privacy and Security > Safe Browsing > No Protection.

Please note that this comes with all the caveatsof reducing internet security.

Answer
Discuss & Vote

All of the issues serving video streams and images are due to browsers and operating systems enforcing Mixed Content policies.

Mixed content refers to a situation that arises when a secure (HTTPS) webpage contains elements, such as video streams or images that are loaded using an insecure (HTTP) connection.

More and more web browsers enforce strict security policies to protect users' data and privacy. When a secure webpage includes insecure content, it poses a risk and compromises the integrity and security of the entire webpage.

To mitigate this risk, modern browsers typically block mixed content by default. They either prevent the insecure content from loading or display a warning to the user. To maintain a secure browsing experience, it's important to ensure that all elements on a secure webpage are loaded using secure (HTTPS) connections. This can be achieved by updating the resource URLs to use HTTPS or by hosting the resources on secure servers.

ActionTiles does not host or process your local video streams and images. It is impossible for ActionTiles to upgrade connections to HTTPS.

ActionTiles cannot affect the browser and operating system and relies on them to display the content. There's absolutely nothing that ActionTiles can do to make the browser display content that the browser does not allow.

The Mixed Content limitation that is now imposed by modern browsers is not an issue that's unique to ActionTiles. Every web page and Progressive Web App is affected by this.

There are two ways to resolve this issue:

  • Serve content over HTTPS.
  • Configure the browser to allow mixed content. There are several issues with this option, since some browsers do not have this configuration or ignore it.