The very first XMLHttpRequest fails but only on IE9

Question

I have a site that I enter a username/password and click a login button. The login button makes an XMLHttpRequest object, and fires it off.

On Chrome, Firefox, Opera, Safari, Android devices, iOS devices this works fine. IE9 will work fin so long as I am on an HTTP address and not using HTTPS.

On HTTPS, IE9 behaves as follows:

The first login request never returns anything back. The F12 screen does show my login request in the network tab and all looks correct. The scripting tab never throws an error. Simply nothing happens.

Here's the crazy part: - If I click login a second time, it actually works. - If I click refresh on the browser, and then login, that will work as well!

I am making the request as follows:

   var x = new XMLHttpRequest();
   x.open("POST", "/Relative/URL/Path", true);
   x.setRequestHeader("Content-Type", "text/plain");
   x.onreadystatechange = function () {
      if ((x.readyState == 4) && (x.status == 200)) {
            // handle callback
      }
   }
   x.send(my request);

When this fails, the debugger will go from the x.send() line into the onreadystatechange code. The readyState will be 1. This will be the last I can debug because nothing else happens.

Any ideas would be extremely appreciated.

[EDIT]: I let one request go to see what would happen. The onreadystatechange event fired again with readyState = 4 and status = 12152. The network view in IE9's F12 screen shows the result as Aborted and the time taken as 1589.07s. A Google search shows this means the connection was closed on the server.

[EDIT 2]: Based on a comment below I redid this code to just use jQuery's ajax() method. I thought this might have a chance at eliminating bad code on my part. No such luck. The same behavior occurs.

   $.ajax({
      "url": sUrl,
      "success": function (data, textStatus, x) {
         workerCallback(data, id, "");
      },
      "error": function (x, testStatus, errorThrown) {
         workerCallback("nc", id, errorThrown);
      },
      "contentType": "text/plain",
      "data": JSON.stringify(req),
      "dataType": "json",
      "timeout": 1600000,
      "type": "POST"
   });

[FINAL UPDATE:] I've updated the code. If a timeout occurs, I simply repost the same request - one time only. Quite the hack but it works. Unless anyone finds the solution I'll split the bounty between a few helpful ideas people have had below.

Answer 1

This seems like a strange issue and it's hard to test it without poking around the code on an https site.

If you want a quick fix you could try doing an initial (dummy) request then abort it right away with a short setTimeout and make a second (real) request.

As per your description it should work.

Answer 2

during debug on the first request this came through

There is a related post to this exact error... IE 9 Javascript error c00c023f

The author put the following in the onreadystatechange handler

if (xmlHttpRequest.aborted==true) { 
  stopLoadAnimation();
  return;
}

This may help point you in the right direction.

Answer 3

• Timeouts prevents the request from being terminated at readyState 1, and it succeeds afterwards due to content sniffing.

• Configure SSL client authentication on the login form using the web server config

• Insert a hidden element (such as an image) that references an URL that requires SSL client authentication

• Use a protocol relative gif hyperlink, such as //example.com/image.gif, to avoid the SEC7111 mixed content vulnerability

• The URL of the open method matches the domain when using HTTP, but not HTTPS, which causes the request to fail, but subsequent requests fallback to the security zone policy

• Use a comparison between window.location.protocol and document.location.protocol to check whether the script is executing in the same context as the page

• Sending JSON as MIME type text/plain may trigger content sniffing

• Compare the Accept header between the requests that fail versus those that succeed

• HTTPS Caching may be an issue

• The Connection header may need to be set

• Proxy configuration may be an issue

• The initial header response values may be too large (e.g. HTTP status description has a limit of 512 characters)

• document.readystate may not be complete on the initial request, which causes premature execution problems

• Certificate revocation checks may block the initial JSON POST, but allow subsequent requests after the GET callback

• readyState and status properties should be referenced using the callback scope rather than the variable x to avoid using the closure scope:

    function cb()
      {
      if ( (this.readyState === 4) && (this.status === 200) ) 
        {
        // handle callback
        }
      }

    onreadystatechange = cb;