passing csrf token through jqgrid on cell edit

Question

I'm using Codeigniter and jqgrid to build an application. I've recently enabled Codeigniter's builtin CSRF protection for security reasons, and it broke some stuff with jqgrid. I've been able to pass the csrf token when jqgrid is instantiated so all my data loads (by adding the csrf token to the postData), but now anytime I edit a cell I get a 500 error because the csrf token isn't being passed. I can verify this by looking at the post data each time I edit a cell. I read several places that editData is what I want, but adding the token in there doesn't seem to pass it in the edit ajax request. Any ideas?

$("#cust_grid").jqGrid({
    url:'/ajax/grid',
    datatype: 'xml',
    mtype: 'POST',              
    postData: {<?php echo $this->security->get_csrf_token_name().":'".$this->security->get_csrf_hash()."'"; ?>},
    editData: {<?php echo $this->security->get_csrf_token_name().":'".$this->security->get_csrf_hash()."'"; ?>},
    colNames:['Name1', 'Name2'],
    colModel :[ 
        {name:'name1', index:'name1', width:55, search: true},
        {name:'name2', index:'name2', width:110, search: true},
                        ],
    pager: '#pager',
    rowNum:25,
    rowList:[10,25,50,100],
    sortname: 'name1',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    caption: 'Customers',
    height: 600,
    width: 1200,
    shrinkToFit: false,
    altRows: true,
    cellEdit: true,     
    cellsubmit: "remote",
    cellurl: "/ajax/editCell",
},
{}
);

It actually looks like my question is very similar to this [one](http://stackoverflow.com/questions/10511521/codeigniter-with-jqgrid-use-csrf-token?rq=1) But that one has no answers :( — Erreth, Sep 07 '12 at 22:21

score 0 · Answer 1 · edited May 23 '17 at 12:22

It seems that you can solve the problem mostly in the same way like I described here. The main difference is that you use cell editing instead of form editing. So you should use ajaxCellOptions instead of ajaxEditOptions:

ajaxCellOptions: {
    loadBeforeSend: function(jqXHR) {
        // you should modify the next line to get the CSRF tocken
        // in any way (for example $('meta[name=csrf]').attr('content')
        // if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
        var csrf_token = '<%= token_value %>'; // any way to get
        jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
    }
}

I tried this method, it didn't work. However, after looking at the cell editing link you posted, I figured out another way to do it. Thanks! See my answer below. — Erreth, Sep 10 '12 at 22:52

score 0 · Accepted Answer · answered Sep 10 '12 at 22:54

I ended up finding another solution to the problem. I was investigating the cell editing link posted in the another answer and I saw the beforeSubmitCell option. Turns out if you return json data from that function it will be appended to the post data each time a cell is edited. So all I needed to do was add as an option:

beforeSubmitCell: function (rowid,celname,value,iRow,iCol) {
  return {<?php echo $this->security->get_csrf_token_name().":'".$this->security->get_csrf_hash()."'";?>} 
},

score 0 · Answer 3 · answered Apr 03 '15 at 08:04

No answer working out after I tried. Then i found the solution for passing CSRF Token from Jqgrid inline editing to Django by using this :

onSelectRow: function(id){
   if(id && id!==lastSel){ 
      $(selector).restoreRow(lastSel); 
      lastSel=id; 
   }

 var editparameters = {
    extraparam: {csrfmiddlewaretoken: $('.token-data').data('token')},
    keys: true,
  };
 $(selector).jqGrid('editRow', id, editparameters);
}

Example usage : http://yodi.polatic.me/jqgrid-inline-editing-integration-with-django-send-csrf-token/

passing csrf token through jqgrid on cell edit

3 Answers3

Linked