Browsing securely using an SSH tunnel

Browsing on an internet cafe or a open/free wireless hot spot is scary sometimes. Some places are secured enough (like airport), but some are pretty questionable. You're not sure who owns the router, whether they put security on it, packet tracer, or a phising software etc ... Some times you also want to avoid the proxy that tracks your cookie, traffic, website blocker, etc etc. Regardless of the reasons, you may want to be able to browse securely - and a way to do it is by tunneling it via SSH.

So how does this work? Basically you want to setup an SSH server and redirect all of your browser traffic via this SSH server using an SSH client on your computer (instead of directly via http into the internet). This SSH tunnel is secured, so no one can peek into your traffic, unlike the regular http traffic. So here is how I did mine using Bitvise WinSSHD & Tunnelier. You can download both (free) from Bitvise website.

Installing WinSSHD (the SSH server)

1. You will need a computer that is always on or with wake-up on LAN enabled. I use my media center machine for this. 
2. Download WinSSHD (from here) and install it. Just follow the default instruction on the screen and you should be ok. If you are not an administrator on your machine then you will need to install this as an administrator. There is a more detailed User's Guide by Bitvise here.

Configuring WinSSHD

1. Once installed, the WinSSHD control panel should open with the "Easy WinSSHD Settings" window open.
2. Under "Server Settings", you can customize the listening ports etc if you want - or just leave then with the default settings and click "Next" and go to "Windows Account".
3. Under "Windows Account", you can allow or disallow Windows Account to login/connect to your SSH server. The default setting is to allow. I disallow this for security reason and created a locked down virtual users instead. You can read more about virtual vs Windows account here.
4. Under "Virtual Users", you can add virtual users. Click "Add" and assign account name and customize the permissions for that user, then click "OK". Once the user shows up in the list, select the user row, and click the pencil icon under "Virtual account password" column and the click the "Manage" button, then set the password for that user.
5. Once the "Easy WinSSHD Settings" window is gone, now you are looking at the WinSSHD control panel.
6. Now click "Edit advanced settings" and go to "Windows Firewall" area. Make sure that both drop downs are set to "Open ports to any computer" - so you can connect from outside your network/internet. You can read about opening up WinSSHD to the internet here.
7. Make sure the service is running. If not, start it. There should be a link in the control panel to start or stop the WinSSHD service.

Installing & Configuring Tunnelier

1. Download Tunnerlier (from here) and install it. Just follow the default instruction on the screen and you should be ok. If you are not an administrator on your machine then you will need to install this as an administrator. There is a more detailed User's Guide by Bitvise here.
2. Once installed, try connecting to your WinSSHD from within your network by entering the IP/host name, port, username, and password in the login area of Tunnelier and click "Login".
3. You should see the status of connection and data transmission in the right text area.
4. Now once it is setup within the network, before you can try it from the outside of your network, you will need to configure port forwarding in your router.

Configuring Router Port Forwarding

1. A router usually has a port-forwarding tool built-in. I am not sure how each router does their setting specifically, but usually there are several simple steps to register the port-forwarding. Go to portforward.com/ for the specific instructions on how to do it for your router.
2. Make sure your box that runs the SSH server is running on a static IP address within the local network. You can do this via the router's DHCP or using the TCP/IP setting in your computer.

Registering (dynamic) DNS Name

1. If you are running your SSH server from home, most likely you have a dynamic IP address. So, what you want to do here is register a dynamic DNS name, so that when your IP change, it is be also updated and tied to your DNS name dynamically. In the end, all you need to remember is your DNS name. The way this works is that dynamic DNS registration company has a small software in your box that will send an updated IP address to your dynamic DNS registry so it continuously updating your DNS name registration with your current IP address.
2. There are a lot of dynamic DNS provider out there in the internet - make your own pick here. I use No-IP. Usually you just need to register/create an account on their site, pick your DNS name and download the updater client software and install it on your box and you are set!

Trying It From Outside Your Network

1. To do this obviously you will need to be connecting to the internet from outside your LAN
2. Open up Tunnelier
3. Instead of entering the internal IP address, enter the dynamic DNS name you have registered and leave everything else the same and then click "Login"
4. If the port-forwarding and Windows Firewall and the account settings are set up correctly, you should be connected to your SSH server.

Setting Up Your Web Browser & Tunnelier for Secure Browsing

1. Open up Tunnelier and go to "Services" tab. Make sure "SOCKS/HTTP Proxy Forwarding" is enabled. Put "127.0.0.1" for "Listen Interface", pick an unused port number (like 8081) enter it in "Listen Port" field, leave the "Server Bind Interface" to be all zeros. Basically, follow these settings in Tunnelier.
2. Now in your browser, follow these settings: Firefox, Internet Explorer
3. Now you are set!

-- read more and comment ...

AJAX Animation using jQuery

During an AJAX call from a website, usually the screen won't blink - because page is not refreshing. This is neat because it gives the impression to the user that their interaction with the site to be seamless and uninterrupted.

But sometimes, you do want to give a visual clue to the user that an action is happening and you want them to know about it. Maybe by giving them an hourglass or a "loading ..." clue etc. So how do you do this easily? This post is about using jQuery to provide visual clue to the user on AJAX requests.

First, obviously you will need to reference jQuery library. I usually use the one hosted in Google:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Add the HTML to display our visual clue. In this example I am displaying a black bar on the top of the browser, about 25px in height that has a "Loading ..." text in it. So when an AJAX call is happening, this black bar will be displayed until the call is done.

 <div style="z-index:101; width:100%; height:25px; position:fixed; left:0px; top: 0px;">
<div id="loadingbar" style="height:25px;display:none; margin-left:auto; margin-right:auto; background-color:#000000; color:#fff">
  Loading ...</div>
<div class="stretch"> </div>
</div>

Now we add the javascript to show and hide the bar, plus I also like to gray out the background a little bit.

 $(document).ready(function() {
    jQuery().ajaxStart(function() {
        $("body").fadeTo("fast", 0.70);
        $("#loadingbar").show("fast");
    });
    jQuery().ajaxStop(function() {
        $("body").fadeTo("fast", 1.0);
        $("#loadingbar").hide("fast");
    });
});

Done. Now anytime there is an AJAX call in your page, the background will be grayed out a little bit and a black bar will show up on the top. To increase/decrease the opacity of the background during the graying out, you can adjust the value on the "fadeTo" call. Currently it is set to "0.70" or 70%. If you want less transparency (or more grayed out), then set it lower (between 0.00 to 1.0), and set it higher for less transparency.

-- read more and comment ...