Hacking Flickr

by undergr0und n1nja

Flickr, if you aren't familiar with it, is one of the most popular of the so-called "Web 2.0" generation of websites.

It is ridiculously popular and its success was so great that not too long ago they attracted the eye of Yahoo! who bought them up.  Flickr offers many controls over the photos you upload, from allowing viewers to download the full-resolution original to ordering prints.

However these options can also be turned off by the owner of the photos.  If you aren't familiar with Flickr, I suggest you go check it out and then come back to the rest of this article.  If we are familiar with it, read on.

After you've spent some time on the site, chances are you've come across a really spiffy picture that you like but the owner hasn't enabled the "View All Sizes" option.  Darn.  I guess I can't get a nice wallpaper-size version of that.  Well, I'll just keep looking.

But wait!  The original uploaded size is merely a short distance away, locked within the source of the photo view page!

So let's start with a photo page that doesn't have the "View All Sizes" button enabled.

I used this one: www.flickr.com/photos/flargh/671062

This is a neat photo of His Steveness at the opening of the Apple Store SoHo.

Now if we do a "View Source" on that page and dig down through the depths of all the embedded JavaScript in there looking for the marker where the comments start, we find something like this:
<div id="button_bar"><img src="/images/add_to_faves_grey.gif" id="photo_gne_button_add_to_faves" class="photo_gne_button" width="56" height="24" alt="" border="0">

<script type="text/Javascript">
		_decorate(_ge('photo_gne_button_add_to_faves'), 671062, 1, 'a_fave');
</script>

<img src="/images/blog_this_grey.gif" id="photo_gne_button_blog_this" class="photo_gne_button" width="47" height="24" alt="" border="0">

<script type="text/Javascript">
		_decorate(_ge('photo_gne_button_blog_this'), 671062);
</script></div>

<div id="photo_notes" class="photo_notes"><div id="notes_text_div"></div></div>
<div id="comm_div"></div><div id="rotate_div"></div><div id="shadow_div"></div>
<div id="photoImgDiv671062" style="width:502px" class="photoImgDiv"><img src="http://static.flickr.com/1/671062_85c722f2cC1.jpg?v=0" alt="" width="500" height="375" onload="show_notes_initially();" class="retlect ">
<img style="position: relative; top:-377px; margin-bottom: -377px; display:block;" src="/images/spaceball.gif" alt="" width="500" height="375"></div>

<script type="text/jJavascript">
		_decorate(_ge('photo_notes'), _ge('photoImgDiv671062'), 671062, 'http://static.flickr.com/1/671062_85c722f2c1_t.jpg', '1.5');
</script>

<form id="fave_form" method="post" style="visibility:hidden;"><input type="hidden" name="magic_cookie" value="80dbc9229f54b05696a9f4e6d246b36d" />
<input type="hidden" name="faveadd" value="0">
<input type="hidden" name="faveremove" value="0">
</form>

<form id="blog_form" method="post" style="visibility:hidden;" action="/blog.gne">
<input type="hidden" name="magic_cookie" value="80dbc9229f54b05696a9f4e6d246b36d" />
<input type="hidden" name="photo" value="671062">
<input type="hidden" name="blog" value="0">
</form>


Look closely... See the static.flickr.com/1/671062_85c722f2c1_t.jpg near the end?

Guess what... Copy-and-paste that link from the source into your address bar and you'll see a thumbnail of the photo.

Now before you start writing a Perl script to scrape every full size photo on the site, let's stop for a moment to take a deeper look at that URL.
http://static.flickr.com/1/671062_85c722f2c1_t.jpg
671062 appears be some sort of site-unique picture ID.  This is the same number in the original link to the photo.

85c722f2c1 seems to be some kind of randomly generated number that acts as a sort of key for the photo.  I really have no idea what it does but I have a feeling it is there to make writing that script a little harder, since you'd have to scrape the source of all the pages, not just get the photo ID from the links.

So anyway, back to getting the original.

We have a filename ending in _t that gets us a thumbnail.  What if we drop off the _t?

Well, we get the display size, same as it shows on the page.  So there's magic in that last initial.

Now, what do you imagine you'd get if you slap a _o on the end of it?  Yes, we have a winner.  The original uploaded size.
Thumbnail: static.flickr.com/1/671062_85c722f2c1_t.jpg

Original: static.flickr.com/1/671062_85c722f2c1_o.jpg
Now keep in mind this won't help you if the person's upload client pre-processed it into a smaller size before uploading. It's quite likely that this method will break soon.

Remember that with great knowledge comes great responsibility.

Be awesome to each other and party on dudes.

Return to $2600 Index