AaronSaray

The more I look at my code I wrote in my earlier posts about the unknown _popupControl() function and the Javascript Error Handler, I see opportunities to leverage these errors into useful user interactions.

Doing a service for your visitor

After your javascript is tried and tested and error free, there are still chances that errors can be logged using my utility. These usually are the result of Spyware that is left on the user’s machine. Sometimes some removal processes don’t capture all of it. The _popupControl() method was one such remnant.

I thought that instead of just ignoring these issues, I could gently alert the user to the issue. Perhaps, I could even get affiliate commissions for a product that I know for sure removes these threats.

There are two ways to go about handling these javascript errors: client side and server side.

Client Side

Client side javascript error handling requires a bit more front-end programming. It also shows a lot of your cards to the outside world. By looking at the code in the javascript portion of your page, visitors could see all types of errors that you’re trying to detect. While I don’t think this is a deterrent to using this method, you may feel otherwise.

First things first – if you can’t remember, check out my Javascript Error Handler and Logger entry to see the code I’ll be expanding on.

My new code is going to look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            window.onerror = function (message, url, line) {
                /** log message **/
                var i = new Image();
                i.src = 'error.php?url=' + escape(url) + '&message=' + escape(message) + '&line=' + line;
 
                if (message.indexOf('spywareWindowGenerator')) {
                    var d = document.createElement('div');
                    d.innerHTML = 'Sounds like you got spyware';
                    document.body.appendChild(d);
                }
                else if (message.indexOf('otherbaddie')) {
                    var d = document.createElement('div');
                    d.innerHTML = 'Sounds like you got some other baddie';
                    document.body.appendChild(d);
                }
            }

I’ll break it down:

First, the standard logging service is initiated on error. The error.php file will log the javascript error for further research later.

Next, I evaluate the actual message that was sent to the error handler. In this example, I’m looking for two possible issues, a reference to the function _spywareWindowGenerator() and a reference to someOtherBaddie(). Both of these functions are not defined in my code and can be considered to be remnants of the spyware infestation.

The first ‘if’ statement checks for the existence of ‘spywareWindowGenerator’ in the message. If it exists, it creates a new DIV HTML element. Then, it populates it with a message regarding this error. (Note, you could also load an image, create link, etc.). Finally, just for demonstration purpose, that DIV is added to the end of the body and is displayed.

The second if statement is simply checking for the case of ‘otherBaddie’ – and will do a similar process.

Like I mentioned before, this lays all of your cards out on the table – could potentially make your page load longer (especially if you have a lot of spyware you’re tracking), but be most versatile.

Server Side

With server side, I’m going to rely on the image that the javascript error handler is loading. If this image is populated by my error.php file, then I’ll show it.

First, the modified javascript for our error handler now looks like this:

1
2
3
4
5
6
7
8
9
10
11

            window.onerror = function (message, url, line) {
                /** log message **/
                var i = new Image();
                i.src = 'error.php?url=' + escape(url) + '&message=' + escape(message) + '&line=' + line;
 
                /** now check to see if we have something to show **/
                if (i.height) {
                    /** add it to the page **/
                    document.body.appendChild(i);
                }
            }

The first part is the standard logging mechanism that we’re used to. However, after that, I check for a height of the image that was requested. If no image was generated by the PHP GET request, then the height will be 0. Otherwise, the image object will return a height. Then, just for demonstration, I append that image to the bottom of the body of the document.

This means that we put a little bit more of the responsibility for determining the message to display to the user on the back end. At first it seems like it could be a little less verbose – as it is just an image. However, we could expand the javascript error handler to detect what ‘link’ it could display based on the image dimensions, etc. (This is for a different entry if need be…)

Next, I had to edit my error.php file. It now contains this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$keys = array();
$keys['_spywareWindowGenerator'] = 'badSypware.png';
$keys['otherBadGuy'] = 'otherBadGuy.png';
 
/**
 * check for an image to show
 */
 
$imageToShow = '';
foreach ($keys as $substring=>$image) {
    if (stripos($_GET['message'], $substring) !== false) {
        $imageToShow = $image;
    }
}
 
if (!empty($imageToShow)) {
    header('Content-Type: image/png');
    readfile($imageToShow);
    die();
}
else {
    error_log("{$_GET['message']} occured on line {$_GET['line']} of URL {$_GET['url']}");
}

The first step is to determine all of the key words that could appear in javascript error messages. Then, associate them with an image that conveys our message.

The next bit of code looks through and searches the message for any of the possibilities. If it finds one, it sets the image to be the associated value for that key.

Finally, the PHP code checks to see if there is an image to show. If so, it sends the proper header and reads the file to the output buffer. Otherwise, it assumes it is an error that we’re not familiar with and logs it.

In this example, I used the following two images just for testing.

