4

I'm trying to show secure images for end user as a div with background (css background-image: url(...)) I have cross-domain configuration where my AngularJS client application is deployed on S3 bucket and server-side (Ruby-on-Rails) is deployed on heroku under different domain name.

All normal browsers are sending the auth cookie(which was set after authentication) within the image request so that server can understand if user has access to that particular image and response according to that.

But somehow IE10 and IE11 doesn't send any cookies on cross-origin requests. But when I set up both servers on the same machine (only ports are different) - everything works fine.

Can anyone help me with this issue?

Update:

Request headers:

  • Accept image/png, image/svg+xml, image/*;q=0.8, /;q=0.5
  • Referer my_referrer_url
  • Accept-Language ru-RU,en-US;q=0.5
  • User-Agent Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)
  • Accept-Encoding gzip, deflate
  • Host my_heroku_serverside_url
  • DNT 1
  • Connection Keep-Alive`

Response headers:

  • Response HTTP/1.1 401 Unauthorized
  • Server Cowboy
  • Date Thu, 26 Feb 2015 22:24:04 GMT
  • Connection keep-alive
  • Strict-Transport-Security max-age=31536000
  • X-Frame-Options SAMEORIGIN
  • X-Xss-Protection 1; mode=block
  • X-Content-Type-Options nosniff
  • Content-Type text/html; charset=utf-8
  • Cache-Control no-cache
  • X-Request-Id df2154b6-5c6f-4534-bff0-094576359b78
  • X-Runtime 0.005919
  • Transfer-Encoding chunked
  • Via 1.1 vegur
TopaZ
  • 1,433
  • 1
  • 11
  • 17
  • Strange. Is that so uncommon issue, that nobody faced with this it? – TopaZ Feb 25 '15 at 23:58
  • Cookies are subject to the browsers same-origin policy, so if IE is not sending the cookie to a different domain, that is the expected behaviour. – mrak Feb 26 '15 at 10:46
  • Well, I'm not sure I understand what you mean. On the same computer with the same operating system Chrome and Firefox send cookies as expected, but IE doesn't. – TopaZ Feb 26 '15 at 14:33
  • Have you considered using [xdomain](https://github.com/jpillora/xdomain)? It's [said](http://michiganlabs.com/easy-cors-legacy-browsers/) to help with older IE versions, but I would give it a try. Also check out this [solution](http://stackoverflow.com/a/16635045/2571926). – Ilya Luzyanin Feb 26 '15 at 14:57
  • What do your request and response headers look like in IE? Can you post them here? – Stephen J Barker Feb 26 '15 at 18:14
  • Updated post with headers – TopaZ Feb 26 '15 at 22:36
  • 1
    This is a known headache for IE unfortunately as IE still enforces something called P3P policy. Have a look at this article as it might shine some light on your problem: http://www.techrepublic.com/blog/software-engineer/craft-a-p3p-policy-to-make-ie-behave/ – jgok222 Mar 03 '15 at 17:29

2 Answers2

2

No need to use Restangular you can specify widthCredentials for every $http request like this:

.config(function ($routeProvider, $httpProvider) {
    $httpProvider.defaults.withCredentials = true;

I previously answered a similar question like it here: $http doesn't send cookie in Requests

Community
  • 1
  • 1
Mathew Berg
  • 28,625
  • 11
  • 69
  • 90
  • This doesn't help. I wrote, that I'm requesting image as a css background-image property, so angular doesn't affect this behavior. – TopaZ Mar 26 '15 at 12:55
1

I had a similar issue a few months ago and I solved it using AngularJS with Restangular and then setting, in my JS app configuration:

angular.module('myApp', ['restangular'])
  .config(['RestangularProvider', function (RestangularProvider) {
    RestangularProvider.setBaseUrl(serverUrl);
    RestangularProvider.setDefaultHttpFields({
      'withCredentials': true
    });
  }]);

Everything worked just fine.

Tom Pinkeith
  • 41
  • 2