Hacking the Browser Week 3 – Decode A Bookmarklet

fontBomb

The bookmarklet  I’m gonna decode today is called fontBomb, which basically allows you to place bombs on web pages and blow up the text. Just like this:

Decoding

The original code for the bookmarklet is simple:

javascript:(function () %7Bvar s %3D document.createElement(%27script%27)%3Bs.setAttribute(%27src%27, %27http://fontbomb.ilex.ca/js/main.js%27)%3Bdocument.body.appendChild(s)%3B%7D())%3B

After decoding, it became:

'use strict';
javascript: {
 (function() {
 /** @type {!Element} */
 var s = document.createElement("script");
 s.setAttribute("src", "http://fontbomb.ilex.ca/js/main.js");
 document.body.appendChild(s);
 })();
}
;

Obviously, the “main.js” is the one who does the job. The complete code is here. Since the code is over 300 lines in length, I am just gonna pick up the most important lines to make the analysis.

Analysis

w.findClickPos = function(e) {
 var posx, posy;
 posx = 0;
 posy = 0;
 if (!e) e = window.event;
 if (e.pageX || e.pageY) {
 posx = e.pageX;
 posy = e.pageY;
 } else if (e.clientX || e.clientY) {
 posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
 posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 }
 return {
 x: posx,
 y: posy
 };
 };
This block of code enables the program to place a bomb where the user clicks their mouse.
Particle = (function() {

function Particle(elem) {
 this.elem = elem;
 this.style = elem.style;
 this.elem.style['zIndex'] = 9999;
 this.transformX = 0;
 this.transformY = 0;
 this.transformRotation = 0;
 this.offsetTop = window.getOffset(this.elem).top;
 this.offsetLeft = window.getOffset(this.elem).left;
 this.velocityX = 0;
 this.velocityY = 0;
 }
...
This part creates a particles system and simulates the movement in the real world.
Bomb = (function() {

Bomb.SIZE = 50;

function Bomb(x, y) {
this.countDown = __bind(this.countDown, this);
this.drop = __bind(this.drop, this); this.pos = {
x: x,
y: y
};
this.body = document.getElementsByTagName("body")[0];
this.state = 'planted';
this.count = 3;
this.drop();
}
...

This part relates to the bomb and how they react to time elapse.

Explosion = (function() {

function Explosion() {
 this.tick = __bind(this.tick, this);
 this.dropBomb = __bind(this.dropBomb, this);
 var char, confirmation, style, _ref2,
 _this = this;
 if (window.FONTBOMB_LOADED) return;
 window.FONTBOMB_LOADED = true;
 if (!window.FONTBOMB_HIDE_CONFIRMATION) confirmation = true;
 this.bombs = [];
 this.body = document.getElementsByTagName("body")[0];
 if ((_ref2 = this.body) != null) {
 _ref2.onclick = function(event) {
 return _this.dropBomb(event);
 };
 }
...
This is the most important part, which creates the explosion effects.

Leave a Reply