When reviewing some javascript security ideas, I came across the document.URL property. Turns out that my normal way of retrieving the location (document.location.href) is both a getter and a setter. The document.URL is just a getter.

Check it out with this code:

1
2
3
4

alert(document.URL);
alert(document.location.href);
document.URL = 'http://google.com';
document.location.href = 'http://yahoo.com';

The results are simple: you will get the current location twice – and then an error. If you comment out the document.URL line, it will redirect to yahoo.

Mr. Skowron (his business) was working on a flash animation for a client that had a snow fall. What really irked me about the end result, was two things.
a) it was in flash
b) the snow didn’t build up

The client was happy. So that’s all good. But, I like a challenge… So I decided to make my own version.

The Snowfall Script

I didn’t want to reinvent the wheel – so I grabbed a pre-made script (by Scott Schiller). It simply adds the snowfall to the body.

Creating a snow line

The next thing I wanted to do was make a snow line that would slowly creep up. My first thought was just to have a standard white swoosh move up. This wouldn’t work because I wanted to have it scale the entire size of the monitor. Plus it wouldn’t look that natural.

I decided to make three images with various swoosh type marks about 500px wide. Then, I used photoshop to offset them by half. (Filter -> Other ->offset -> set horizontal to 1/2 the width of the image). This made the image tile-able. (It may be necessary to smooth out the new overlap you just created). All three were created, 500px wide and 50px tall.

Creating the HTML

The HTML would be pretty simple. I had to have three snow lines – oh and I wanted a tree. Let’s take a look:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>Snow!</title>
    </head>
    <body>
        <div id="tree"></div>
        <div id="snow1" class="snowblock"><div></div></div>
        <div id="snow2" class="snowblock"><div></div></div>
        <div id="snow3" class="snowblock"><div></div></div>
    </body>
</html>

We’ll be referring to these elements a little bit later.

Use CSS to Position Everything

The next thing to do was to give my div’s some dimension and some background images. I thought I’d start out each snow line 50px from the bottom and tile the image. Since they have transparent edges, you should be able to see varying lines of ‘horizon’ on the snow. I also placed the tree image near the right edge to give it that look I was looking for.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

            body {
                height: 100%;
                padding: 0px;
                margin: 0px;
                background: #000;
            }
            #tree {
                background: url('treeback.jpg') no-repeat;
                position: absolute;
                bottom: 10px;
                right: 20px;
                height: 396px;
                width: 530px;
            }
            .snowblock {
                position: absolute;
                bottom: 0px;
                width: 100%;
                background-repeat: repeat-x;
                height: 40px;
            }
            .snowblock div {
                background-color: #fff;
                margin-top: 40px;
                height: 0px;
            }            
            #snow1 {
                background-image: url('snow1.png');
            }
            #snow2 {
                background-image: url('snow2.png');
            }
            #snow3 {
                background-image: url('snow3.png');
            }

First, give the body some background color, get rid of paddings and set a height of 100%. The next section is the tree placement. This is pretty simple.

For each class of snowblock, they are absolutely positioned at the bottom with 100% width. I gave them each 40px height. Each image is 50px tall, but I wanted an acceptable gutter just in case.

As each image moves up, they will start to reveal the background color again. To solve this, the interior divs are given a background color of white. Their top margin is 40px – to offset them enough from the image (so as to not bleed their own background color upwards into the transparent snowline). They start out with no height.

Finally, each image div is given a background image of snow.

The magical javascript

First off, I put the following javascript include tags in the HTML

1
2

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

After loading jquery and the premade script, the following javascript is executed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

        function upSnow()
        {
            var id = 'snow' + (Math.floor(Math.random()*3) + 1);
            var snow = $("#"+id);
            var filler = $("#" + id + " div");
            snow.height(snow.height() + 1);
            filler.height(filler.height() + 1);
        }
 
        $(function(){
            snowStorm.flakesMax = 250;
            snowStorm.flakesMaxActive = 100;
            snowStorm.animationInterval = 33;
            snowStorm.snowStick = false;
            setTimeout(function(){setInterval('upSnow()', 2000)}, 5000);
        });

First, the upSnow() function is generated. This will randomly pick an ID between snow1 and snow3 and inch it up 1px. The child div’s height is also increased by 1 pixel.

When the javascript fires, a few options are set for the snowStorm js library.

Finally, a timeout and an interval are set. The first timeout is used to set the interval. I don’t want the interval to start until the first flakes start hitting the ground. this takes approximately 5 seconds, so that delay is set.

After 5 seconds, the anonymous function fires off the setInterval request to run the upSnow() function every two seconds.

See it in Action

Seems to me, people like to SEE this stuff in action. Weird. Anyway, here ya go:
http://demo.aaronsaray.com/demo/snow/