Question

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?

Answer 1

User provided

• 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.

   javascript:alert('XSS');

If you do not sanitize via PHP with functions like htmlentities() and 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:

<IMG SRC=" &#14;  javascript:alert('XSS');">

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:

<IMG SRC="http://attacker.com/evil.js">

As this is an image tag then evil.js would not be processed as javascript, because thats not how the Document Object Model is built, this would be safe to users.

Links on Vulnerabilities

• CSRF
• XSS Examples
• XSS Wiki
• Windows Metafile Vuln
• Cross Zone Scripting