Previewing Short URL’s
The instructions in how to do this are written for OS X but should translate fine on to any other operating system
With the rise in short url services the internet (but mainly twitter) is becoming a spammers dream. They can now create a URL that comes from a website you trust tinyurl.com, is.gd, bit.ly, j.mp, tr.im, etc. and takes you to myspamsite.com. The first url shortener that really gained traction, tinyurl.com, had a method that enabled you to preview urls. Unfortunately the newer shortening services often fail to provide this service. So when you click on a short url you could be being taken anywhere.
To combat this I decided to create a script that could use the longurl service to display a click through to the actual destination site.
Step 1: Hijack Requests To URL Shorteners
Launch Terminal.app from the /Applications/Utilities folder.
We want to divert requests from the popular url shorteners to your local apache. To do this we need to edit your hosts file.
If you’re using TextMate and have installed the UNIX mate command, then you can edit the file like this:
mate /etc/hosts
You will need to add the following lines to the bottom of that file:
127.0.0.1 bit.ly
127.0.0.1 tinyurl.com
127.0.0.1 tr.im
127.0.0.1 is.gd
127.0.0.1 j.mp
This tells your computer to send requests for those domain names to your local server. Now if you try and go to any of those domains you will should get a message telling you you can’t connect to the server.
Step 2: Configuring Apache
The next thing you need to do is to tell Apache to listen for these requests so it can serve a page for you. To do this you need should edit the httpd.conf to tell it to include the virtual hosts configurations. Start by loading up httpd.conf:
mate /private/etc/apache2/httpd.conf
Scroll to the bottom of that file and there should in a list of external files. You need to ensure the line under the heading Virtual Hosts reads:
Include /private/etc/apache2/extra/httpd-vhosts.conf
With no hash (#) at the beginning of the line. Once you have made that modification save the file and close it. You then need to open httpd-vhosts.conf using the line:
mate /private/etc/apache2/extra/httpd-vhosts.conf
In this file there will two dummy virtual hosts. You first need to comment them out by placing a hash symbol at the beginning of every line. You then need to add the following virtual host:
<VirtualHost *:80>
DocumentRoot "/Users/YOUR_SHORT_NAME/Sites/expand_url"
ServerName bit.ly
ServerAlias tinyurl.com
ServerAlias tr.im
ServerAlias is.gd
ServerAlias j.mp
</VirtualHost>
Changing YOUR_SHORT_NAME for your short name. The only lines that should not start with a hash in that file should then be the virtual host that you have just pasted in and the NameVirtualHost *:80 line.
Once this is done, save that file and close it. You then need to start apache. To do this you can load up System Prefrences, click on sharing, then tick ‘Web Sharing’ (if it is already checked, uncheck it then tick it again so the server gets a restart).
Step 3: Creating the Un-Shortener
Next we need to create the folder that we told Apache to look at in the virtual host. You can do this by typing in your terminal window:
mkdir ~/Sites/expand_url
You then need to create two files to put in there. The first of which is the .htaccess file. This file is hidden from view in the finder so the easiest way to create it is by typing in the terminal:
mate ~/Sites/expand_url/.htaccess
Paste in to this file:
RewriteEngine On
RewriteRule ^.*$ expand.html [PT,L]
This turns on mod_rewrite and sends all requests at a file called expand.html. expand.html is the next file that you need to create. It can be created using the line:
mate ~/Sites/expand_url/expand.html
This file is going to take the url that you are trying to look at and change it into a long url that you can look at before decided whether to proceed to the destination or not. You need to paste the following in to this file.
<!doctype html>
<title>Preview</title>
<script type="text/javascript">
function expandURL(){
var url = window.location.href;
var script = document.createElement("script");
script.src = 'http://api.longurl.org/v2/expand?url='+url+'&format=json&callback=dataLoaded';
document.getElementsByTagName("head")[0].appendChild(script);
}
function dataLoaded(data){
var h1 = document.getElementsByTagName("h1")[0];
h1.innerHTML = '<a href="'+data["long-url"]+'">'+data["long-url"]+'</a>';
}
window.onload = expandURL;
</script>
<h1>loading...</h1>
Once this file is saved you have then successfully set up the url expander.
Step 4: Enjoy Knowing Where Your Browser is Heading
Well this isn’t really a step. To test your new expander you can try and load a short url. I find that this is invaluable against being taken off to sites that you don’t know what are. If you got stuck with any of the steps feel free to and I will try and help.
