如何從 jqgrid 發送 CSRF 令牌
[英]How to send CSRF Token from jqgrid
問題描述
我正在使用 PHP 7、Cake、JQuery 和 JQGrid 4.4.0 創建/編輯表格。
該表使用正確的數據正確顯示。
表的正確行為是這樣的：
- 表格與數據一起顯示
- I select 點擊表格中的一個數據行
- 我按下一個按鈕以顯示帶有所選行信息的模式
- 我修改模態中的任何數據
- 我按下保存按鈕
- 數據保存正確
但是，當我按下保存按鈕時，我收到一個無效或不存在的 CSRF 令牌的錯誤。
最初該表是這樣定義的：
$("#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());
}}
);
基於How to pass csrf_token to the post params of editurl of jqgrid? 並在單元格編輯上通過 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'));
}
}
我的問題是：
- 有什么我必須添加/更改以避免這個問題嗎？
- 在提到的頁面上，有人用以下代碼行解決了同樣的問題。 這些適用於我的問題嗎？
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);
}
- 根據http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#list_of_events如果不是 beforeSend，建立 CSRF 令牌的正確事件是什么？
提前致謝
1 個解決方案
解決方案1
0 2020-12-28 23:33:03
解決了
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
}
});
就我而言，我將 header 放在頁面的<meta>標記中。 對於像我一樣使用 PHP 和 cakephp 4 的用戶，可以在頁面的<head>部分添加以下行：
<?= $this->Html->meta('csrfToken', $this->request->getAttribute('csrfToken')) ?>
然后將<meta>標記的值賦給 javascript 變量。 對於使用 JQuery 的用戶，可以使用以下代碼：
var csrfHeader=$('meta[name="csrfToken"]').attr('content');
無論如何謝謝：-D
禁止（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?
如何在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?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.