How should I create embed code to display my photo

Question

I have many photos already stored on my website and I want to allow other people to publish any of these photos on their own websites. What I'm trying to do is create embed code for each photo to allow third parties to publish a photo within an iframe (I'm using PHP). It's just like what Getty Images have done here - allowing others to embed their photos.

Getty's embed code uses an iframe with the source to the image/webpage being something like this:

src="//embed.gettyimages.com/embed/488344275?et=-AesBiwMQb5LLh6krfjSJw&sig=nxsiL6uBhQNOeWxMs0-04_TmimSD3-PcKaqmf-Y_xTs="    

My problem is that I don't know the best way to create/reference the image/page. Getty has created a new page to host each individual image, which allows them to add captions etc. My images are not in a database, they are just contained in certain folders and I display them on my website with a foreach/glob script.

To display the iframe's target source page, I could have a PHP template which is given the unique image file name by the embed code.

src="//embed.mydomain.com/embed/embed-image.php?path/to-the-photo"

The PHP template then displays the correct image and any appropriate image meta data. I'm sure this comes with lots of security implications - is there a better way to do this?

Answer 1

Editors note: This code is highly insecure because it exposes every file PHP has access to to the public.

i would use a domain like this:

src="//embed.mydomain.com/embed/embed-image.php?path=path/to-the-photo"

Note the extra path kexword in the domain

Now all it takes, is to use the path from the domain and return the image from the path.

<?php
  $path = $_GET["path"]; // takes the path from the domain

  header("Content-Type: image/png"); // change this when it is a gif or jpeg (Note: jpeg = jpg here)
  header("Content-Length: " . filesize($path)); // sets the size of the returned object

  readfile($path); // returns the file from the path
?>

Answer 2

I'm pretty sure that Getty doesny create a new page for every single image. They probably just use htaccess to redirect the image request to a script that handles the request. Perhaps something like:

//this will allow alphanumeric id's with _ and -. You could alter to only allow numeric by only using [0-9] instead of [a-zA-Z0-9_-]
RewriteRule ^embed/([a-zA-Z0-9_-]+)$ embed.php?id=$1
RewriteRule ^embed/([a-zA-Z0-9_-]+)/$ embed.php?id=$1

Now a request like /embed/hash6834hfds or /embed/hash6834hfds/ will be redirected to embed.php?id=hash6834hfds. Now you can use the embed.php file to show the correct image.

How secure this is, depends completly on your implementation of embed.php, but as this work like any request, you should apply the same caution and messures. Some things to keep in mind, but not limiting to:

• Check if the ID/hash is what you expect (numeric/aplhanumeric/etc)
• If you use it in a query to get meta data. Always make sure its not used for mysql injection
• If you are concerned with people stealing images, dont use sequential numbers

Even if you want to go with your own solution, it's not a problem to supply a PATH as a parameter to your script. Just make sure you dont use the full path to the location on the server (EG: dont use c:\inetpub\wwwroot\images\image.jpg on windows but use \images\image.jpg)

Also if you do receive a full path, make sure it is what you expect it to be. People could be using \images\..\index.php to move to your root folder. Or even worst all the way to a system folder. First and most important check is that it is just an image they are requesting. If they do use some exotic way to bypass your folder check, if they can only access images you are still relatively safe.

Whatever way you go, if you use PHP to actually show the image, you are using more resources then needed. So if you expect a lot of visitors or care about performance, dont use PHP to read the file and output it with the correct headers.

My personal vote would be to use the following procedure

• Index all images you have in your folder and save the path to the database.
• Store a unique key with each image in the database and the meta data you want users to see.
• Use htaccess to link the unique key to a PHP file
• In the PHP file check if the hash links to an image in the database
• Show the meta data with php a long with an <img src=""> tag to the actual image on a public path of your website

On a side note: Not sure if you understand what the "//:" part of the URL is, but it means "use the same protocol as this website is using". Meaning that if somebody embeds your image/iframe on a webpage using HTTPS, it will request your site also as HTTPS, so make sure your server can handle it.

Just using HTTP:// or not having a valid HTTPS server, would mean that anybody that embeds your image on a secure webpage, is now marked as being unsecure. Obviously that would be an unwise choice.