IE 10+ doesn't send cookies on cross-origin CSS url() request

4
votes

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
2
ruby-on-railsangularjsinternet-explorercookiesheroku
Strange. Is that so uncommon issue, that nobody faced with this it? – TopaZ
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
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
Have you considered using xdomain? It's said to help with older IE versions, but I would give it a try. Also check out this solution. – Ilya Luzyanin
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: techrepublic.com/blog/software-engineer/… – jgok222

2 Answers

2
votes

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

1
votes

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.