adduser ssh-tunnel
nano /etc/ssh/sshd_config

Now add the user to “AllowUsers” and set “PubkeyAuthentication” to “yes”:

AllowUsers ssh-tunnel
PubkeyAuthentication yes

Then restart SSH:

/etc/init.d/ssh restart

Now lets switch to the webserver and create a new user as well (also install autossh if not done already):

aptitude install autossh
adduser ssh-tunnel-mysql

Now add the user to “AllowUsers” just as done before with the new user on the database server:

AllowUsers ssh-tunnel-mysql

Also restart SSH here:

/etc/init.d/ssh restart

Now login to the webserver with the newly created user “ssh-tunnel-mysql”. Next you can already try to open a tunnel. But make sure to replace SSH port, MySQL port and IP according to your configuration:

/usr/bin/autossh -M 20042 -N -L 3308:127.0.0.1:3306 -p 22 ssh-tunnel@1.2.3.4

You might get the following error:

Warning: remote port forwarding failed for listen port 20042

It means your port is in use. In this case just change “20042″ to an unused port. Once you have established the tunnel it’s time to test it. Do this in a new console window and make sure to use the correct password for the “ssh-tunnel” user:

mysql -h 127.0.0.1 -P 3308 -ussh-tunnel -pPASSWORD

Now you should be connected and able to work with the MySQL database on the database server. Try the following, it should list all your databases that exist the database server:

SHOW DATABASES;

Since we have confirmed that the tunnel is working we can now create a public key to enable logon without a password. Make sure to execute the following commands on the webserver as the tunnel user (leave the passphrase empty when asked for it):

cd ~
mkdir .ssh
ssh-keygen -t dsa -b 1024 -f ~/.ssh/ssh-tunnel-key

Now you created a public/private key pair on the webserver. Next the public key has to be enabled inside the authorized_keys file on the database server. For this you need to login to the database server as the tunnel user and execute the following commands:

cd ~
mkdir .ssh
chmod 700 .ssh
cd .ssh/
touch authorized_keys
chmod 600 authorized_keys

Now everything is setup on the database server. So we can go back to the webserver and copy the key. Again make sure to be logged in as the tunnel user and change SSH port and IP to yours:

