Problem with custom http header

  1. #1

    Problem with custom http header

    Hello

    this is continuation of the https://forums.ext.net/showthread.ph...om-HTTP-header
    Code is taken mostly from here too

    The problem is that http header is sent in all cases, except when using Directevent ( see the submit button below)
    means - the setupCrlf function is called, but the custom http header is not even visible in network nebugger, so not on server then too

    The only reason for using direct event is the file uploader

    So is there a way how to pass the custom header with direct event ( or alternativelly use file uploader with static direct method?)

    Thanks

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
    		function loadDataGrid() {
    			var grid = <%= GridPanel1.ClientID %>;
    
    			grid.store.reload();
    		}
    
    		function loadDataDirectMethod() {
    			Ext.net.DirectMethods.DirectMethodCall();
    		}
    
    		function setupCrlf(control, eventType, action, extraParams, options) {
    			Ext.apply(options.headers, { csrfToken: 'xxxx' });
    		}
    	</script>
        
        <script runat="server">
            [DirectMethod]
            public static void DirectMethodCall()
            {
    			X.Toast("Call Okay");
            }
    
            [DirectMethod]
            public static object[] DirectMethodLoadGrid(string action, Dictionary<string, object> extraParams)
            {
                List<object> ret = new List<object>();
                
                for (var i = 0; i < 100; i++) {
                    ret.Add( new {
                        id= i,
                        company= "Company" + i
                    });
                }
                X.Toast("Call Okay");
                
                return ret.ToArray();
            }
    
    	    protected override void OnLoad(EventArgs e)
    	    {
    		    if (IsPostBack && HttpContext.Current.Request.Headers["csrfToken"] != "xxxx")
    		    {
    			    X.Toast("Call denied / forged.");
    		    }
    		    base.OnLoad(e);
    	    }
    
    	    private void OnDirectClick(object sender, DirectEventArgs e)
    	    {
    		    X.Toast("Call Okay");
    	    }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Namespace="">
                <Listeners>
                    <BeforeAjaxRequest Fn="setupCrlf" />
                </Listeners>
            </ext:ResourceManager>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="800">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="10" AutoLoad="False" RemoteSort="false" RemotePaging="false">
                        <Model>
                            <ext:Model runat="server" IDProperty="id">
                                <Fields>
                                    <ext:ModelField Name="id" />
                                    <ext:ModelField Name="company" />
                                   
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Proxy>
                            <ext:PageProxy DirectFn="Ext.net.DirectMethods.DirectMethodLoadGrid" />
                        </Proxy>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" Mode="Multi" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" />
                </View>
                <BottomBar>
                    <ext:PagingToolbar runat="server">
                    </ext:PagingToolbar>
                </BottomBar>
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Load Data For Grid" Icon="Printer" Handler="loadDataGrid()" />
                            <ext:Button runat="server" Text="Load Data Direct Method" Icon="Printer" Handler="loadDataDirectMethod()" />
    
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel>
            <ext:FileUploadField runat="server" ID="upload"></ext:FileUploadField>
            <ext:Button runat="server" Text="Submit" OnDirectClick="OnDirectClick"></ext:Button>
        </form>
    </body>
    </html>
  2. #2
    Hello @jirihost!

    File uploads are devoid of custom headers, or any request-wise headers. That's simply because file uploads don't undergo an AJAX Call, but a simply form submit(), method POST.

    I'm afraid your options left are setting cookies, form fields or extra params with the arguments you want to pass. It seems Ext JS design was to process uploads like that, and this has historically been a problem. Even back then, in the first Ext.NET versions we used to run our own MultiUpload component which, unfortunately, was based on now-discontinued Shockwave Flash technology and needed to be removed from newer Ext.NET releases.

    So, in summary, this is a design limitation (because Sencha choose their upload mechanism should rely on form submit/POST) and a technical limitation because form submit won't allow custom headers to be passed like AJAX does.

    Although it should be possible to do uploads with newer versions of XHRHttpRequest (ajax), probably supported since Internet Explorer 10 (Microsoft's old default web browser) or so, it simply was not employed by Sencha. I think what weighed them to take that decision was the aim to keep very old browsers' support, notably Internet Explorer 8.

    It is probably possible to completely override Ext.data.request.Form.upload() to rely on AJAX (and maybe fall back to POST for very old browsers, just in case) but that'd take a whole case study, there's nothing in sight from Sencha Ext JS whether it's in their to-do to modernize their upload handler for modern browsers.

    Searching their forums and even Ext.NET ones, I could not find other discussions on this specific subject, of sending custom headers with forms containing upload fields. There are several discussions about CSRF token transmission, and it seems most of them settled on using hidden form fields for that.

    Sorry this wasn't exactly the answer you needed, but hope you understand the stakes.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Custom HTTP header
    By jirihost in forum 5.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 19, 2022, 8:46 AM
  2. [CLOSED] Problem IIS HTTP Error 500.19 - Internal Server
    By Adans in forum 4.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 18, 2018, 10:02 PM
  3. Replies: 2
    Last Post: Apr 11, 2018, 4:03 PM
  4. Custom request header via IFrame
    By Hemavathi in forum 1.x Help
    Replies: 1
    Last Post: Nov 04, 2012, 11:04 PM
  5. Custom Grid Header Template
    By mathec in forum 1.x Help
    Replies: 2
    Last Post: Jan 30, 2009, 7:20 PM

Posting Permissions