403 forbidden in Codeigniter Ajax request even with cookie transfer - php

Question

I am submiting a form with Ajax, I am also sending the cookie, however I still get the 403 forbidden. These are the 2 ways I tried sending the cookie.
Directly setting csrf cookie name and value in Ajax.
function onSignIn(googleUser) {
console.log('onto the function');
var profile = googleUser.getBasicProfile();
var google_name = profile.getName();
var google_image = profile.getImageUrl();
var google_email = profile.getEmail();
console.log('got the details');
console.log('submitting');
var title = $('#title').val();
var message = $('#message').val();
console.log(google_name);
var csrf_test_name = $("input[name=csrf_test_name]").val();
console.log(csrf_test_name);
console.log(title);
console.log(message);
$.ajax({
type: "POST",
url: 'http://localhost/hbp/review/submit',
data: {
title,
message,
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>',
'google_name': google_name,
'google_email': google_email,
'google_image': google_image,
},
success: function () {
alert('fuck');
}
});
Getting the CSRF cookie from the form field
<form id="reviewForm" method="POST">
<div class="control-group">
<div class="controls">
<input type="text" class="form-control"
placeholder="Title" id="title" required
data-validation-required-message="Please enter the review title"/>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<textarea rows="10" cols="100" class="form-control"
placeholder="Message" id="message" required
data-validation-required-message="Please enter your message" minlength="5"
data-validation-minlength-message="Min 5 characters"
maxlength="999" style="resize:none"></textarea>
</div>
</div>
<div id="success"></div> <!-- For success/fail messages -->
<br>
<div class="g-signin2 btn btn-default pull-right" data-onsuccess="onSignIn"></div>
<br/>
</form>
function onSignIn(googleUser) {
console.log('onto the function');
var profile = googleUser.getBasicProfile();
var google_name = profile.getName();
var google_image = profile.getImageUrl();
var google_email = profile.getEmail();
console.log('got the details');
console.log('submitting');
var title = $('#title').val();
var message = $('#message').val();
console.log(google_name);
var csrf_test_name = $("input[name=csrf_test_name]").val();
console.log(csrf_test_name);
console.log(title);
console.log(message);
$.ajax({
type: "POST",
url: 'http://localhost/hbp/review/submit',
data: {
title,
message,
'csrf_test_name ' : 'csrf_test_name ',
'google_name': google_name,
'google_email': google_email,
'google_image': google_image,
},
success: function () {
alert('fuck');
}
});
None of them seem to work, here's the controller if it helps.
public function review($google_name, $google_email, $google_image, $message, $title)
{
$this->load->library('session');
$csrf_token = $this->security->get_csrf_hash();
$data = array(
'csrf_token' => $csrf_token
);
if (!$google_name and $google_email and $google_image and $message and $title) {
$this->load->library('session');
redirect('/', $this->session->set_flashdata('review_form_error', 'Error! All yields are required!')
);
} else {
echo $google_name, $google_email, $google_image, $message, $title;
$this->review_model->set_review($google_name, $google_email, $google_image, $message, $title);
redirect(base_url(), $this->session->set_flashdata('review_success', 'Thank you for providing us with your helpful feedback'));
}
}

Answer 1

try ajax setup
$.ajaxSetup({
data: {
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
}
});

Answer 2

How to troubleshoot CSRF token issues?
open developer console in browser
go to network tab
click on the request being made
go to Cookies tab - compare request and response cookies
You can also var_dump($_POST) on the server side.
Question-specific remarks:
'csrf_test_name ' : 'csrf_test_name ',
should this not be
'csrf_test_name ' : csrf_test_name,
Try with double quotes:
'<?php echo $this->security->get_csrf_token_name(); ?>' : "<?php echo $this->security->get_csrf_hash(); ?>",
EXTRA: how to pass CI variables to JavaScript in a clean way, avoiding PHP/JS clutter?
Create a view file and include it in the bottom of your template:
file name = views/public/ci_config.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
?>
<script type="text/javascript">
var CONFIG = {
'base_url': '<?php echo base_url(); ?>',
'csrf_expire': '<?php echo $this->config->item('csrf_expire'); ?>',
'csrf_token_name': "<?php echo $this->security->get_csrf_token_name(); ?>", // needs double quotes!
'csrf_hash': "<?php echo $this->security->get_csrf_hash(); ?>" // needs double quotes!
};
</script>
Load it in a parent template, for example the footer partial, with:
<?php $this->load->view('public/ci_config'); ?>
Easily access this data anywhere in JS files:
var csrf_token_name = CONFIG.csrf_token_name;
var csrf_hash = CONFIG.csrf_hash ;
Or like Aria said:
$.ajaxSetup({
data: {
CONFIG.csrf_token_name : CONFIG.csrf_hash
}
});
Now you don't have to put all your JS code in a PHP file.