CORS request with IE11

Question

I have a CORS (cross origin resource sharing) request coming from my login page to the application site, on a different URL. I have a simple page I ping to determine if a user is already logged in, and if so, redirects them. Otherwise I show a login page. I use jQuery.

This works great in safari, chrome, firefox... and not IE (naturally). According to MS, IE 10 and later should support CORS requests with withCredentials

I'm using jquery-2.0.3.min.js

Any ideas why this isn't working in IE11?

EDIT: It appears as though it IS partially working, as it is now returning a value of {"id":false}. This happens every time, meaning that the server is never getting the credentials. I am also posting my is_logged_in page, I am using the code igniter framework.

EDIT: After enabling "Allow data sources across domains" under IE's security settings, I no longer receive any error messages.

The exact error I receive is:

SEC7118: XMLHttpRequest for http://mysite.net/guest/is_logged_in required Cross Origin Resource Sharing (CORS).

$.ajax({
url: 'http://mysite.net/guest/is_logged_in',
type: 'POST',
crossDomain: true,
xhrFields: {
       withCredentials: true
  },

dataType: 'json',
success: function(data) {

    if(data.id) {
        window.location.replace("http://mysite.net");
    }
}
});

and

public function is_logged_in()
{
    $allowed = array(
        'http://mysite.net',
        'http://www.mysite.net',
        'http://www.mysite.com',
    );

    $url = $_SERVER['HTTP_REFERER'];
    $url = substr($url, 0, strpos($url, '/', 8));
    if(isset($_SERVER['HTTP_ORIGIN']))
    {
        if(in_array($_SERVER['HTTP_ORIGIN'], $allowed))
        {
            $this->output->set_header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        }
    }
    else
    {
        if(in_array($url, $allowed))
        {
            $this->output->set_header('Access-Control-Allow-Origin: ' . $url);
        }
    }


    $this->output->set_header('Access-Control-Allow-Headers: X-Requested-With');
    $this->output->set_header('Access-Control-Allow-Credentials: true');
    $this->output->set_header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");


    //TODO: Try to detect if this is an ajax request, and disallow it if not.

    $data = new stdClass();
    $this->load->library("ion_auth");
    if($this->ion_auth->logged_in())
    {
        $data->name = $this->ion_auth->user()->row()->first_name;
        $data->id = $this->ion_auth->get_user_id();
    } else {
        $data->id = false;
    }

    $this->output->set_output(json_encode($data));

}

Thanks in advance

Answer 1

Changing the setting for "Access data sources across domains" to Enabled turns off cross-domain checks in IE and is horrifically unsafe. Instead, you need to ensure that the target 3rd-party resource sends a valid P3P policy that indicates that it's not doing horrible things to the user's privacy.

Answer 2

Found the issue.

I had a similar problem (using CORS in general, not specifically GWT). It turned out that the browser settings were blocking third-party cookies (IE10 > Internet Options > Privacy > Advanced > Third Party Cookies > Accept). To solve the problem, I checked "Override automatic cookie handling", "Accept" (Third-party Cookies) and "Always allow session cookies."

Andrew answered this question here: CORS doesn't work with cookies in IE10

EDIT: (Now that I know what to search for) This question may yield some help too, if anyone else runs into this issue. Internet Explorer 10 is ignoring XMLHttpRequest 'xhr.withCredentials = true'

Answer 3

We had the problem that, except every other browser, the IE11 send Access-Control-Request-Headers: accept with the request, so "accept" had to be added to the allowedHeaders cors configuration, because it seems not to be part of the default spring cors configuration.

Answer 4

IE10 requires the server return a valid P3P policy in addition to CORS headers for cross domain requests. Here is sample php code for returning a P3P header from the server.

  $szOrigin = $_SERVER['HTTP_ORIGIN'];
  if ($szOrigin != null)
  {
        header("Access-Control-Allow-Origin: $szOrigin");
        header("Access-Control-Allow-Credentials: true");
        header("P3P: CP=\"ALL IND DSP COR ADM CONo CUR CUSo IVAo IVDo PSA PSD TAI TELo OUR SAMo CNT COM INT NAV ONL PHY PRE PUR UNI\"");
  }

Answer 5

After a lot of digging i found that the page that i'm pinging using ajax is on the internet zone while my current page in on the intranet zone.

IE 11 has the "Protected Mode" enabled for internet sites and when this is enabled cookies are not being sent to the site that i'm pinging even if they belong to that domain.

Adding the page to the trusted sites, or disabling "Protected Mode" solved the problem.

Note that this problem does not happen when both sites are in the internet zone even when "Protected Mode" is enabled.

Answer 6

I had similar problem and found that neither axios or jquery can be made to work with Internet Explorer and the preflight/CORS issue. Only good old XMLhttpRequest worked. Because in pure XMLhttpRequest we can do this:

if (xhttp.readyState == 4 && xhttp.status == 200)

It seems that axios and jquery take into account the status and not the readyState - they somehow interpret that there is a cors problem - and it takes a few ticks to reach readyState == 4 in IE.