Issue in this.withCredentials attribute in Cross Origin Resource Sharing

Question

We are implementing an AngularJS based application which uses a rest web service hosted in a different domain. The following script is used for CORS and it works perfectly on Chrome and FireFox. It has an issue in IE9 and Safari when authenticating. It seems the issue is with the withCredentials attribute in those browsers. Is there any other way that IE and Safari supports CORS?

<script type="text/javascript">
     XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
     XMLHttpRequest.prototype.send = function(vData) {
        this.withCredentials = true;
        this.realSend.apply(this, arguments);
     };
</script>

Answer 1

According to the different scenarios we tried we could come up with following summary. Hope that would be useful.

1. According to the browser specifications IE10+ and Safari 4+ versions supports XHR and withCredentials attribute.
2. That can be used for CORS without any issue as in the above script.
3. For other IE versions (9-) we need to use XDR.
4. URL rewrite mod was not successful with the server side when it comes to HTTPS.

The solution was very simple. By default IE and Safari have disabled the 3rd party cookies. Since we use two different domains once a user enters the credentials to login, those browsers were unable to save that cookie. Because of that all other requests were unauthorized.

Steps for allowing 3rd party cookies

• IE 10 - Internet Options > Privacy > Advanced > Third Party Cookies > Accept
• Safari - Preferences > Privacy > Block Cookies > Never

Due to this problem we found that in AngularJS version 1.1.1+ they have made it easy by setting the ‘withCredentials’ value in ‘config’ module ( $httpProvider.defaults.withCredentials = true;)