Why captcha reload not work when I am adding the CSRF in ZEND? - zend-form

Question

When I am adding the below code the reload captcha work fine
In ZEND FORM:
$this->setName("login");
$this->setMethod('post');
$this->addElement('text', 'username', array(
'filters' => array('StringTrim', 'StringToLower'),
'validators' => array(
array('StringLength', false, array(0, 50)),
),
'required' => true,
'label' => 'Username:',
));
$this->addElement('password', 'password', array(
'filters' => array('StringTrim'),
'validators' => array(
array('StringLength', false, array(0, 50)),
),
'required' => true,
'label' => 'Password:',
));
// Add a captcha
$this->addElement('captcha', 'captcha', array(
'label' => 'Please enter the 5 letters displayed below:',
'required' => true,
'captcha' => array(
'captcha' => 'Figlet',
'wordLen' => 5,
'timeout' => 300
)
));
$captcha = $this->createElement('captcha', 'captcha', array(
'required' => true,
'captcha' => array(
'captcha' => 'Image',
'font' => APPLICATION_PATH . '/../public/fonts/arial.ttf',
'fontSize' => '24',
'wordLen' => 5,
'height' => '50',
'width' => '150',
'imgDir' => APPLICATION_PATH.'/../public/captcha',
'imgUrl' => Zend_Controller_Front::getInstance()->getBaseUrl().'/captcha',
'dotNoiseLevel' => 50,
'lineNoiseLevel' => 5,
),
'description' => 'Refresh Captcha Image'
));
$captcha->setLabel('Please type the words shown:');
$captcha->removeDecorator("htmlTag")->removeDecorator('label');
$captcha->addDecorator('Errors', array('class' => 'err-username', 'style' => 'display:none'));
$captcha->addDecorator('Description', array('id' => 'refreshcaptcha'));
$this->addElement($captcha);
$this->getElement('captcha')->removeDecorator("htmlTag")->removeDecorator('label');
// And finally add some CSRF protection
/*$this->addElement('hash', 'csrf', array(
'ignore' => true,
));*/
$this->addElement('submit', 'login', array(
'required' => false,
'ignore' => true,
'label' => 'Login',
));
In phtml:
<script type="text/javascript">
$(document).ready(function() {
$('#refreshcaptcha').click(function() {
$.ajax({
url: "<?php echo $this->url(array('controller' => 'auth', 'action' => 'refresh'), 'default', false) ?>",
dataType:'json',
success: function(data) {
$('#contactForm img').attr('src', data.src);
$('#captcha-id').attr('value', data.id);
}
});
});
});
</script>
<?php
//Default
//$this->form->setAction($this->url());
//echo $this->form;
?>
<?php
$errorsMessages = $this->form->getMessages();
//http://www.websitefactors.co.uk/zend-framework/2011/06/error-class-on-form-field-errors-using-zend-form/
?>
<?php
foreach($this->form->getMessages() as $elemName=>$messages) {
foreach($messages as $message) {
$label = $this->form->getElement($elemName)->getLabel();
echo $this->escape($label.' '.$message)."<br>" ;
}
}
?>
<div id="contactForm">
<form method="<?php echo $this->form->getMethod(); ?>" action="<?php echo $this->form->getAction(); ?>">
<?php echo $this->form->username->renderViewHelper(); ?>
<?php echo $this->form->password->renderViewHelper(); ?>
<?php echo $this->form->captcha; ?>
<?php //echo $this->form->csrf->renderViewHelper(); ?>
<?php echo $this->formSubmit('submit', 'Sign in',array('class'=>'button')); ?>
</form>
</div>
When I click the "Refresh Captcha Image", the captcha image is replaced without refreshing the page and it works fine, but when I add the below CSRF (cross site request forgery) code and reload the captcha code and then submit, login is never successful. It gives me the error: "Value is required and can't be empty" or "Please type the words shown: Captcha value is wrong"
$this->addElement('hash', 'csrf', array(
'ignore' => true,
));

Answer 1

Zend_Form_Element_Hash gets generated on every request. So what is happening is when you click "Refresh Captcha Image" a new request is generated. Then, when you submit your form, you've already used up your request so the csrf check fails since the tokens are out of sync.
To fix this you could do the wrong thing and just increase your hop count to some high number. This will help to negate the security you're after, though. One way to correctly fix this is to re-initialize the token in your auth controller in the refresh() action. You can then send back a json_encoded response that contains this new token.
....
$form->captcha->initCsrfToken(); //recreate token and send it back
$responseArray['hash'] = $form->captcha->getValue();
echo Zend_Json::encode($responseArray);
After you do the ajax call, you can then replace the token with what you get back from your refresh() action. Example:
var newHash = jQuery.parseJSON(data).hash;
$('#yourcsrfelement').val(newHash);