cat ~/.ssh/*.pub | ssh ssh-tunnel@1.2.3.4 -p 22 'umask 077; cat >>.ssh/authorized_keys'

Now test your connection again, this time by using the key:

/usr/bin/autossh -M 20042 -N -L 3308:127.0.0.1:3306 -p 22 
-i /home/ssh-tunnel-mysql/.ssh/ssh-tunnel-key ssh-tunnel@1.2.3.4

Everything working without a password now? Then you can put the tunnel in the background by using the parameter “-f”. This way your tunnel will remain active even when you close your console window:

/usr/bin/autossh -M 20042 -f -N -L 3308:127.0.0.1:3306 -p 22 
-i /home/ssh-tunnel-mysql/.ssh/ssh-tunnel-key ssh-tunnel@1.2.3.4

If you want to close the tunnel you can use the “kill”-command with the PID of the tunnel or if you are using the tunnel user just for the case of tunneling by simply executing “killall”:

killall -u ssh-tunnel-mysql

Thats it. If anything is missing, wrong or any problems occur please let me know via my contact form.

apt-get install awstats

The debian installer does not automatically set the correct paths in the AWStats configuration script, so we have to do this manually (for all text editing just use your favorite editor, I will be using nano throughout this tutorial):

nano /usr/share/doc/awstats/examples/awstats_configure.pl

$AWSTATS_PATH='/usr/share/awstats';
$AWSTATS_ICON_PATH='/usr/share/awstats/icon';
$AWSTATS_CSS_PATH='/usr/share/awstats/css';
$AWSTATS_CLASSES_PATH='/usr/share/awstats/lib';
$AWSTATS_CGI_PATH='/usr/lib/cgi-bin';
$AWSTATS_MODEL_CONFIG='/usr/share/doc/awstats/examples/awstats.model.conf';
$AWSTATS_DIRDATA_PATH='/var/lib/awstats';

Now the configuration should be ok. In the next step we have to make the configuration script executable by the apache2 user, most probably www-data:

chown www-data /usr/lib/cgi-bin/awstats.pl

Now AWStats is already up and running. But we are still far from being done. Next we should check your apache2 configuration for the following lines and add them if not present (it will enable the AWStats icons for our AWStats infosite):

nano /etc/apache2/apache2.conf

Alias /awstats-icon/ /usr/share/awstats/icon/
<Directory /usr/share/awstats/icon>
    Options None
    AllowOverride None
    Order allow,deny
    Allow from all
</Directory>

Ok. Next thing to do is updating some settings in our AWStats configuration file. We need to set the correct path to our Apache access log, set our site domain and I would also suggest to change the default LogFormat and disable DNSLookup.

nano /etc/awstats/awstats.conf

LogFile="/var/log/apache2/access.log"
LogFormat=1
SiteDomain="webdevwonders.com"
DNSLookup=0

Now we can try to run AWStats for the first time (remember to fill in your domain name instead of mine):

/usr/lib/cgi-bin/awstats.pl -config=webdevwonders.com -update
/usr/lib/cgi-bin/awstats.pl -config=awstats.webdevwonders.com.conf

If you get an error message with one or the other command you might want to check your configuration settings once again. One problem that might occur is access denied to the apache log. Fix it like this and try executing the commands from above once again:

chmod 755 /var/log/apache2

If everything works we can continue by enabling browser access to our statistics:

chown www-data /usr/lib/cgi-bin/awstats.pl

Now try to open the AWStats statistics in your browser. The path should look like this (again of course your own domain name): http://webdevwonders.com/cgi-bin/awstats.pl. If you receive a 504 Gateway Timeout you will have to increase the timeout value inside apache2.conf. Something between 20 and 60 seconds should be enough.
Now next is the automation of our statistics by adding a cronjob that will automatically update them:

nano /etc/crontab

Add the following line for a 15 minute crontab or change the update cycle according to your needs (adjust domain name as usual).

/15 *   * * *   root    /usr/lib/cgi-bin/awstats.pl -config=awstats.webdevwonders.com.conf

Now let’s protect our statistics from prying eyes. We are doing this by adding a .htaccess file to our “cgi-bin”-directory:

cd /usr/lib/cgi-bin/
touch .htaccess
nano .htaccess

Now insert the following (please note that for this tutorial we will simply put the .htpasswd file in “/var/www/awstats” but you might consider putting it somewhere else).

<FilesMatch "awstats.pl">
    AuthName "Login Required"
    AuthType Basic
    AuthUserFile /var/www/awstats/.htpasswd
    require valid-user
</FilesMatch>

Now create the .htpasswd file (remember to fill in your own username):

cd /var/www/
mkdir awstats
cd awstats
htpasswd -c /var/www/awstats/.htpasswd username

Almost done, but we have to enable “AllowOverride” for the “cgi-bin”-directory to have Apache make use of our access rule. So edit the part inside your VirtualHost configuration:

nano /etc/apache2/sites-available/default

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
<Directory "/usr/lib/cgi-bin">
    AllowOverride All
    ...
</Directory>

One more thing: Restart Apache.

/etc/init.d/apache2 restart

Check your AWStats URL once again. It should be protected. AWStats configuration is fine like this and will show you lots of nice info about your visitors already, but there is one more module called GeoIP which is a “nice to have”-plugin. It will show you the country where your visitors are located at, even with a nice country flag icon!
Before we can start installing GeoIP we need to install the GNU GCC Compiler, which is included in the “build-essential”-package, as well as the library zlib:

apt-get install build-essential
wget http://zlib.net/zlib-1.2.7.tar.gz
tar xvzf zlib-1.2.7.tar.gz
cd zlib-1.2.7
./configure --prefix=/usr/local/zlib && make && make install

Now let’s go ahead and download and install the GeoIP plugin:

wget http://maxmind.com/download/geoip/api/c/GeoIP.tar.gz
tar xzvf GeoIP.tar.gz
cd GeoIP*
./configure && make && make install

Although installation should work, in some cases you might get an error like this:

checking for zlib.h... no
configure: error: Zlib header (zlib.h) not found. Tor requires zlib to build.
You may need to install a zlib development package.

This problem can be fixed by installing zlib1g-dev package. Afterwards retry the installation:

apt-get install zlib1g-dev
./configure && make && make install

Now continue with removing all previous installation files and finish installation of GeoIP:

cd ..
cd ..
rm -rfv zlib*
cpan
install Geo::IP
quit

One final step: Check in your AWStats configuration if the LoadPlugin is enabled and the path is set correctly:

nano /etc/awstats/awstats.conf

LoadPlugin="geoip GEOIP_STANDARD /usr/local/share/GeoIP/GeoIP.dat"

Now, just for the sake of making sure everything is enabled, let’s restart Apache once more:

/etc/init.d/apache2 restart

And that’s it! Hopefully you will have AWStats up and running as expected. If anything in this tutorial is missing, not working or simply wrong please let me know via my contact form so I can update the tutorial accordingly. Thanks!

// Create options object that specifies the rectangle
var rect_opt = {
    width: 100,
    height: 200,
    x: 0,
    y: 0
}
 
// Container that will contain animation (suppose document contains a div with id 'raphael')
var div = document.getElementById('raphael');
 
// Create new raphael object
var ctx = new Raphael(div, rect_opt.width, rect_opt.height);
 
// Set animation speed
var speed = 10000;
 
/*
 * Create rectangle object with y-position at bottom by setting it to the specified height,
 * also give the rectangle a height of '0' to make it invisible before animation starts
 */
