A Basic Method for Building Noisy Images
(Page 1 of 4 )
Noisy images (used for captchas) are one way to help insure the security of online forms and prevent them from being abused. In this article, the first part of a three-part series, you will learn how to build noisy images with a simple combination of CSS, (X)HTML and a friendly scripting language, such as PHP. This method offers less complexity than the more conventional methods of building noisy images.
A
downloadable zip file is available for this article.
Undeniably, for a long time the Internet has been considered to be a pretty insecure network, and this infamous attribute, for better or worse, is a direct consequence of its intrinsic nature. After all, theoretically it's a worldwide open system, where a massive number of computers are interconnected with each other, thanks to the implementation of set of standard communication rules known popularly as protocols.
Unfortunately, as you know, these protocols are actually quite far from being completely invulnerable. This issue continues to give headaches to a huge number of Internet users, ranging from seasoned system administrators and developers to average people. Logically, all of these concerns are automatically transferred to specific areas of the global network, where the web is perhaps the most affected, since it has the largest number of visitors.
Of course, from a web developer's point of view, building secure web sites should be a primary goal (again, here I'm speaking only in a theoretical aspect). That's the main reason for the existence of a vast arsenal of tools and applications aimed at improving the overall level of security of those web sites.
Naturally, the grade of security of a given system is determined by its weakest element, and this principle also applies to web sites. But, if you rethink this concept carefully, I'm pretty certain that the first thing that will come to your mind when you consider one of the most vulnerable components of a website, is...online forms.
Yes, once a web site is up and running, it must provide its visitors with a straightforward method of contact, regardless the nature of the site. If a web form was already set up a for that purpose, here is where problems start to show up. This fact is widely known by most developers: along with the flow of legitimate emails that are received via an online form, you will probably get faked messages, which are sent out by malicious users or by automated systems.
In either case, a simple yet effective method for preventing, at least partially, the submission of automated email via web forms is the implementation of so-called noisy images. In most cases, these are surprisingly easy to create. Since this technique is becoming extremely popular with many modern web sites, over the course of this three-part series I'm going to walk you through the process of building these images. I'm going to use a slightly different approach that eventually might be quite appealing to you.
As you know, noisy images are generated mostly by server-side image libraries; nonetheless, in this series I'm going to show you how to build them by utilizing a simple combination of CSS, (X)HTML and a friendly scripting language, like PHP, so you don't need to deal with the complexities of an image library.
Speaking more specifically, first I'm going to use a procedural approach to create the images in question, and then follow an object-based approach, in this way providing you with a decent number of methodologies for implementing this handy mechanism into your own web sites.
So, are you ready to learn how to create noisy images in a few easy steps? Okay, let's begin now!
Next: Creating a simple contact form >>
More DHTML Articles
More By Alejandro Gervasio
/ 3 
