I watched the film about Facebook the other day, yes I coudn’t resist, and I thought it has some interesting moments. At the beginning, Marck “hacks” some Harvard websites which contain profile photos from the students.
How did he made this?
Well I didnt saw the code or remember it from the film but I am going to suppose what he did and how.
Lots of webpages store they images in the same directory, or at least place all the same type images together, this means all the profile images were in the same source. Also, due to programming issues, those images tend to have a name which is a numeric code, maybe the student id, or maybe the number of the photo when that photo was uploaded. This means that we could have a directory with the following images:
www.someweirdsite.com/profileimages/1.jpg
www.someweirdsite.com/profileimages/2.jpg
www.someweirdsite.com/profileimages/3.jpg
www.someweirdsite.com/profileimages/4.jpg
… and so on.
Isn’t it obvios how to access all the images that are stored in that site? Now, instead of doing it manually we are going to use some bucle, we can request the images and save them in our hard disk with some server code, but instead I am going to use javascript to make a basic image navigator.
Making our own Image Navigator using DOM
<script type="text/javascript" >
<!--
window.onload=function(){
document.getElementById('imgLeft').onclick =function(){ move(-15); };
document.getElementById('imgRight').onclick=function(){ move(+15); };
document.getElementById('numImg').onchange=function(){ showList(); };
document.getElementById('imgFullSize').childNodes.item(1).onclick=function(){ hideFullSize(); };
}
function move(step){
document.getElementById('numImg').value = parseInt(document.getElementById('numImg').value)+step;
showList();
}
function showList(){
var list = document.getElementById("imgList");
while (list.firstChild) { list.removeChild(list.firstChild); }
var index=parseInt(document.getElementById('numImg').value);
var j = 0;
for(i=index; i<index+15; i++ ){
var src= document.getElementById('imgsrc').value + i + ".jpg";
var img = document.createElement("img");
img.src=src;
img.className="imgMini";
img.onclick=function(){ showFuLLSize(this); };
document.getElementById('imgList').appendChild(img);
//separator:
j++;
if(j>=5){
j=0;
var jumpDiv = document.createElement("div");
jumpDiv.style.clear="both";
document.getElementById('imgList').appendChild(jumpDiv);
}
}
}
function showFuLLSize(img){
document.getElementById('imgList').style.display='none';
document.getElementById('imgFullSize').style.display='block';
document.getElementById('imgFullSize').childNodes.item(1).src=img.src;
}
function hideFullSize(){
document.getElementById('imgList').style.display='block';
document.getElementById('imgFullSize').style.display='none';
}
-->
</script>
It’s just a code that makes new images and shows them in a list with the needed source. I’ve added a functionality that lets you visualize the full size of the images just clicking on them. Also, I’ve decided to place the directory route in an input text so that you can change it without having to touch code.
This is the used HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image navigator</title>
<style type="text/css">
.imgMini{width:200px; float:left; margin:10px; max-height:200px;}
</style>
<script type="text/javascript" >
<!--
// Here goes the js code
-->
</script>
</head>
<body>
<input id="imgsrc" type="text" value="http://www.yourhackedsite.com/photos/" size="200" />
<div style="width:300px;margin:0 auto;">
<img id="imgLeft" src="./imgs/LeftArrow.png" alt="goLeft" width="20px" />
<input id="numImg" type="text" value="0" />
<img id="imgRight" src="./imgs/RightArrow.png" alt="goRight" width="20px" />
</div>
<div id="imgList"></div>
<div id="imgFullSize" style="">
<img style="margin:0 auto;" src="" />
</div>
</body>
</html>
Making our own Image Navigator using jQuery
I wondered if using jQuery this would be done faster and easier, Im a beginner with jQuery so maybe this could be done better but this is how it ended:
<script type="text/javascript" src="jquery.min.js" language="javascript"></script>
<script type="text/javascript" >
<!--
$(document).ready(function(){
$("#imgLeft").click( function(){ move(-15); } );
$("#imgRight").click(function(){ move(+15); } );
$("#numImg").change(function(){ showList(); } );
$("#imgFullSize > img").click( function(){ hideFullSize(); } );
});
function move(step){
$("#numImg").attr("value", parseInt($("#numImg").attr("value"))+ step );
showList();
}
function showList(){
$("#imgList").empty();
var index=parseInt($("#numImg").attr("value"));
var j = 0;
for(i=index; i<index+15; i++ ){
var src= $("#imgsrc").attr("value") + i + ".jpg";
$("#imgList").append( "<img style='width:200px; float:left; margin:10px; max-height:200px;' src='" + src + "' />" );
j++;
if(j>=5){j=0; $("#imgList").append( "<div style='clear:both;'></div>"); }
}
$("#imgList > img").click( function(){ showFuLLSize(this); } );
}
function showFuLLSize(img){
$("#imgList").hide();
$("#imgFullSize").show();
$("#imgFullSize > img").attr("src", img.src);
}
function hideFullSize(){
$("#imgList").show();
$("#imgFullSize").hide();
}
-->
</script>
In general the basic things are not much different than using DOM directly, but when creating an object and setting its style its much more faster, and if I had to add some effect it would have been too.
What can we do to avoid this to happen to our website?
Basically checking all the requests you have to your images. Configure your server so that when any image (or maybe only the ones you want in an specific directory) is requested, you make sure that petition is from one of your users and has the athorization to do so and not from any other site stealing your bandwith.
You can do this configuring directory permissions, but will work better with server code, .Net and PHP have things to manage this. Also, you can make your own image server to which request all the images and manage those requests.
You can also use fake urls that your server will translate into the correct source when a request arrives, for example: http://www.somesite.co.uk/images.php?id=198f3o. And then manage that request, or hide it less obviously: http://www.somesite.co.uk/images/198f3o/
What does Facebook with its images?
Well having into account this post its made because of Facebook, why not check how they manage images?
They use an image manager server, you can see it checking the source of an image stored in FB: http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs205.snc4/38612_434480799512_562964512_4626183_3833812_n.jpg
So Facebook manages their images very well, despite theres no privacy and anyone can access them if they manage to find the code, so be care with what you upload to FaceBook, once its there, its public =P
[…] realized the other day that Facebook doesn’t give you many privacy with your images, and I wondered about something, if anyone who knows the source of a picture can have a look at it […]