如何从 jqgrid 发送 CSRF 令牌
[英]How to send CSRF Token from jqgrid
问题描述
I'm using PHP 7, Cake, JQuery and JQGrid 4.4.0 to create/edit a table.
我正在使用 PHP 7、Cake、JQuery 和 JQGrid 4.4.0 创建/编辑表格。
The table is displayed correctly with the proper data.该表使用正确的数据正确显示。
The correct behaviour of the table is like this:表的正确行为是这样的：
- The table is displayed with data表格与数据一起显示
- I select one data row in the table by clicking it I select 点击表格中的一个数据行
- I press a button to display a modal with the selected row's info我按下一个按钮以显示带有所选行信息的模式
- I modify any data in the modal我修改模态中的任何数据
- I press the save button我按下保存按钮
- The data is saved correctly数据保存正确
However, when I press the save button, I get an error of an Invalid or Non-Existent CSRF Token.但是，当我按下保存按钮时，我收到一个无效或不存在的 CSRF 令牌的错误。
Originally the table is defined like this:最初该表是这样定义的：
$("#tabla_tx").jqGrid({
autowidth: true,
colNames:['idProyecto','IdMovil','Nombre Movil', 'Comuna', 'Region','ZONA','Area','Proyecto','Año Proyecto',
'Estado Plan', 'Sub-Estado Plan','BW Plan','Estado (Movil)','OTT','Estado OTT','BW OTT','PEP OTT',
'Imputación OTT','Fecha Est30','Año Est30','Mes Est30', 'Week Est30','Tipo de Acceso',
'Nombre Resp. Control','Prioridad', 'Fecha Entrega Parcial','Año Entrega Parcial',
'Mes Entrega Parcial','Week Entrega Parcial','WPlan','WFET','BW Entrega','Fecha Entrega','Ano Entrega',
'Mes Entrega','Week Entrega', 'Responsable (UC)','Condicion Actual (Problema)','Problema (Nombre Resp.)',
'Responsable Actual (Unidad Responsable)','Gerencia Resp','Nuevo Responsable',
'Descripcion Condicion Actual','FET Hito','Comentario','Supervisor UM',
'Contratista','OPR1','Salto1','TICKET1','OPR2','Salto2','TICKET2','Ticket Instalacion 1',
'Ticket Instalacion 2','Ticket Retiro 1','Ticket Retiro 2','Ticket Router','BW Actual',
'Observacion 1','Observacion 2','Actividad a Ejecutar','Nuevo PE','Cambio de PE','PE.Actual','PE.Final',
'Shelf','Slot','Tipo de tarjeta','SIUs','RFI Formalizado','RFI Estado','Ticket Tx',
'Plan','Tecnologia','Activ.Infraestructura','Numero TP','Estado TP','Fecha TP','PM',
'FET','% Avance Semana Actual', 'Ingenieria (20%)', 'Permisos (20%)', 'Instalacion Acceso (20%)',
'Equipos TX (20%)', 'Pruebas y PEM (20%)'],
colModel :[{
name:'dato0',
index:'dato0' ,
align: 'left',
hidden:true,
editable: true,
editoptions:{visible: false}},
{name:'dato1', index:'dato1' , align: 'left', hidden:false, editable: true, editoptions:{disabled: false,
style: "width: 250px"}},
{name:'dato2', index:'dato2' , align: 'left', hidden:false, width: 250, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato3', index:'dato3' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_comunas}},
{name:'dato4', index:'dato4' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_region}},
{name:'dato5', index:'dato5' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_zonas}},
{name:'dato86', index:'dato86' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato6', index:'dato6' , align: 'left', hidden:false, width: 250, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_proyectos}},
{name:'dato7', index:'dato7' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_anos}},
{name:'dato8', index:'dato8' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estadoplan}},
{name:'dato9', index:'dato9' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_subestadoplan}},
{name:'dato10', index:'dato10' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato11', index:'dato11' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estadomovil}},
{name:'dato12', index:'dato12' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato13', index:'dato13' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estadoott}},
{name:'dato14', index:'dato14' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato76', index:'dato76' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato77', index:'dato77' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato22', index:'dato22' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato23', index:'dato23' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato24', index:'dato24' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true, style: "width: 250px"}},
{name:'dato25', index:'dato25' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato21', index:'dato21' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_tipoacceso}},
{name:'dato28', index:'dato28' , align: 'left', hidden:false, width:250, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_responsablecontrol}},
{name:'dato67', index:'dato67' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_prioridad}},
{name:'dato29', index:'dato29' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato30', index:'dato30' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato31', index:'dato31' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato32', index:'dato32' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato68', index:'dato68' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato20', index:'dato20' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato15', index:'dato15' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato16', index:'dato16' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato17', index:'dato17' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato18', index:'dato18' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato19', index:'dato19' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato33', index:'dato33' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato26', index:'dato26' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_problema}},
{name:'dato35', index:'dato35' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_nombreresponsable}},
{name:'dato27', index:'dato27' , align: 'left', hidden:false, width:250, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_unidadresponsable}},
{name:'dato34', index:'dato34' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_gerenciaresponsable}},
{name:'dato52', index:'dato52' , align: 'left', hidden:false, width:250, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato53', index:'dato53' , align: 'left', hidden:false, width:300, editable: true,edittype:"textarea",
editoptions:{rows:"3",cols:"20",style: "width: 250px"}},
{name:'dato54', index:'dato54' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato55', index:'dato55' , align: 'left', hidden:false, width:300, editable: true,edittype:"textarea",
editoptions:{rows:"3",cols:"20",style: "width: 250px"}},
{name:'dato63', index:'dato63' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_supervisorum}},
{name:'dato64', index:'dato64' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_contratista}},
{name:'dato36', index:'dato36' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato37', index:'dato37' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato38', index:'dato38' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato39', index:'dato39' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato40', index:'dato40' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato41', index:'dato41' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato42', index:'dato42' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato43', index:'dato43' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato44', index:'dato44' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato45', index:'dato45' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato46', index:'dato46' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato47', index:'dato47' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_banda}},
{name:'dato48', index:'dato48' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato49', index:'dato49' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato50', index:'dato50' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato51', index:'dato51' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_pe}},
{name:'dato59', index:'dato59' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_cambiope}},
{name:'dato60', index:'dato60' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_pe}},
{name:'dato61', index:'dato61' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_pe}},
{name:'dato56', index:'dato56' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato58', index:'dato58' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_slot}},
{name:'dato57', index:'dato57' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_tipotarjeta}},
{name:'dato62', index:'dato62' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_sius}},
{name:'dato65', index:'dato65' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato69', index:'dato69' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_rftestado}},
{name:'dato66', index:'dato66' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato70', index:'dato70' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_plan}},
{name:'dato71', index:'dato71' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_tecnologia}},
{name:'dato72', index:'dato72' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_actividad_infraestructura}},
{name:'dato73', index:'dato73' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato74', index:'dato74' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estado_tp}},
{name:'dato75', index:'dato75' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato78', index:'dato78' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true, style: "width: 250px"}},
{name:'dato79', index:'dato79' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato80', index:'dato80' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato81', index:'dato81' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato82', index:'dato82' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato83', index:'dato83' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato84', index:'dato84' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato85', index:'dato85' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}}
],
jsonReader: { repeatitems: false },
paging: true,
loadonce:false,
pager:jQuery('#pager_tx'),
datatype: "jsonstring",
datastr: data,
rowNum: 50,
rowList: [50,100,500,1000,5000],
viewrecords: true,
caption: 'Proyectos de Transmisión e Inbuilding - SubGerencia de Proyectos de Acceso',
editurl:$("#urlActualizar").val().replace("param", area),
height: '410'
});
jQuery("#tabla_tx").jqGrid('navGrid','#pager_tx',{del:false,add:false,edit:false,search:false});
jQuery("#tabla_tx").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#tabla_tx").jqGrid('navButtonAdd','#pager_tx',{caption:"Excel",
onClickButton:function(){
$(location).attr('href',$("#urlExcel").val());
}}
);
Based in the solutions explained in How to pass csrf_token to the post params of editurl of jqgrid?基于How to pass csrf_token to the post params of editurl of jqgrid? and passing csrf token through jqgrid on cell edit , I added the following lines of code to the jqGrid's options with no avail:并在单元格编辑上通过 jqgrid 传递 csrf 令牌，我将以下代码行添加到 jqGrid 的选项中，但无济于事：
loadBeforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
},
editData: {
csrfmiddlewaretoken: $('meta[name="csrfToken"]').attr('content')
},
postData: {
csrfmiddlewaretoken: $('meta[name="csrfToken"]').attr('content')
},
ajaxEditOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
},
ajaxGridOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
},
ajaxRowOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
},
ajaxSelectOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
}
My questions are:我的问题是：
- Is there something I must add/change to avoid this problem?有什么我必须添加/更改以避免这个问题吗？
- On the mentioned pages someone solved the same problem with the following lines of code.在提到的页面上，有人用以下代码行解决了同样的问题。 Are these applicable to my problem?这些适用于我的问题吗？
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);
}
- According to http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#list_of_events , what is the proper event to establish the CSRF token if it is not beforeSend?根据http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#list_of_events如果不是 beforeSend，建立 CSRF 令牌的正确事件是什么？
Thanks in advance提前致谢
1 个解决方案
解决方案1
0 2020-12-28 23:33:03
SOLVED解决了
According to Horst Walter's solution in How to set request header to the ajax object for jqGrid , you must add the following Javascript lines of code in the page with the jqgrid table using the JQuery's ajaxSetup function: According to Horst Walter's solution in How to set request header to the ajax object for jqGrid , you must add the following Javascript lines of code in the page with the jqgrid table using the JQuery's ajaxSetup function:
var csrfHeader=""; //Your CSRF header here
$.ajaxSetup({
headers : {
'X-CSRF-Token' : csrfHeader
}
});
In my case, I put the header in a <meta> tag in my page.就我而言，我将 header 放在页面的<meta>标记中。 For those who are using PHP with cakephp 4, like me, this can be done adding the following line inside the <head> section of the page:对于像我一样使用 PHP 和 cakephp 4 的用户，可以在页面的<head>部分添加以下行：
<?= $this->Html->meta('csrfToken', $this->request->getAttribute('csrfToken')) ?>
And then asign the value of the <meta> tag to the javascript variable.然后将<meta>标记的值赋给 javascript 变量。 For those who are using JQuery, this can be don with the following line:对于使用 JQuery 的用户，可以使用以下代码：
var csrfHeader=$('meta[name="csrfToken"]').attr('content');
Thanks anyway:-D无论如何谢谢：-D
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 xmlHttpRequest 中发送 csrf 令牌？ - How to send csrf token in xmlHttpRequest?
禁止（CSRF 令牌丢失或不正确。）如何将 CSRF 令牌从前端发送到后端？ - Forbidden (CSRF token missing or incorrect.) how to send CSRF token from frontend to backend?
如何将csrf_token传递给jqgrid的editurl的post params？ - How to pass csrf_token to the post params of editurl of jqgrid?
我如何发送CSRF令牌 - How can i send a CSRF Token
如何发送 csrf_token？ - How can I send csrf_token?
将CSRF令牌发送到javascript - Send CSRF token to javascript
如何从 SPA 表单发送 CSRF 令牌 - How to sending CSRF token from SPA form
如何在expressjs中的AJAX请求（没有Jquery）中发送csrf令牌？ - How to send csrf token in AJAX request (Without Jquery) in expressjs?
如何通过JavaScript在Dropzone上传帖子中发送CSRF令牌？ - How to send csrf token in dropzone upload post via javascript?
如何在GET请求中发送x-csrf-token？ - How to send x-csrf-token in a GET request?
相关标签