Javascript/Ajax NTLM Authentication

Question

I am developing an HTML5 mobile app, which communicates with WebServices. WebServices use NTLM authentication protocol. I am having difficulties to handle the handshake via JavaScript. NTLM sends the 401 unauthorized as response to my POST, which I have not found any way to respond to.

Is NTLM authentication possible with JavaScript? Should I build a proxy web service with e.g. basic authentication in-between?

my jQuery call is something like...

$.ajax({
                    type: "POST",
                    url: URL,
                    contentType: "text/xml",
                    dataType: "xml",
                    data: soapRequest,
                    username: 'username',
                    password: 'password',
                    xhrFields: {
                        withCredentials: true
                    },
                    success: processSuccess,
                    error: processError
});

Answer 1

You don't have to respond to the NTLM (Integrated Windows Authentication) challenge, your browser should do it for you, if properly configured. A number of additional complications are likely too.

Step 1 - Browser

Check that the browser can access and send your credentials with an NTLM web application or by hitting the software you're developing directly first.

Step 2 - JavaScript withCredentials attribute

The 401 Unauthorized error received and the symptoms described are exactly the same when I had failed to set the 'withCredentials' attribute to 'true'. I'm not familiar with jQuery, but make sure your attempt at setting that attribute is succeeding.

This example works for me:

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://localhost:44377/SomeService", true);
xhttp.withCredentials = true;
xhttp.send();
xhttp.onreadystatechange = function(){
  if (xhttp.readyState === XMLHttpRequest.DONE) {
    if (xhttp.status === 200)
      doSomething(xhttp.responseText);
    else
      console.log('There was a problem with the request.');
  }
};

Step 3 - Server side enable CORS (Optional)

I suspect a major reason people end up at this question is that they are developing one component on their workstation with another component hosted elsewhere. This causes Cross-Origin Resource Sharing (CORS) issues. There are two solutions:

1. Disable CORS in your browser - good for development when ultimately your work will be deployed on the same origin as the resource your code is accessing.
2. Enable CORS on your server - there is ample reading on the broader internet, but this basically involves sending headers enabling CORS.

In short, to enable CORS with credentials you must:

• Send a 'Access-Control-Allow-Origin' header that matches the origin of the served page ... this cannot be '*'
• Send a 'Access-Control-Allow-Credentials' with value 'true'

Here is my working .NET code sample in my global.asax file. I think its pretty easy to see what's going on and translate to other languages if needed.

void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.HttpMethod == "OPTIONS")
    {
        Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        Response.AddHeader("Access-Control-Max-Age", "1728000");
        Response.End();
    }
    else
    {
        Response.AddHeader("Access-Control-Allow-Credentials", "true");

        if (Request.Headers["Origin"] != null)
            Response.AddHeader("Access-Control-Allow-Origin" , Request.Headers["Origin"]);
        else
            Response.AddHeader("Access-Control-Allow-Origin" , "*"); // Last ditch attempt!
    }
}