Pixelastic

Today, at about 9pm (GMT+12), I found my own blog hacked. When I wanted to access it, I was redirected to a malware site.

Half an hour later, it is back online again, and here is what I did.

First, I downloaded the webpage on my computer using curl http://www.pixelastic.com/ to analyse it in search of a clue on the attack vector.

Unfortunatly, I couldn't easily find the culprit. No img tag loading a php file, no XSS injection that I could find. My guess is that the attacker tampered the js files loaded to add its own custom evil script. But as my js files are concatened and compressed in a file with a md5 name, it wasn't obvious that they had been compromised.

After that, I sshed to the server and tried to find what files where modified since my last commit. As I'm using Mercurial for that, this was a simple matter of hg status.

And I got a shitload of result. Actually, all my php files had been modified (and as I'm using cakePHP, that means, a lot of file). Running hg diff, I found out that all the php code of each file had been replaced with an evil code (enclosed in several layers of eval+base64).

I updated my working directory to the latest commit with hg update --clean to get all those files as they were before the attack. Running hg status once more still showed a bunch of new php files added. Running hg purge finally get rid of them.

I finally deleted all the compressed css and js files, to force them to be created again, and that's it, the website is online again.

I still don't have a clue on how this happened. How did someone access my files ? Is that an XSS attack ? Is my password cracked ? Is there another security weakness I'm not aware of ?

EDIT : Got hacked again. Seeing that the cakePHP Cache files were deleted, I guess it is a known attack on a cake vulnerability. Got the website up again, but will fix it as soon as my holidays allow.

As I'm about to move for a couple of long months without an internet connection and a lot of travel hours, I thought of downloading the TEDTalk podcasts.

Being a linux user for about a year now, I'm taking the habit of using the linux tools to do the boring and repetitive work. Downloading more than a hundred files seems like a good candidate for a script.

The complete list of audio podcasts is available here. I simply selected all text and copied it into a file.txt.

Then, it was simply a matter of extracting only the urls, and feeding them to wget

cat file.txt | tr ' ' '\n' | tr '\t' '\n' | grep http > list.txt
wget --no-clobber -i list.txt

This took a while to download as there are more than 400 files, but that way I'll have some interesting talks to listen to during my trip.

Here's one more post in my productivity serie. This one is about the Dropbox service.

What is Dropbox ?

In a nutshell, Dropbox is a private hosting service, based on a cloud infrastructure. Once you've installed the app, one of your folders (default to ~/Dropbox) became synchronized with your Dropbox account. Every document that you save in that folder, and any subfolder you create, will immediatly be saved online in your Dropbox account.

In the real world, it means that you can easily share one folder and all its documents easily between all your computers. If you don't want to install the app, you can simply log to dropbox.com and download/upload any file you want.

How I use it

There a few ways you can use Dropbox. Here are a few of mine, feel free to add yours in the comments.

As I used to work on Windows (and I still have to sometimes), I always had to install a bunch of apps on a brand new computer before being able to start working. This includes the traditional antivirus, browser, music player, IDE, etc. Instead of going through the laborious process of downloading all the installer on each of the websites, I've saved them in my Dropbox and I just have to install Dropbox, then install the apps I need.

Instead of a bunch of todo.txt files spread accross all your computers, wouldn't it be tidier to only have one, shared ?

The same goes for the KeePass file, so you can have an easy access to all your passwords.

I also use it to synchronize my Tomboy notes between my computers (I'll go into more details in another note).

It might be a bit excessive, but I personnally also share my icons, sounds, wallpapers and other customization stuff, so I won't feel lost on a new computer.

Thanks to the amazing Doxie scanner (more on that on another note), I'm now a scan junkie. I scan all the official paperwork I got in my physical mailbox and store it in the Dropbox.

Be it a bill or a banking receipt, I scan anything that looks like official and that I might need again one day. That way, I know I can always connect to dropbox.com and find any official document of the past 5 years in a matter of minutes. This saved my day quite a few time already !

Last words

Dropbox is a free service. You can have 2Go for free, or pay for a more space. I personnaly only use a fraction of that so I stay on the free plan. I haven't mentionned it because I don't use it, but you can also share some folders with other Dropbox users, which is a nice addition when working on the same project.

In a previous post, I bloggued about the way to emulate OOCSS behavior with multiple classes in IE6.

Today, I'll do a follow up and write about a possible gotcha involving the :visited pseudo class.

Following the previous example let's imagine you have a styling for your defauls links (a { color:blue; }), one for the default buttons (.button { ... } ) and one for a custom button that extend the .button (.customButton { ... })

Now, imagine that you'll want to style all :visited links the same way non-visited links are styled. You might write something like :

a, a:visited { color:blue; }

Unfortunatly, this will have some nasty side effects on your .button and .customButton rules because a:visited will have precedence over .button and .customButton

You can find more information about CSS specificity in this Star Wars post.

Your first solution could be to add even more specificity to your own rules, to override the a:visited one, like so :

.button, .button:visited { ... }
.customButton, .customButton:visited { ... }

This will work, of course, but you're only adding complexity to your specificities, and this get more and more tedious the more you add other customised buttons.

In fact, there is a much better way, one that you could throw in your reset.css if it isn't there already :

a:visited { color:inherit; }

That way, all your visited links will inherit their color from their non-visited version. This mean that visited .button will use the .button color, visited .customButton will use .customButton color and simple visited links will use the a color.

Of course, if you defined a background-color in your a, you should define a background-color:inherit in your a:visited too.

In a pure OOCSS style of writing CSS, let's imagine you created a css class of .button that visually turns a simple link into a button.

<a href="#" class="button">I'm a button</a>

Now, if you want to define a custom version of your button, let's say a button that will trigger a very dangerous action, you might want to style it differently, so our user will think twice before hitting it.

You got two ways of achieving this, depending if you still support IE6 or not.

Simple way for non-IE6

If you don't care about IE6 (and hell, it's 2012, you shouldn't), you just have to add a second class to your button/link :

<a href="#" class="button dangerous">I'm a dangerous button</a>

And in your CSS file, just define some special styles (like a red background) to your dangerous button.

.button.dangerous { ... }

Actually, that's the path followed by Bootstrap (among others). But it will not correctly work in IE6, because it does not understand multiple classes rules. Instead, IE6 will read .button.dangerous {} the same as .dangerous {}.

This will cause problems as soon as you'll use the .important class on something else than a .button : IE will apply the .button.dangerous rules to anything with the .dangerous class.

Other way, for IE6

The solution I personnaly use to fix IE6 is to use more explicit classes instead of using multiple ones. For example, instead of .button.dangerous {} I'll use .buttonDangerous {} and write my html like this :

<a href="#" class="button buttonDangerous">I'm a dangerous button, even on IE6</a>

That way, the link will have both the styles of .button and .buttonDangerous. This will assure cross compatibility with IE6, at the expense of a (arguably) less readable markup.

As of today, I hope that I'll never have to code for IE6 websites again, but if you ever need to, that's a little trick that can really help.

This post will be the first of what I hope will be a long serie of posts. I'll blog about some of the little tricks I've learn in the past years that make me go faster on my daily job.

I'll start with something I can no longer work without : my global hotkeys.

The concept is pretty simple, I've binded some keys combinations to launch specific applications or directories. It might not seem very important, but it does make you gain a tremendous amount of time for those apps you launch pretty often like browser, IDE, or project directory.

I used to work on Windows, and I then used a little script named AutoHotKey to bind my keys. The script even comes packaged with its own language if you ever want to script complicated stuff.

I'm now working under Ubuntu, and the global hotkeys can be defined directly from the System Settings (in 11.10 it's System Settings > Keyboard > Shortcuts > Custom Shortcuts)

Opening apps

I choose a key combination hard enough to type so I won't type it by mistake, but easy enough to remember that I could type it whenever I want.

For example, I binded all the app I use the most to a Ctrl+Win+{Letter} combination. Ctrl+Win+C opens Chromium, Ctrl+Win+F opens Firefox, Ctrl+Win+T opens Trillian, etc.

Opening folders

I used a close combination for opening directories : Ctrl+Win+Alt+{Letter}. Those three keys are side by side on most keyboards so pressing them is easy.

This time I used the letter H for my home folder, D for the Dropbox folder, W for /var/www, etc, etc.

I've tweaked my keyboard in a few other ways, but this will be the subject of another post. Hope this one gave you some ideas.

Yesterday, I've tried to install nodejs and the jshint package to add automatic jshint parsing to my vim.

Well, it wasn't so simple due to a bug in the npm version shipped with node.

Here are the complete commands to run to make it work, in case I had to do it again :

# Download and extract node
cd ~/local/src
wget http://nodejs.org/dist/v0.6.6/node-v0.6.6.tar.gz
tar xvzf node-v0.6.6.tar.gz
rm node-v0.6.6.tar.gz
# Compile and install
cd node-v0.6.6
./configure
make
sudo make install
# Update npm
sudo npm install npm@alpha -g
# (Optional) Clear npm cache
npm cache clean jshint
# Install jshint
sudo npm install jshint -g

Source : https://github.com/isaacs/npm/issues/1888

When browsing the web, you might have seen a "mixed content warning" popup show in your browser. They are most of the time poorly worded and their meaning is quite obscure.

What it means is that your are currently browsing a page with both http and https content. Typically, if your page is https but one of the css, js or image file it contains is requested through http, the warning will pop.

(It's interesting to note here that not all assets are treated equal. Loading a flash movie through http does not trigger the warning).

The IE special case

Now, what's special about IE is that it also trigger the mixed content warning when content is the other way around. If you're serving a page through http and load assets through https, it will consider it a mixed content too.

In a sense, that's logical, but it needlessly prompt the user with a dialog that block downloading of all https assets until confirmed.

The solution is to make sure that all your assets are loaded with the same protocol as the host page. An easy way to do so is to use the // relative protocol url. This will use http or https automatically based on the page protocol.

And adding Facebook to the mix

A few months ago, Facebook forced all apps to serve content through https. In the meantime, they suggested that all their users browse their website using https too.

Unfortunatly for us, some of our own users had bookmarks in their browsers and Facebook pages referencing our old http://apps.facebook.com/appname/ url. And following that link triggered the dreaded mixed content warning in IE.

When accessing this page, Facebook was loaded in classic http but our inner iframe was loaded through https. So far, so good.

The problem came from one of Facebook own javascript SDK included in our app. This script loaded other scripts based on what it needed.

Unfortunatly, it loaded the other scripts from an http (not https) server. The SDK has two distinct sets of urls, based on the current page protocol.

It was wrongly considering being in an http page, not an https one, and thus used the wrong set of urls. This confusing comes from the fact that it checks the top page protocol instead of checking the current page protocol.

After some googling, I found a solution that consisted in forcing the SDK to consider that we are in https mode by calling : FB._https = true before the call to FB.init()

Almost there

If correctly forced FB to use the correct set of urls, thus removing the mixed content warning. And I almost thought it would be that easy.

It was not.

This did not fixed the payment popup. All Facebook UI element loaded correctly (feeds, permissions, requests), but the payment popup.

I couldn't find a way to fix that, so I reverted to a more brutal approach.

Final and brutal solution

All my problems came from the fact that FB thought we were serving http while in fact we were serving https. So the solution, might be to force FB to serve https from start to end.

I wanted to detect if the page was loaded through http://apps.facebook.com/appname/ or https://apps.facebook.com/appname/.

Unfortunatly, due to cross domain restrictions in Javascript, we are not able to read, from inside and iframe, the parent frame properties. So I couldn't read top.location.protocol to easily check if I needed to redirect.

But, as I mentionned earlier, FB._https incorrectly report that we are not in https because it checks the top protocol. So I used this var, to know if the parent frame was in the correct protocol or not. Using this own FB bug to fix itself.

Now, for the redirect : even if I couldn't read the top.location, I could modify it. I just had to call top.location.url = 'https://apps.facebook.com/appname/' to redirect the whole page.

I hardcoded the app url because there was no way to get it from js, and I took care of keeping any GET parameter passed before the redirect, and I ended up with this :

if (!FB._https) {
	var appUrl = 'https://apps.facebook.com/appname/';
	var iframeUrl = location.protocol+'//'+location.host+location.pathname;
	var redirectUrl = location.href.replace(iframeUrl, appUrl);
	top.location.href = redirectUrl;
	return;
}
FB.init(options);

Conclusion

I'm not really proud of this solution, as it is mostly a hack and will force a useless loading of the http version before loading the https one, but that's the best I've found. If any of you have a better solution, feel free to comment.

Just found this weird little behavior of PHP today :

$a = false;
$b = true;
$c = $a OR $b;
$d = ($a OR $b);
var_dump(compact('a', 'b', 'c', 'd'));
array(4) {
	["a"]=>    bool(false)
	["b"]=>    bool(true)
	["c"]=>    bool(false)
	["d"]=>    bool(true)
}

$a OR $b in fact returns $a, while ($a OR $b) returns the result of the parenthesis. On the other hand, $a || $b correctly returns the result of the expression.

It seems that AND and OR are weak compared to && and ||.

Be aware of that, or it might backfire on you. Or just discard all AND / OR in favor of && / ||

I've just stumbled upon that weird behavior when force casting the return of a function to an object. The PHP result was not what I expected.

$a = null;
echo empty($a) ? "Yes, I'm empty" : "You should not see this"

This is pretty straighforward code. Now, we test it with an object.

$a = (object) null;
echo empty($a) ? "Yes, I'm empty" : "You should not see this but, actually, you do."

Note that it even gets weirder when (object) false and (object) true become objects with a key scalar, set to false

This is one of the little things that make me want to ditch PHP for a better language.