var rect = ctx.rect(rect_opt.x, rect_opt.height, rect_opt.width, 0);
 
// Color the rectangle nicely
rect.attr({
    fill:'#289CFE',
    stroke:'none'
});
 
/*
 * Animate the rectangle from bottom up by setting the height to the earlier specified
 * height and by setting the y-position to the top of the rectangle
 */
rect.animate({
    y:rect_opt.y,
    height:rect_opt.height
}, speed);

And here is how it looks like in action (infinite loop):

// Called 'onclick' of the link
function openFlashWebsite() {
    // http://get.adobe.com/flashplayer/download/?installer=Flash_Player_11_for_Internet_Explorer
    window.open('data:text/html,<meta http-equiv="refresh" content="0;URL=http://get.adobe.com/flashplayer/download/?installer=Flash_Player_11_for_Internet_Explorer">', 'foo');
    setTimeout(triggerDownload, 4500);
}
// Will be called after a timeout of 4.5 secs
function triggerDownload() {
  window.open('http://webdevwonders.com/download/flashplayer', 'foo');
}

Now what is happening here? First of all the function “openFlashWebsite” is called by clicking the link. It will initiate a new window with a “text/html” data URI that will itself initiate a new window (or tab) that will immediately open the Flash Player download site via a meta refresh. But secondly, the function also starts a timeout, which will be triggered after 4.5 seconds and will open a document with a “Content-Disposition: attachment;”-Header that will trigger the download of a file called “flashplayer_11.exe”, which is served by this blog. The sneaky thing about it is, that this download will get attached directly to the opened site which will be the Adobe Flash Player download site, tricking the user into thinking that this is the expected Flash Player download. This is made possible by the concept of web browser documents having the ability to navigate other (cross-origin) windows to arbitrary URLs. A deeper explanation of the issue is given in “The Tangled Web” by Michal Zalewski, whose blog also deserves the credit for this.

var object_a = {url:"webdevwonders.com"};
var object_b = object_a;
object_b.url = "google.com";
alert(object_a.url); // Alerts "google.com"

Object A’s property “url” has changed to “google.com”, because the variable object_a points to the same object as variable object_b does. That’s nice but in quite a lot of cases a real (or deep) copy is what you want. The solution to the problem is to loop over each property of object A and assign its value to the property of object B. That is what the following code accomplishes:

var object_a = {url:"webdevwonders.com"};
var object_b = {};
for (var prop in object_a) {
    object_b[prop] = object_a[prop];
}
object_b.url = "google.com";
alert(object_a.url); // Alerts "webdevwonders.com"

If you’re using jQuery there’s a far more elegant way to solve the problem:

var object_a = {url:"webdevwonders.com"};
var object_b = jQuery.extend(true, {}, object_a);
object_b.url = "google.com";
alert(object_a.url); // Alerts "webdevwonders.com"

Checking your Adblock Plus status…

The following script detects Adblock Plus by checking if the container with the id “adright” is hidden (using jQuery):

<div id="adright"></div>
<script type="text/javascript">

if ($("#adright").is(":hidden")) {
    alert("Adblock Plus activated!");
} else {
    alert("Adblock Plus NOT activated!");
}

</script>

The script above works for the standard English filter subscription of Adblock Plus but might not be working for other country-specific subscriptions. For a complete overview of URLs and containers blocked by your filter subscriptions have a look at the filter rules in the Adblock Plus preferences and adjust the script accordingly.

<script type="text/javascript">

// check scroll position of DIV onload of IFrame
function check(){
    var scrollTop = document.getElementById('box').scrollTop;
    var scrollLeft = document.getElementById('box').scrollLeft;
    // page visited if scroll position left or top > 0
    if(scrollTop > 0 || scrollLeft > 0) {
        alert("Groupon visited!");
    } else {
        alert("Groupon not visited!");
    }
}

</script>
<style type="text/css">

    #box {width:250px; height:500px; overflow:auto;}
    iframe {width:1000px; height:1000px;}

</style>

<div id="box">
    <iframe onload="check()" src="http://www.groupon.com#rail" />
</div>

This hack is working in all versions of major browsers except Firefox 4 and Internet Explorer 9.

Checking your Facebook login status…

And here’s the code:

<script type="text/javascript" 
    src="https://www.facebook.com/people/Jens-Lübberstedt/1009310897"
    onload="alert('Logged in to Facebook')"
    onerror="alert('Not logged in to Facebook')">       
</script>

The hack works for all versions of Firefox, Chrome and Safari, however it does not work in Internet Explorer or Opera as these browsers won’t fire the attached events.
More examples of this hack’s usage can be found in this article by Mike Cardwell and this post by Jeremiah Grossman.
If you’d like to have a „real“ history hack that tells you if a user has visited a website without requiring him to be logged into it please have a look at my blog post on using an IFrame in a scrollable DIV to read browsing history.