I am playing with my little PHP project right now and I am struck with a question about how I should approach the image handling. As far as I know, it’s either you host the image in your server or let the user provide the link. Given my application is on a shared hosting site, which one better? What are the risks?
- You need to make sure the link is valid
- You need to check the content of the link to confirm its an image
- You need to be able to check the image on every load
- You have to build your html to check the image is still available.
- you would also have to confirm that the location of the image is a trusted location
- if the image is not on a HTTPS Server and you are, then you can cause issues with browsers.
Self Hosted Image
- You can make sure that the image is of the correct format.
- You need to watch out for exploits such as GIF Exploit
- You can manipulate the image with PHP Dynamically
- You can check and validate sizes of images and store on file-system or DB
- Requires more bandwidth
- If images are dynamic then they can cause high CPU
I would suggest that you go for self hosted image, OR host images on another data centre such as an image host with an open API.
If you your worried about bandwidth then you can create an image upload system that upon upload it uses an image host API to send the image to an external source and then store the image id in the database along with post/user/entity.
Stack Overflow uses the ImgUr for there images,SO has already thought about what your thinking of and have chosen to store externally but upload locally, ImgUR returns data that can be stored, Example below:
<images> <image> <name>imgur</name> <title/> <caption/> <hash>UrTHG</hash> <deletehash>bzEkpCdHPL22Hlp</deletehash> <datetime>2010-08-14 03:39:23</datetime> <type>image/gif</type> <animated>false</animated> <width>314</width> <height>115</height> <size>4413</size> <views>0</views> <bandwidth>0</bandwidth> </image> <links> <original>http://imgur.com/UrTHG.gif</original> <imgur_page>http://imgur.com/UrTHG</imgur_page> <delete_page>http://imgur.com/delete/bzEkpCdHPL22Hlp</delete_page> <small_square>http://imgur.com/UrTHGs.jpg</small_square> <large_thumbnail>http://imgur.com/UrTHGl.jpg</large_thumbnail> </links> </images>
This is great because, thumbnails such as small_square,large_thumbnail etc are pre-generated along with meta data such as size,width,height, views etc.
If your worried about CPU usage and server-load then you should revert to the section above regarding external data storage.
If your worried about CPU then you can manipulate the image via GD Libraries and then store a cached version on file-system, update over intervals if need me.
Another down pointer to having user linked images is that when the image is it can be a dynamic image and loggin user data such as what pages that suer is visiting, this one if the main reasons that when your on Facebook and you embed an entity such as a blog post, the images are downloaded and stored on Facebook’s CDN, so that outside sources cant tell what and where an IP is.
This should help you decide.
As there has been some discussion about the risk of XSS, i thought i would clear something up a little.
If you choose to allow the user to give you a link to an image you would have to validate the image and not so much the content, the reason why this has to be done is because lets say the user entered the following image location.
If you do not sanitize via PHP with functions like
HTML Purifier library, after you store the above string in your database, when a user attempts to visit the page it would render like so:
So that every time the page renders you get a dialog box stating
XSS, thi is called an XSS Atack, the atack then cauld add another image “url” / “code” that sends certain data such as SESSION ID’s to another site that automatically goes to your site and collects data under that ID.
if an attacker entered the following url
http://attacker.com/evil.js then the rendered content would be like so:
As this is an image tag then
Links on Vulnerabilities
One thing to be aware of if you are accepting URLs from your users and using them to build an
<img> tag: you have to be careful to not be vulnerable to Cross Site Scripting (XSS) attacks, which is an attack where a malicious user is able to inject their own code into your website.
For instance, let’s say your code looks like:
$img_url_from_user = $_POST['image_url']; // user inputs a URL in a form echo '<img src="' . $img_url_from_user . '" />';
A malicious user comes to your form and fills it out:
Now when PHP gets that input and uses it for
$img_url_from_user above, the resulting HTML the browser gets is
<img src="invalid.jpg" onerror="alert('attack!')" />
and when the page is loaded, you will see an alert (obviously an attacker can do much worse that this. For instance, they could collect cookies and then use an AJAX call to send the info to their own server). So you have to make sure you sanitize any input you get from your users!
I highly recommend pushing your image requests to imgur.com because it appears to be a very reliable image host that cropped up a while back to help support Reddit.com in their need for image hosting. Imgur will allow you to link to images they host and they are completely free. They aren’t like tinypic or other sites that will block your images later on.
The only drawback I can see is if someone has a problem with you using a site that also hosts a lot of free porn. Totally your call if you want to go there. It’s an open door and anyone can upload anything… but it’s stable and reliable so I use it for all my image hosting needs.
One risk of having the app link-dependent is if the link dies, the image dies. One risk of keeping things on your server is, it’s possible to disguise any content as an image file.
Another problem with using an external image URL is that (unless hotlinking is disabled on the server the url points to) you might be contributing to someone else’s bandwidth problems because most users won’t bother uploading the image to a free image hosting site by themselves if the image already exists somewhere in the internet.
Any time you display user-created content on a page, you need to treat it as though it’s radioactive. This is a potential XSS vulnerability. Take a look at this cheat-sheet for examples. Some sample inputs that could compromise your users:
><a href=malicioussite.com>View user profile</a>