
<?php
if(isset($_GET['viewsource']))
    die(highlight_file(__FILE__, true));

//Usually there is a database with users stored. In this example, there is only one and he is predefined
$username = 'edesign';
$password = md5('secret');

//Start the session to store the challenge string
session_start();

//Simple function to generate the challenge string
function getChallenge($length = 15)
{
    $chars = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890';
    $ch = '';
    for($i = 0; $i < $length; $i++)
        $ch .= $chars[mt_rand(0, strlen($chars) - 1)];
    return $ch;
}

//Do the login check
$feedback = '<font color="#AAAAAA">No login attempt yet...</font>';
if(isset($_POST['login_un']))
{
    if($_POST['login_hasJavaScript'] == 'true')
    {
        //secure
        $feedback = '<font color="#FF0000">Secure login attempt failed!</font>';
        if($_POST['login_un'] == $username && $_POST['login_pw'] == md5($password . $_SESSION['challenge']))
            $feedback = '<font color="#008800">Secure login attempt succesfully completed</font><br /><br /><a href="'.$_SERVER['PHP_SELF'].'">Logout</a>';
    }
    else
    {
        //insecure
        $feedback = '<font color="#FF0000">Login attempt failed!</font>';
        if($_POST['login_un'] == $username && md5($_POST['login_pw']) == $password)
            $feedback = '<font color="#008800">Login attempt succesfully completed</font><br /><br /><a href="'.$_SERVER['PHP_SELF'].'">Logout</a>';
    }
}

$feedback = $feedback . '<br /><br />';

//Setting a new challenge string
$_SESSION['challenge'] = getChallenge();

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Challenge Hash</title>

<script src="md5.js" language="javascript"></script>
<script language="JavaScript">
<!--

function init()
{
   document.getElementById('login_form_nochallenge').style.display = 'none';
   document.getElementById('login_form_challenge').style.display = 'block';
}

function secureLogin()
{
    document.getElementById('challenge_submit').disabled = true;
    document.getElementById('login_un').value = document.getElementById('challenge_un').value;
    document.getElementById('login_pw').value = hex_md5(hex_md5(document.getElementById('challenge_pw').value)+'<?php echo $_SESSION['challenge']; ?>');
    document.getElementById('login_form').submit();
}

function checkKeyPress(e)
{
    var keynum

    if(window.event) // IE
    {
        keynum = e.keyCode
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        keynum = e.which
    }
    
    if(keynum == 13)
        secureLogin();
}

//-->
</script>

</head>

<body onload="init();">
<h1>Challenge Hash</h1>

This is an example application of a technique mentioned in the 'Challenge Hash' article at <a href="http://www.edesign.nl/2009/05/05/challenge-hash/"><?php echo $_SERVER['HTTP_HOST']; ?></a>.<br />
<br />
A simple login box:<br />
Username = edesign<br />
Password = secret<br />
<br />

<div id="login_form_challenge" style="display: none;">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="login_form">
        <input type="hidden" name="login_un" id="login_un">
        <input type="hidden" name="login_pw" id="login_pw">
        <input type="hidden" name="login_hasJavaScript" id="login_hasJavaScript" value="true">
    </form>

    <b>Enter your username and password:</b><br />
    <table cellpadding="0" cellspacing="0" border="0" width="270">
        <tr>
            <td>Username:</td>
            <td><input id="challenge_un" onkeypress="checkKeyPress(event)" type="text"  style="width:120px;  margin-left: 20px;" class="unbox"></td>
         </tr>
         <tr>
            <td>Password:</td>
            <td><input id="challenge_pw" onkeypress="checkKeyPress(event)" type="password" style="width:120px; margin-left: 20px; margin-top: 2px;"></td>
        </tr>
    </table>
    <input type="submit" value="Login" id="challenge_submit" onclick="secureLogin();">
</div>

<div id="login_form_nochallenge">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <input type="hidden" name="login_hasJavaScript" value="false">

        <b>Enter your username and password:</b><br />
        <font color="#FF0000"><b>Warning: because you have JavaScript disabled, the login is less secure</b></font><br />
        <table cellpadding="0" cellspacing="0" border="0" width="270">
            <tr>
                <td>Username:</td>
                <td><input name="login_un" type="text"  style="width:120px;  margin-left: 20px;" class="unbox"></td>
             </tr>
             <tr>
                <td>Password:</td>
                <td><input name="login_pw" type="password" style="width:120px; margin-left: 20px; margin-top: 2px;"></td>
            </tr>
        </table>
        <input type="submit" value="Login">
    </form>
</div>

<br /><br />
<?php echo $feedback; ?>

<hr>

Notice when you are 'logged in' and you refresh the page, re-logging in, it'll probably fail because the challenge string has been renewed.<br />
<br />
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?viewsource=true">Download the source of this page</a><br />
<a href="md5.js">Download the md5 hashing algorithm written in JavaScript</a>
</body>
</html>