PHP and JS - Creating captcha

Question

I'm having some trouble in creating a simple captcha code. I have a button where the captcha appears and if the user clicks on it it's supposed to show another captcha. The problem is that nothing happens. The PHP generates the captcha but the onclick event seems that's not triggered. Any suggestion?

My PHP Code:

$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION['CAPTCHA_CODE'] = $captcha_code;
$im = @imagecreatetruecolor(70,30);

imagesavealpha($im, true);
imagealphablending($im, false);

$white = imagecolorallocatealpha($im, 255, 255, 255, 127);
imagefill($im, 0, 0, $white);

$lime = imagecolorallocate($im, 204, 255, 51);
$captcha_text_color = imagecolorallocate($im, 0, 0, 0);
imagestring($im, 5, 5, 5, $captcha_code, $captcha_text_color);
header("Content-type: image/png");
imagepng($im);
imagedestroy($im);

My JS:

<script>
    function refreshCaptcha() {
        event.preventDefault();
        $("#captcha_code").attr('src', './controllers/captcha.php');
    }
</script>

My HTML:

<button onclick="refreshCaptcha();" class="btn btn-block btn-hero btn-noborder btn-rounded btn-alt-info" id="captcha" name="captcha">
  <i class="si si-refresh mr-10"></i><img id="captcha_code" src="../controllers/captcha.php" />
</button>

If I refresh the page manually it creates a new captcha code, so I know it's working. Where is my mistake?

Thanks!

EDIT: I think that could be something related to my session in PHP. I use the following code to generate the session:

$session_name = 'THA_SESSION';   // Set session name
$secure = false;
// Avoid JS to access session info
$httponly = true;
// Force session to use cookies
if (ini_set('session.use_only_cookies', 1) === FALSE) {
    header("Location: ./errno.php");
    exit();
}
// Get the cookie params
$cookieParams = session_get_cookie_params();
session_set_cookie_params($cookieParams["lifetime"],
    $cookieParams["path"], 
    $cookieParams["domain"], 
    $secure,
    $httponly);
// Set the session with the name defined above
session_name($session_name);
session_start();            // starts session

#captcha_code points to `"../controllers/captcha.php"`, but your javaScript points to `./captcha.php` - is this on purpose? — GrumpyCrouton, Jan 29 '18 at 15:41
Sorry. that was a bad copy/paste (So many tries that I mistake the copy). The correct code points to same place. Will edit. The script is in another file so the relation folder its different. — Tiago, Jan 29 '18 at 15:42
Its most likely a caching issue with the browser. Since it just went to that url and retrieved a resource (image), its just pulling that out of its cache the second click. A way to circumvent caching, is to add a random number to the URL `./controllers/captcha.php?(randomnumber)`. JS way to do that random number: https://stackoverflow.com/a/1527820/2960971 — IncredibleHat, Jan 29 '18 at 15:48
The weird thing is that worked. Made a simple function with a random number between 1 and 10000 and it worked very well. It's weird because I cleaned all the cache... Thanks ! :D — Tiago, Jan 29 '18 at 16:01

Jakarea Parvez · Answer 1 · 2018-01-29T17:38:36.370

You may try this js code

function refreshCaptcha() {
    event.preventDefault();
    $.ajax({
        url: 'captua.php',
        method: 'GET',
        success: function (data){
            $('#captcha_code').attr('src','data:image/png;base64,'+data);
        },
    });
}

and

    ob_start();
    $random_alpha = md5(rand());
    $captcha_code = substr($random_alpha, 0, 6);
    $_SESSION['CAPTCHA_CODE'] = $captcha_code;
    $im = @imagecreatetruecolor(70,30);

    imagesavealpha($im, true);
    imagealphablending($im, false);

    $white = imagecolorallocatealpha($im, 255, 255, 255, 127);
    imagefill($im, 0, 0, $white);

    $lime = imagecolorallocate($im, 204, 255, 51);
    $captcha_text_color = imagecolorallocate($im, 0, 0, 0);
    imagestring($im, 5, 5, 5, $captcha_code, $captcha_text_color);
    header("Content-type: image/png");
    imagepng($im);
    imagedestroy($im);
    $captchaImageData=ob_get_contents();
    ob_end_clean();
    $encodedData = base64_encode($captchaImageData);
    echo $encodedData;

I hope It will solve your problem

That script is inside a file that I call that is in another folder, so it needed to be different. If I change that link to "test.php" for example, if I click the button it shows an error image. — Tiago, Jan 29 '18 at 15:52

PHP and JS - Creating captcha

1 Answers1