Question

I am working on a project and have come across a problem that so far I have been unable to solve.

The project is a mobile web application built using the jquery mobile framework. The web app can pull json from a wcf service and render it using jquery mobile ui effects. We have reached the stage where we are implementing token based security which is where my problem lies. At this moment, I want to add a custom HTTP Header which I will use for all my other ajax request.

function login_service()
{
    //$.mobile.pageLoading();
    var stringUsername = $('#txtUsername').val();
    var stringPassword = $('#txtPassword').val();
    $('#loginMessage').empty(); // Empty message div        
$.ajax(
    {
        url: "urlstring"+stringUsername+"/"+stringPassword, // This URL uses https
        dataType: "jsonp",
        type: 'GET',
        beforeSend: setHeader,
        success: function(loginResult)
        {
            $('#loginMessage').html('<a>'+ loginResult.tkt + '</a>');
            tkn = loginResult.tkt; // Json token
            if(tkn == null)
            {
            $('#loginMessage').append("invalid login:" + '&nbsp;' + '<br>' + "token:" + '&nbsp;' + tkn);
            $.mobile.pageLoading(true);
            }
            else
            {
                $.mobile.changePage('#search'); // Change page to search screen
            }

        },
        error: function(status)
        {
            alert(status);
            $.mobile.pageLoading(true); // End loading animation
        }
    })
}

function setHeader(xhr) 
{                
    xhr.setRequestHeader('Authorization', tkn); 
    alert("header set");              
} 

function doSearch_webservice(){ // Start of function webservice
$.ajax({ // Start of ajax call
url: "urlstring"+$('#jsonSearch').val(), // If URL string is http, custom header will
         // be displayed in fiddler/firebug. IF HTTPS custom header won't work.
dataType: 'jsonp',
type: 'GET',
timeout: '20000',
beforeSend: setHeader,
success: function(json_results)
    {// Start of success function 
        if(json_results.keys == null)
            {
                $('#errMessage').html('<p class="error"><strong>'+ "Status:" 
                + "No record found" + "<br>Please try again" +'</strong> </p>');    
                $.mobile.pageLoading(true);
            }
        else
            {

                $('#jsonResponse ul').remove();
                // jquery mobile type i.e. data-inset
                $('#jsonResponse').append('<ul class="listItems" data-role="listview"  data-inset="true"></ul>');
                var listItems = $('#jsonResponse').find('ul');
                $.each(json_results.keys, function(key) { // Start of each loop

                html= 
                '<a href="#" data-transition="slide" data-position="inline"OnClick="passQryStrg(\''+json_results.keys[key].id+'\' ,  \''+json_results.keys[key].cat+'\' );">'+'<br>'+' '+'<font class="big-text"><b>'+' '+json_results.keys[key].lbl[0]+' '+'</font></b>'+' '+'<font class="small-text">'+' '+'<br>'+' '+json_results.keys[key].lbl[1]+' '+'</font>'+'</a>'

                listItems.append('<li>'+html+'</li>');
                }); // End of each loop
            $('#info jsonResponse ul').listview();
            $.mobile.pageLoading(true); 
            $.mobile.changePage( "#info", { transition: "slide"} );
            $("#info").page("destroy").page(); 
            }
                 // Destroy the page - next function call won't break css
        }, // End of success function   
        error: function(jqXHR, textStatus, errorThrown)
            {
                $('#errMessage').html('<p class="error"><strong>'+ "Status:" + textStatus + "<br>Please try again" +'</strong> </p>');  
                $.mobile.pageLoading(true);
                }
            }); // End of ajax call 
}; // Emd of webservice function

Summary:
I can add a custom header if do_search ajax request uses a http url. However I need to change the url to https which our wcf service uses. When I make this change custom header stops working. Apologies if my explanation is unclear, I will try to answer to responses the best I can.

Thanks

Answer 1

I have solved the problem I have been having.

When using an xmlHttpRequest object to create a custom HTTP request header. Or in my case since I have been using jquery, an ajax request. Both the webpage making the request and the request itself must use a url with the same protocol. E.g. https. If the webpage has a http url and its making a ajax request with https, this will not work.

This is because of the Same Origin Policy as defined on http://www.w3.org/Security/wiki/Same_Origin_Policy won’t allow it. It is to protect websites from security vulnerabilities. Without such security, scripts can exploit website vulnerabilities.

Hopefully this will help anybody who gets stuck on this particular problem.