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

Question

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>

TheDrot · Accepted Answer · 2016-06-07T23:34:18.310

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.

To clear old table rows and populate new, first make a proper html table layout:

<table class="table table-hover hidden" id="xarticletab">
    <thead>
        <tr>
            <th>Title</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

And ajax code:

$.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) {
            // Clear table body rows
            $('#xarticletab tbody').empty();

            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').removeClass('hidden');

                   // Append rows to table body
                   $("#xarticletab tbody").append(txt); 
                }
            }
        }
    }
 });

Thank you, that did the trick but now when I click the link the table data just appends. I want to clear the old table entries Nd only display the new ones when another link is clicked. — ReeseB, Jun 07 '16 at 23:10
Fixed, $("#xarticletab").html(""); $("#xarticletab").append(txt).removeClass("hidden"); — ReeseB, Jun 07 '16 at 23:33
@ReeseB Yes but your way, you're also removing title row. Look at updated answer. — TheDrot, Jun 07 '16 at 23:35

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

1 Answers1