If another server/website load image from my server, how to tell?

Question

About

I have a website where users can upload pictures to their profile so other people can see them. Then when people are viewing each image i show the image in the middle. Above the image there are information about the user that have uploaded the image. The url of each image would look like: http://website.com/image/id

Problem

I want to let people use the above image address in a html image tag (<img src="http://website.com/image/id">) on others/their own website

To this day I have the feature that if they add "/img" after the url (http://website.com/image/id/img) and copy&paste it into a -tag it will work, but if it is possible I would make work in that way when a image i loaded by a user it would show as normal, but when it is loaded by a -tag with this url: http://website.com/image/id it would show the image correctly. (without the html and with a "header image/png").

What i tried

As said i already have the possibility to ad /img after every image, so it can be used and embedded on a website with the -tag. I looked at $_SERVER['HTTP_REFERER'], $_SERVER['SERVER_NAME'], $_SERVER['SERVER_ADDR'] to see if this worked. But this would not work because of in a -tag call it my server ADDR and NAME. Of cause the REFERER would work in this case, but if a visitor only visits an image and not exploring the whole website it would show the image without upload/file information.

Then what?

I have searched for cases like this, either there is no case like this or I don't know correctly what to search for.

In short

I need a way to detect if a website is displayed through a -tag on another website to then show a different and correct image for the use. Because for now if a user copy&paste http://website.com/image/id into a -tag it would only give a error.

Note

I hope you guys can help me, i have tried to make it clear what I'm looking for and what i tried. If not please let me know. Sorry if some of the above contains misspelled words, incorrect grammar or is badly explained. I do not speak English daily, but i try my best.

Answer 1

Look at $_SERVER['HTTP_ACCEPT'] instead.

The most popular browsers all seem to send a modified ACCEPT: header when requesting an image.

Take the following code:

<?php
file_put_contents('/tmp/accept_headers.txt', $_SERVER['HTTP_ACCEPT'] . PHP_EOL . '---' . PHP_EOL, FILE_APPEND);
?>
<img src="test.php"/>

where test.php is, ofcourse, the same file, I get the following results:

text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
^ Google Chrome (Linux), direct request
---
image/webp,*/*;q=0.8
^ Google Chrome (Linux), request through <IMG> tag
---
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
^ Firefox (Linux), direct
---
image/png,image/*;q=0.8,*/*;q=0.5
^ Firefox (Linux), <IMG>
---
text/html, application/xhtml+xml, */*
^ IE 11, direct
---
image/png, image/svg+xml, image/*;q=0.8, */*;q=0.5
^ IE 11, <IMG>
---

Conclusion:

Read the $_SERVER['HTTP_ACCEPT'] value. If it starts with image/, the browser specifically requests an image, and chances are the URL is being requested through an <img> HTML tag. Program your script to respond in kind.