Adding a custom HTTP Request Header

[mschnitter]

Hello,

I'm developing a proof of concept site that needs to protect against CSRF's (Cross-Site Request Forgery). Protecting against CSRFs seems to be a popular item these days. Part of my approach in doing this is to add a custom HTTP header for AJAX calls.

I've searched the forums and can't seem to find a solid way of accomplishing the creation of a custom HTTP Header via EasyUI.

I originally found a post from 2012 that said you can't do this. However, I think this information is outdated since newer versions of EasyUI. (http://www.jeasyui.com/forum/index.php?topic=795.0)

I did find a post from 2014 (http://www.jeasyui.com/forum/index.php?topic=4272.0) asking about the beforeSend method, however it was unclear how to implement something like this in EasyUI:

Code:

beforeSend: function(xhr){
        xhr.setRequestHeader('X_CSRF', 'Some Token');
}

I found another post from 2015 (http://www.jeasyui.com/forum/index.php?topic=5238.0) discussing where to put custom AJAX functions.

I've tried all of the suggested approaches, but none of them seem to work with setting a custom HTTP Header via EasyUI.

According to the AJAX documentation I should be able to do something like:

Code:

headers : {
          'X_CSRF' : 'Some Token'
}

I can get this to work with raw AJAX requests, but not via EasyUI.

Ideally I would like to set the HTTP Header on every request.

Has anyone been able to set an HTTP Request Header via EasyUI? If so, do you have any examples?

Regards,
Mark

[jarry]

Many plugins have the 'loader' function that defines how to request data from remote server. The code below shows how to override the 'loader' function of datagrid with http headers.

Code:

$.extend($.fn.datagrid.defaults, {
	loader: function(param, success, error){
		var opts = $(this).datagrid('options');
		if (!opts.url) return false;
		$.ajax({
			type: opts.method,
			url: opts.url,
			data: param,
			dataType: 'json',
			headers:{
				'X_CSRF' : 'Some Token'
			},
			success: function(data){
				success(data);
			},
			error: function(){
				error.apply(this, arguments);
			}
		});
	}
})

[mschnitter]

Hello jarry,

Thank you for your reply. I've been playing with your code example for the past week and have only had limited success in getting it to work the way I was hoping.

I pasted the code example at the root of the document, in between <script> tags, with all the other easyui javascript. The UI layout I have is patterned after a basic CRUD Application with edit form in expanded row details. Here is a link to the example (http://www.jeasyui.com/tutorial/app/crud3.php) Your code example works when the datagrid is initially loaded, however when I submit a change to the data, the headers are not included.
Since the submits were going through a form, I made a copy of your example coded and retrofitted it to a form. Here is the resulting code:

Code:

$.extend($.fn.form.defaults, {
	loader: function(param, success, error){
		var opts = $(this).form('options');
		if (!opts.url) return false;
		$.ajax({
			type: opts.method,
			url: opts.url,
			data: param,
			dataType: 'json',
			headers:{
				'X_AWESOMENESS': 'Everything is Awesome!'
			},
			success: function(data){
				success(data);
			},
			error: function(){
				error.apply(this, arguments);
			}
		});
  }
})

Unfortunately, this had no effect either.

I decided to take a step back and pull two examples off the EasyUI website and start from there. I wanted to eliminate the possibility that my code was doing something to interfere with the header insertion.

I took:

• CRUD Application with edit form in expanded row details (http://www.jeasyui.com/tutorial/app/crud3.php)
• CRUD Application with jQuery EasyUI (http://www.jeasyui.com/tutorial/app/crud.php)

I was able to get both examples up and running, however when I added the header code block, I got the same results. The datagrid example would only insert the header on the datagrid load, no other functions. The form example didn't work at all.

I also tried playing around with the following code block as well:

Code:

$.ajaxSetup({
   beforeSend: function(xhr) {
        xhr.setRequestHeader('x-secure-form-key', 'Some Value');
        xhr.setRequestHeader('x-awesomeness', 'Heck Yea!');
    }    
});	

No luck with this either.

One difference I noticed when examining the network traffic and the raw request header data was that on the times the header was successfully inserted the request header Accept value was set to

application/json, text/javascript, */*; q=0.01

Times the header insertion didn't work, the Accept value was

text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

I don't know if this has anything to do with the headers not being inserted.

The EasyUI examples are mixing GETs and POSTs, my code is only doing POSTs, no or limited GETs.

Do you have any ideas? Has anyone been able to insert custom request headers on datagrids and forms?

Regards,
Mark

[mschnitter]

Hello,

I've been continuing to experiment with various EasyUI code examples and HTTP headers with no luck. My ultimate goal is to remediate CSRF's (Cross-Site Request Forgery) issues with EasyUI forms, however, I can't seem to find a way to implement HTTP Request Header modification via EasyUI that consistently works.

I'm beginning to wonder if HTTP Request Header modification is a capability that is beyond what EasyUI can current do. I can get a HTTP Request Header injected on a datagrid load to work, but another other functions like add, update, and delete do not inject a HTTP Request Header. From a security standpoint, the HTTP Request Header for the datagrid load doesn't really buy me anything because no data is being changed. It's more important to have this functionality for adds, updates, and deletes.

Based on the number of reads this thread has had, this seems to be a topic of interest so I'm hoping that someone can at least validate if HTTP Request Header injection is possible via EasyUI, or confirm this can't be done in EasyUI.

Thanks,
Mark

[jarry]

By default, the form submits data through a hidden iframe. So you can not set the customized HTTP header. You can set the 'iframe' property to false to submit form via AJAX.

Code:

$.ajaxSetup({
   beforeSend: function(xhr) {
        xhr.setRequestHeader('x-secure-form-key', 'Some Value');
        xhr.setRequestHeader('x-awesomeness', 'Heck Yea!');
    }    
});
$('#ff').form('submit', {
	iframe:false,
	...
});