jQuery AJAX Header Authorisation

Question

I'm trying to authorise an AJAX query based on this tutorial. It sets the request headers before send with the appropriate authorisation information by using the Crypto library. The problem I'm having is that headers don't seem to be set on request. Here's my code:

beforeSend : function(xhr) {
  var bytes = Crypto.charenc.Binary.stringToBytes(username + ":" + password);
  var base64 = Crypto.util.bytesToBase64(bytes);
  xhr.setRequestHeader("Authorization", "Basic " + base64);
},

Ricky

What makes you think the header is not set? Have you inspect the actual xhr call? Could either Crypto, username or password be set to undefined? You could also use curl and set the header (-H) and see if isn't a server side problem. BTW, I'm the one who wrote that blog post ;-) – Siva

I'm writing the xhr call to the log, what am I looking for within the object? I've checked and all 3 are defined correctly. What's currently happening is I'm getting a 401 unauthorised error for obvious reasons. That's good to know, good post. – Ricky

with Chrome, if you open the Developer Tools and you select the Network tab and then XHR element in the bottom list, you can inspect the actual ajax requests, its content, the headers and all. – Siva

Answer 1

The issue was not setting the dataType to JSONP. As this was not done the browser interpreted the call as a standard AJAX request which meant it was being blocked under same-origin-policy.

Working code for reference (credit goes to @pdeschen for suggesting Crpyto):

<script type='text/javascript'>
// define vars
var username = '';
var password = '';
var url = '';

// ajax call
$.ajax({
    url: url,
    dataType : 'jsonp',
    beforeSend : function(xhr) {
      // generate base 64 string from username + password
      var bytes = Crypto.charenc.Binary.stringToBytes(username + ":" + password);
      var base64 = Crypto.util.bytesToBase64(bytes);
      // set header
      xhr.setRequestHeader("Authorization", "Basic " + base64);
    },
    error : function() {
      // error handler
    },
    success: function(data) {
        // success handler
    }
});
</script> 

Ricky

You can also encode the username and password to base64 with btoa(username+":"+password) – Ossie

@DanielHigueras Nice! Didn't know about this function, [looks like it's only available in IE 10+], but hey.. screw IE 😉 – Ricky

Answer 2

This finally seems to work for me. There could be collisions on an individual call basis. Sets this method as a default for future connection options.

//Function( jqXHR jqXHR )
$.ajaxSetup( {beforeSend: function(jqXHR) {
    jqXHR.setRequestHeader( "My-Header", "My-Value" );
} } );

Burp

It seems that ajaxSetup no longer exists, so I used ajaxSend: $(document).ajaxSend(function(e, xhr, settings) { xhr.setRequestHeader("Authorization", "mytoken"); });. See api.jquery.com/ajaxSend – Proparoxytone