Virtual Keyboard Login – Version wicked.evil [avoid screenshots]
Mon, 28th Jul, '08
Ok, so we had virtual keyboards for some time on login pages being served worldwide. In fact so long that we had this. So we have virtual keyboards here again, and some smartness, some.
Earlier in this blog we covered some crypt way to send passwords to the server from the browser, and thanks to the response, i feel motivated enough. Now we are onto making a virtual keyboard, and yeah, this is a proof-of-concept and you are free to take it to the moon alongwith you.
We are just going to blank out all buttons just before the user is going to click on one. Basically do a backgroundColor = fontColor on all buttons to make it difficult what is written on the buttons on mouseover and restore on mouseout. Normally a user figures out which button to click on and then positions the mouse on the button and clicks, so if the button is showing what is written on it, definitely some proof-of-concept program can take a snapshot of the web page to figure out which button was clicked on. We are just going to wipe the face of the button off. For some more fun, we are going to randomize the order of buttons at will by calling randomizekeys() and supplying the order of the keys as an argument. And yeah, the styling class is closely tied to the javascript functions, so keep that in mind while playing with styles or the javascript. So here we go[look at the onload handler in the body tag] …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Virtual Login Panel</title>
<style>
.loginnumkey {
background:#000;
color:#FFF;
padding:5px 0 5px 0;
min-width:40px;
font-size:16px;
font-family:tahoma;
margin:1px;
}
</style>
<script>
function randomizekeys(assigncode, numkeysclass)
{
var j = 0;
var els = document.getElementsByTagName('input');
var elsLen = els.length;
var pattern = new RegExp('\\b'+numkeysclass+'\\b');
for (var i = 0; i < elsLen; i++)
{
if ( pattern.test(els[i].className) && j < assigncode.length)
{
els[i].value = assigncode[j];
j++;
}
}
}
function keysoff(numkeysclass)
{
var i = 0;
var els = document.getElementsByTagName('input');
var elsLen = els.length;
var pattern = new RegExp('\\b'+numkeysclass+'\\b');
for (i = 0; i < elsLen; i++)
{
if ( pattern.test(els[i].className) )
{
els[i].style.backgroundColor = '#FFF';
}
}
}
function keyson(numkeysclass)
{
var i = 0;
var els = document.getElementsByTagName('input');
var elsLen = els.length;
var pattern = new RegExp('\\b'+numkeysclass+'\\b');
for (i = 0; i < elsLen; i++)
{
if ( pattern.test(els[i].className) )
{
els[i].style.backgroundColor = '#000';
}
}
}
function clicknumkey(inputid, inputvalue)
{
document.getElementById(inputid).value =
document.getElementById(inputid).value + inputvalue;
}
</script>
</head>
<body onload="javascript:randomizekeys('1095673824', 'loginnumkey');">
<input type='text' id='passwordbox'>
<br><br>
<input type='button' id='lkey1' value='1' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkey2' value='2' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkey3' value='3' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<br>
<input type='button' id='lkey4' value='4' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkey5' value='5' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkey6' value='6' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<br>
<input type='button' id='lkey7' value='7' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkey8' value='8' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkey9' value='9' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<br>
<input type='button' id='lkey0' value='0' class='loginnumkey'
onclick="javascript:clicknumkey('passwordbox', this.value);"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
<input type='button' id='lkeyclear' value='reset' class='loginnumkey'
onclick="javascript:document.getElementById('passwordbox').value='';"
onmouseover="javascript:keysoff('loginnumkey');"
onmouseout="javascript:keyson('loginnumkey');">
</body>
</html>
This may not work in IE, I mean this code snippet. If you want to make it work, just fiddle with i, j declarations in the function randomizekeys(), like moving them around in the function.
