Archive for August, 2007

Debugging Javascript with Firebug

Thursday, August 23rd, 2007

Javascript interests me for 2 reasons:

Firstly, in involves a different mindset, in that its client focused, rather than server focused, as is the case with most scripting languages.

Secondly, because its client focused, it involves challenges in terms of browser variations that simply don’t exist with server-side scripting.

The upshot of this is that you have to code Javascript with extended terms of reference, or in other words, ensuring that something works is only half the battle; you also have to ensure that it works everywhere.

That’s why you really need a good debugger, and why the Firebug Add-on for Firefox is a must have for any developer with an interest in Javascript and/or AJAX.

There are a number of issues to deal with when debugging Javascript. Firstly, errors in your Javascript code occur in your browser, so (paradoxically) that can’t be displayed in your browser window like PHP errors, which the PHP parser on your server can create for you and send to you in the HTTP conversation. That’s why Javascript errors generally end up as an icon in your status bar, which, particularly in the case of IE, are as good as useless.

Then there are the errors that are errors in some browsers but not in others, which indicate a use of the DOM which is not necessarily incorrect, just not universally supported.

This is where Firebug comes into its own. Firebug basically lifts the bonnet on everything that is going on behind the scenes in your Firefox browser. For instance, if Firefox makes an XMLHttpRequest as part of some AJAX functionality, Firebug will show what the response was generated by that request.

Firebug will also show you a hierarchical representation for the entire DOM of any given page, and allow you to expose every property and attribute, including CSS attributes, of any DOM element simply by right-clicking on that element in your web page.

Furthermore, Firebug will let you analyse the performance of your page, by clocking the load time if every HTTP request, including images, css files, javascript files and whatever else you page calls.

All of this is achieved in an easily accessed and ergonomic interface which fits neatly into your window when active and into your status bar when inactive.

Of course, the question is how does this help with IE, in that Firebug isn’t available for IE and that errors can occur in the IE DOM that don’t show up in Firefox. An example of this would be where Firefox allows you to set a DOM event like ‘onClick’ with the setAttribute function whereas IE doesn’t (IE is probably more correct in this regard; Firefox is just being nice).

One answer to this question could be: “Why not get an IE Javascript debugger?”, but as with the answer to most IE development questions, you’re going to have to get our your credit card, which is a really big ask when you know that Firebug is Open Source and probably a far better debugger than anything you can buy for IE.

A better answer is that you can use Firebug/Firefox in parallel with IE. Basically, this involves testing pages in IE and Firefox at the same time. Where universal errors occur, Firebug will pick them up and allow you to fix them for both broswers, and where browser specific errors occur, you can at least examine what is going on via the Firebug interface, which, most of the time will point you to where your browser specific error is occuring.

Another point to bear in mind is that IE 7 is a lot closer to Firefox/Mozilla than any other IE browser when it comes to DOM and Javascript issues, so having Firebug in the bag is just about a no-brainer at this stage.

You can get Firebug (and read a bit more) from here:

http://www.getfirebug.com

phpBB Robotic Registrations

Tuesday, August 21st, 2007

Preventing robots from posting on a phpBB forum is easy enough if your prospective users are content to wait for an administrator to moderate the registration, but that isn’t going to suit everybody.

Requiring moderation on the part of the administrator is also a pain for the administrator, who has to deal with the registration emails and decide who is real person and who is not.

I came across this problem for http://www.planningmatters.ie/pmbb

When you first become aware of the problem, your impulse reaction is to head off to Google for a tried and tested solution, but the problem is that once a solution gains any currency, the robot authors figure it out and you’re back to square one again.

My first solution was to edit the email that is sent to users awaiting activation, asking them to forward that email back to me to confirm they were a real person. I also set up a cron job to run an SQL script to delete non-activated users from the database, deeming that any user who had not been activated 7 days after initial registration to be a robotic user.

This isn’t ideal in that it requires an extra step for users, but it does mean that real users get through, and that your database is kept in shape.

However, I was still getting floods of email from attempted robotic registrations, so I set about editing the registration script (includes/usercp_register.php).

This script processes registrations based on whether or not the user has agreed to the disclaimer on the primary registration page. I set an extra PHP $_GET variable as part of the disclaimer agreement, and amended the later part of the script to check for that variable before processing the registration. I also set the extra variable equal to date(”DG”) which means that the variable changes every hour. You can see this by examining the discliamer links here:

http://www.planningmatters.ie/pmbb/profile.php?mode=register

The fact that the extra variable is not part of the standard phpBB install will ward off a lot of dumber robots, and the fact that it changes will ward off some smarter ones too. However, there are still a lot of robots out there that are clever enough to detect the verification method, so I was still getting some SPAM registrations.

To clear off the final few robots I knew I was going to have to involve the intellect of real users, in that this is probably the only thing that robots can’t replicate. Hence, I decided to add a really simple, but real, question to the registration page. To do this I edited the following file under the default template:

templates/subSilver/profile_add_body.tpl

I inserted the following extra lines of HTML underneath the Visual Confirmation section:

<tr>
<td class=”row1″><span class=”gen”>What is the day today?</span><br /><span class=”gensmall”>We ask this question to prevent SPAM registrations. SPAM robots won’t know the answer.</span></td>
<td class=”row2″><input type=”text” class=”post” style=”width: 200px” name=”day_today” size=”6″ value=”" /></td>
</tr>

This adds the following question to the registration form:

“What is the day today?”

The answer to which 99.999% of real users on the forum will know.

To check the answer, I then added an extra line to the top of the main registration script:

includes/usercp_register.php

The line I added is:

//ANTI-SPAM DEVICE
if (isset($HTTP_POST_VARS['day_today']) and strtolower($HTTP_POST_VARS['day_today']) != strtolower(date(”l”))) die();

This basically ensures that the answer to the question is the same as the day produced by the date() function (case insensitive) and if its not, the script dies.

Previous to adding this, and even with the other changes, I was getting about 20 robot registrations per day. After adding this, it dropped to about 10 per day, so there was still some work to do.

Finally, Occams Razor came to the rescue. I found out that the robots trawl for the “profile.php” script and the “mode=register” URI, so I set about trying to change these.

They need to be changed in:

includes/page_header.php

includes/usercp_register.php

(remembering of course to rename the file profile.php too)

I changed mine to:

profile.php -> pmatters.php

mode=register -> mode=signupuser

Now, FINALLY, I have stopped getting robotic registrations!!