DaveBarousse.com

I created a website with two friends of mine that allows people to submit their social networking profile, such as their Myspace profile, and then allows others to vote those profiles up within a category (digg style). In order to help Myspacer’s promote their profile and get others to vote for them, we wanted to create a badge or widget that our users could place on their Myspace page in order to campaign for more votes on their profile.

The use of widgets on Myspace pages is pretty common these days, unless the widget breaks the Myspace Terms Of Service. To make our widget stand out in the crowd, I wanted it to dynamically show the number of votes that the person currently has, along with some fancy text. Any time the person gets a new vote on our site, it would need to also update the count in the widget on their Myspace page, or any other place they may have put it on the web.

This would be a pretty straight forward task, but due to security reasons, Myspace does not allow users to put html elements on their pages that execute JavaScript or make a request to a server side scripting language like PHP (links with .php in them). I’m not very experienced with Flash, so I’m not sure if you can generate dynamic content with Flash on Myspace. I’m not even sure if Myspace still allows users to put Flash elements on their pages? At any rate, I knew what it would take for me to do what I needed to do using PHP and an Apache Mod Rewrite rule, as long as Myspace allows users to put images on their profiles (which they currently do).

Disclaimer: Use these techniques at your own risk. I am not responsible for anyone using these techniques to perform malicious acts on Myspace and their users. If you do, this could be you.

I’m not a frequent Myspace user, but after doing some quick testing, I figured out that they would allow me to add image tags to my page. After making that discovery (it was actually pretty obvious just browsing through profiles), I was pretty confident that I would be able to pull this off. Here is a quick summary of what needed to happen:

• User gets html code (an image tag wrapped in an anchor tag) from our site and adds that code to their Myspace page in order to display our widget

• When their Myspace page is viewed, the widget makes a request to our server to get an image file
• The image file executes a php script on our server, gets some information from the database and returns that information back to the browser in the form of a jpeg image

The beauty of it all is that to Myspace, it looks like the request is only for a simple image file. Plus, when the image loads on the Myspace page, it looks like a normal jpeg image to the person viewing the page. Because PHP is able to dynamically create images, the final product is actually really sharp looking.

So if Myspace doesn’t allow scripting languages on their pages, how am I able to execute a script to generate the number of votes in the person’s widget? By using some smoke and mirrors with PHP and the power of Apache’s Mod Rewrite, I am able to make it look like the request is being made to fetch an image file, when in fact, it is requesting and executing a PHP script and then sends an image back to the browser.

Because I knew that the user’s profile id needed to be sent along with each request, I had to set it up in a way that I could parse the requesting url on the server side and pass that id along in a query to get the number of votes for that user. To do that, I decided to make the url look like this:

http://www.server.com/widget/1234.jpg

As you can see, the url looks like it is making a request to get an image file. This is where the Mod Rewrite rule comes into play. The 1234.jpg file doesn’t actually exist and is in fact the profile id disguised as the name of an image file. This is a common technique used to generate friendly urls, but I think it is still pretty slick.

The next thing I had to do to set this up was create a new directory on the server that would hold all of the files needed to make the magic happen. In the example url above, that directory is the widget directory. I then created an .htaccess file that will live in this new directory and will tell Apache to turn the Mod Rewrite engine on. It also tells Apache to run any files with a .jpg extension through the PHP engine via a PHP script (that also lives in that same directory). The .htaccess file also includes a regular expression that will read anything between the final slash in the url and the .jpg file extension then stuff that value into a variable in a query string that gets passed along to the PHP script. This enabled me to access that value in the PHP script via the $_GET superglobal and ultimately it is used to read information from the database for that user.

The .htaccess file looks like this:

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^([0-9]+).jpg index.php?id=$1&type=jpg

To make sure you set this up correctly, you can create a new directory on your server, copy the code above into an .htaccess file and create a PHP script called index.php in that directory. Simply make your PHP script echo the $_GET superglobal so you can make sure that the value is getting passed through. There are a few more steps that need to happen in the PHP script to return an image, but once you can get the correct value to echo in plain text, you’ll be more than half way there.

My index.php file does a few things:

• Opens a database connection
• Scrubs the value passed in to make sure it is not malicious
• Queries the database for the information for the number of votes
• Creates an image based on a template image file I previously created
• Merges the data I selected from the database to the image file I just created
• Sets the http header content type to image/jpg
• Returns the final image file to the browser and exits the script

Below is what the code for doing the image manipulation looks like in the index.php file. Of course you will also need to include the code that will check the inputs, query the database, process the result set, etc. The following code also assumes that the GD Library has been installed with PHP:

$im = imagecreatefromjpeg("http://www.server.com/images/templateimage.jpg");
$white = imagecolorallocate($im, 255, 255, 255);
$width = "241";
$height = "233";
$font = "path to font file that you want to use";
$font_size = 50;
$text = "value returned by database query";
$box = imageTTFBbox($font_size,0,$font,$text);
$image_center = $width / 2;
$text_x = $image_center - round(($box[4]/2));
imagettftext($im, $font_size, 0, $text_x, 140, $white, $font, $text);
header ("Content-type: image/jpg");
imagejpeg($im);
imagedestroy($im);
exit();

Once again I’d like to urge anyone reading this to not use these techniques to intentionally do harm to Myspace or their users. I have not personally spent time thinking about how this can be used in a harmful manner, if any at all. Perhaps Chris Shiflett can shed some light on the security issues with this, if any do exist.