session in php image - php

Question

I am working on a form which is validated with jQuery before being submitted. One of the fields is a captcha.
The idea is very simple, the captcha is shown as an image and also stored in a hidden field. When the user enters the captcha in the input field it should be equal to the value of the hidden field. This is the jQuery code I have;
<script>
$(document).ready(function(){
$("#register").validate({
errorElement: 'div', ignore: 'hidden',
rules: {
password: {
required: true
},
password2: {
required: true, equalTo: "#password"
},
agree: {
required: true
},
captcha: {
required: true, equalTo: "#captcha2"
}
},
messages: {
password2: "Please repeat the same password",
captcha: "The captcha you entered is wrong",
agree: "You have to be at least 16 years old and agree to the terms of service"
}
});
});
</script>
The html code for the form is even simpler, but I will show only a part of it.
<p>
<img src='/includes/captcha.php' />
</p>
<p>
<label for="Captcha">Captcha</label>
<em> *</em><input type="text" name="captcha" id="captcha" size="25"
class="require" minlength="5" />
<input type="hidden" name="captcha2" id="captcha2"
value="<?php echo $_SESSION['captcha'];?>" />
<?php echo $_SESSION['captcha']; ?>
Here is something weird. When I echo the session['captcha'] I get a different value than the value in the hidden field. I get the previous captcha when I echo it.
So let's say the captcha value is ABC. When I refresh the page the captcha+hidden field change into DEF. But when I echo session['captcha'] I still get ABC.
Why is this happening?
Here is the code of the captcha.php file;
<?php
session_start();
header("Content-type: image/png");
$string = '';
for ($i = 0; $i < 5; $i++) {
// this numbers refer to numbers of the ascii table (lower case)
$string .= chr(rand(97, 122));
}
$_SESSION['captcha'] = $string;
putenv('GDFONTPATH=' . realpath('.'));
$dir = 'musicals';
$image = imagecreatetruecolor(170, 60);
$black = imagecolorallocate($image, 0, 0, 0);
$color = imagecolorallocate($image, 129, 180, 79); // green
$white = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir, $_SESSION['captcha']);
imagepng($image);
?>

Answer 1

The problem is that your captcha generation is within the image, and that this image is only accessed after the form has been accessed. Your captcha is generated AFTER you show the form, this is why it's always one step behind.
Aside from that, it's a bad idea to store the captcha solution in a hidden field. A person, or a bot, can simply parse the website's source code and extract and use it as the captcha solution.

Answer 2

Be sure that captcha.php is run before html code. It looks like captcha.php generates image and probably it is inserted as an img in HTML. Image is got after page loading (generating HTML) so captcha code in session is not regenerated.
I belive that you inserted hidden element with captcha as an example. It is bad idea to show captcha code as a hidden element in form.