How to know, that a browser is restricting display of 3rd party images?

Question

For a web developer is there please some way to know, that a visiting user browser (and I am looking at you, Firefox and Edge) is not displaying images originating from other websites?

Preferably, that would be some $_SERVER variable accessible in PHP-script or a Javascript property.

In my case I have an HTML5 game with player avatars sometimes originating from other websites (HTTPS URLs only!).

If I would know, that third party content loading is restricted by visitor, I would at least display a generic player picture instead of the "broken image" icon displayed by Firefox:

print_r($_SERVER);
print_r($_ENV);

haven't shown anything suitable, same for Javascript...

PHP doesn't have anything to do with the frontend not being able to view third party images. That's a client side issue and won't involve your PHP at all. The broken images, are they loaded using `http` or `https`? Since you visit the site through `https`, all third party resources must also be loaded through `https` or most browsers will block the call for being "insecure". We need way more info here. What debugging have you done? — M. Eriksson, Apr 04 '20 at 08:48
For the last part, there’s already a question with (hopefully) a decent enough [answer](https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali) — Daniel Protopopov, Apr 04 '20 at 09:37
I remember that back in the late 1990s there was an `onerror` handler in`` tags. I've no idea whether it made it to modern DOM. **Edit:** Yes, [it did](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement#Errors). — Álvaro González, Apr 04 '20 at 11:42

score 1 · Accepted Answer · answered Apr 06 '20 at 05:37

1

Agree with Álvaro González, try to use the onError event. The onerror event is triggered if an error occurs while loading an external file.

Please refer to the following code:

<img src="Images/imagenotexist.jpg" onError="this.onerror=null;this.src='Images/Image1.jpg';" /> 
<img src="https://www.w3schools.com/html/pic_trulli2.jpg" onError="this.onerror=null;this.src='Images/Image1.jpg';" />

The above code works well in IE11, Microsoft Edge and Chrome browser, if the previous setting image doesn't exist, it will display the default image (Image/Image1.jpg).

The result as below:

Before setting the onError event:

After using the onError event:

answered Apr 06 '20 at 05:37

Zhi Lv

18,845
1
19
30

Your `onError` suggestion does not work for me in Firefox and the new Chromium Edge browsers, but still thanks for replying and I have voted you up. – Alexander Farber Apr 06 '20 at 09:36
1

I have re-checked the code in Firefox and new Chromium Edge, everything works well. Please check remember to replace the default replaced the image in the `onError="this.onerror=null;this.src='Images/Image1.jpg';"`, in my application, I put the images in the Images folder, please remember to change the path to yours. – Zhi Lv Apr 10 '20 at 06:22
Actually you are correct, my website works with thrid party content blocking Firefox and Edge now – Alexander Farber Apr 11 '20 at 07:41

score 1 · Answer 2 · answered Apr 06 '20 at 15:31

I haven't tested it thoroughly but the HTMLImageElement interface provides an error handler:

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called.

Here's a quick and dirty proof of concept:

var images = document.getElementsByTagName("img");
var i;
for (i = 0; i < images.length; i++) {
  images[i].addEventListener("error", brokenImageHandler);
}

function brokenImageHandler(event) {
  var img = event.target;
  var replacement = "https://via.placeholder.com/" + img.getAttribute("width") + "x" + img.getAttribute("height");
  img.setAttribute("src", replacement);
}

<img src="" width="300" height="100" alt="Blank URI">
<img src="https://example.com/broken.png" width="200" height="50" alt="Broken link">

How to know, that a browser is restricting display of 3rd party images?

2 Answers2