Friday, January 26, 2007

Who's running to get Vista ?

Yesterday HTML.it posted a nice question about Vista: "If You have Vista or You'll install them quickly put your hand in the air".

This is just a mini report about users opinions (totally: 47) and I think these informations should be interesting:

  • I'll install Vista as soon as I can or I just have Vista
    12.8 %

  • I don't believe in Vista and I'll be on XP for many other months/years
    38.3 %

  • I'm thinking to spend money for a Mac (with OSX) instead of Vista license
    8.5 %

  • I'm thinking to install Ubuntu or I'll never instal Vista (I'm just on Ubuntu or other Linux distributions)
    40.4 %


So what are You waiting for to change your OS ? Get Linux !

Wednesday, January 24, 2007

bored with something to array convertion ? map them !

I'm rewriting my JSL to include by default inside my next project.
This project will include automatically a lot of standard JS 1.5 methods or functions, and Array.map is one of those.

While I'm testing some proto performances, I've thought about a really simple way to switch from an array or from a node list (getElementsByTagName) with a simple, fast and single line of function.

// old example version
// function _A(a){return [].map.call(a,function(a){return a})};

// new version, Daniel suggest, faster and doesn't require any prototype !
function _A(a){return [].slice.call(a)};

and that's all, do You like it ?

As first point, You need FireFox 1 or greater (or Mozilla if You prefere) or this short piece of code:

if(!Array.prototype.map) Array.prototype.map = function(callback){
for(var i = 0, j = this.length, result = new Array(j), self = arguments[1], u; i < j; i++) {
if(this[i] !== u)
result[i] = callback.call(self, this[i], i, this);
};
return result;
};


Then You have "everything You need" to get quickly every iterable element.

These are just two examples

function sort(){
return _A(arguments).sort().join("<br />");
};
document.writeln(sort("Luke", "Jabba", "Fenner"));
document.writeln(sort("c", "a", "b"));



var firstScript = _A(document.getElementsByTagName("script")).shift();
alert(firstScript);

var allUnorderedList = _A(document.getElementsByTagName("ul"));

alert(_A(null).constructor === Array); // true ;-)


These nice trick should be used with forEach method too.
Stop for and while loops, each them !

function changeLinks(onclick){
[].forEach.apply(document.getElementsByTagName("a"),
function(link){
link.onclick = onclick;
});
};

changeLinks(function(){
window.open(this.href, "");
return false;
});


... and sure, You need forEach prototype too ...

I suppose every other JS 1.5 Array method should be cool enought to work with DOM nodes too ... do You agree ?

Are thinking about performances ? Well guys, quite the same of generic loops, even faster (works in core) with every FireFox !!!

Thursday, January 18, 2007

JavaScript Unobtrusive Security Form

In some cases JavaScript should be used to add more security during a client/servr interaction.

Paul Johnston knows this and tha's why He created md5 and sha1 hashing JavaScript implemntations.

You can choose to send just hashed form variables, to be sure, for example, that recieved stirngs are valid hash and they are present on db (removing sql injections problems).

You could even create special hashed strings too, to forget "man in the middle" problems, using a salt that will be generated and verified from server side code.

This hashed value could make your password more secure, requiring a kind of brute force that will be quite hard to do.

// man in the middle found the salt and the logging string
$try = 12345;
if(hash($salt.hash($try)))
echo 'Passwrod or collision found: '.$try;
else {
$try = 12346;
if(hash($salt.hash($try)))
// ... and again, again ..
// every time with a double hashed string ( slower than a single :D )
}


At the same time, this salt creates a collisions free hashed string, then a brute force operation should not be used to login in a form like this one because new salt , hashed with collision, will not produce a compatible authorizzation hashed string (or better, it's really difficult that a collision, hashed with a different string, will produce another collision).

This form is absolutely WAI-AAA WatchFire approved, valid W3C XHTML 1.1 and valid W3 CSS.
It's unobtrusive, works without JavaScript too (in a less secure way) and SecurityForm JavaScript function should be used in every kind of form, just modifing form and inputs id as You want.

This is a basic php example page, compatible with PHP 4.3 or 5 or 5.2, that shows how You should "drive correctly" login operation.

I hope code description is enought to understand this kind of form and I suggest to use sha1 instead of md5 (better security).

This is a short description:

  1. Client verify user and pass, if these are not empty call form.action page to recieve a new salt ($salt = uniqid(rand(), true)) sending just userName

  2. Server generates a new salt then it saves them on a simple table adding userName and time() so it sends them as SecurityForm onload callback

  3. Client recieves this new uniq string and generates a logging variable

    logging = choosedHash(salt + choosedHash(userPassword))

    and redirects client to authentication page sending uniqid recieved from server, userName and loging

  4. Server verify that salt table contains recieved salt and verify if found userName is the same of GET value, then verify that logging is a valid authorizzation string:

    // example query
    $query = 'SELECT * FROM user_list WHERE user = $user AND MD5(CONCAT($salt, pass)) = $logging';

    where pass is just hashed during registration

  5. server removes recieved salt from table and other salts with expire less than time() - 30 seconds



... and that's all.
Are You sure, now, that your user with JS enabled are a bit more protected ? :-)
(of course, SSL is absolutely the best way to "ensure privacy" ... but You could implement this kind of form with SSL too)


What about compatibility list ?
Well, every JavaScript compatible browser, starting from IE 5 and every JavaScript disabled or uncompatible browser too.