ReeseB ReeseB - 6 months ago 14
Javascript Question

JSON table displays fine on first and throws 403 error on next

I used a solution in this post




I used this solution on my webpage and it works partially.

Basically I have a table with a link on each row and when I click a link, I retrieve data via AJAX and display this data in another table. All works well when I click the first link but throws a "403 Forbidden" error when I click another link in the table.

<div class="col-lg-4" id="media-sources-view">
<div id="result">
<table class="table table-hover hidden" id="xarticletab">
<tr>
<th>Title</th>
<th>Name</th>
</tr>
</table>
</div>
</div>

<script type="text/javascript">
$('#mashed_row a').click(function () {
var link_id = $(this).attr('link_id');

$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>main/explode_link',
data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', link_id},
dataType: 'json',
success : function(data) {
if(data){
var len = data.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
if(data[i].title){
txt += "<tr><td>"+data[i].title+"</td><td>"+data[i].name+"</td></tr>";
}
}
if(txt != ""){
$("#xarticletab").append(txt).removeClass("hidden");
}
}
}
}
});
return false;
});
</script>

Answer

It's because of CSRF token regeneration after every POST request.

First time when you output the page, CSRF token in javascript is valid but after first request it gets regenerated but your javascript code still uses old one.

Either disable CSRF regeneration which will use same CSRF token until it expires - default 7200 seconds (this lowers security a bit so I wouldn't recommend it) - in application/config/config.php

$config['csrf_regenerate'] = false;

or refactor your javascript code and the php file which processes ajax to use GET request which doesn't require CSRF token.