Jquery Ajax Calls With Http Basic Authentication

I have a REST based server which I am trying to communicate with using JQuery. Both XML and JSON are available as response formats, so I am using JSON. The connections are all SSL

Solution 1:

This question is probably well past its' expiry date, but I was working with the same thing with Jquery and came across the same problem.

The username and password attributes do not seem to do a base64 encode of the username/password as you do to normally accomplish HTTP basic auth.

Look at the following requests (shortened for brevity), firstly using the "username" and "password" parameters in the JQuery AJAX method:

Request URL:http://testuser%40omnisoft.com:testuser@localhost:60023/Account
Request Method:GET
Accept:application/json, text/javascript, */*; q=0.01
Host:localhost:60023

And now with the beforeSend method:

Request URL:http://localhost:60023/Account
Request Method:GET
Accept:application/json, text/javascript, */*; q=0.01
Authorization:Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Host:localhost:60023

Note that the first method does not include an 'Authorization' header in the request, but instead prefixes the target URL. I'm no expert on HTTP basic auth, but it would indicate that the former is not a proper implementation and therefore fails (or at least it does with my own server implementation).

As to your OPTIONS request using JSONP - you could possibly try using ?callback=? in your URL instead of using the crossdomain option, just to be explicit.

Solution 2:

For anyone coming through this issue, I've resolved the issue intercepting OPTIONS requests with Apache and forwarding only GETs and POSTs to the backend.

This solution is appserver-independent and thus works for PHP and Java as well:

<VirtualHost *:80>

    # ServerName and other configuration...# CORS
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "OPTIONS, GET, PUT, POST" 
    Header set Access-Control-Allow-Headers "Authorization"# Intercept OPTIONS calls
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} ^(OPTIONS)$
    RewriteRule .* - [L]

    # Backend, adapt this line to fit your needs
    RewriteRule /(.*) ajp://localhost:8010/$1 [L,P]

</VirtualHost>

Regards, Maurizio

Solution 3:

Here's something that acts as a pass-through authentication for AJAX calls. This relies on NTLM to authenticate on the page that the javascript will execute from. Maybe this will help you:

PHP Code:

<?php$headers = apache_request_headers();
if (isset($headers['Authorization'])) 
   echo"<script>var auth = " . $headers['Authorization'] . "</script>";
unset($headers);
?>

Using jQuery you would use it this way:

$.ajax({
        type: 'POST',
        url: './somePage.php',
        data: {"test":true},
        dataType: 'json',
        success: function(data) {
            console.log(data.username);
        },
        beforeSend : function(req) {
            req.setRequestHeader('Authorization', auth); // <<<<----- USED HERE
        },
});

For standard XMLHttpRequest:

var xml = new XMLHttpRequest();
xml.open('GET', './somePage.php', true);
xml.setRequestHeader('Authorization', auth); // <<<<----- USED HERE
xml.send();