IE11 Cors

[ssolders]

Hi!
When we run the ponyfill on our deployed environment we get CORS-problems in IE11/IE10 on the CSS-files that are fetched using XmlHttpRequest by get-css-data.

If I emulate IE to run as version 9 the fix introduced in 16.4 kicks in and it works, meaning XDomainRequest works.
All the other assets work fine without cors-problems so it's not server-related + it works if we run without the ponyfill.

We've been able to see that the request is missing origin, adding the Origin-header in onBeforeSend works and is received by the server but the cors-problems still occur.

We can also make it work by adding our origin as a "Trusted site" in IE's security settings.

Any idea here?

[jhildenbiddle]

Hi @ssolders,

I created a quick demo to test the issue you describe.

• https://jsbin.com/yodacesejo/edit?html,console,output

Everything works as expected in IE11: the ponyfill is able to retrieve CSS data via a CORS request to bootstrapcdn.com without issue (see the console for the onSuccess message, or inspect the DOM and notice the CSS content contained in the <style id="css-vars-ponyfill"> node).

My generic advise would be:

1. Verify that ponyfill CORS requests to other domains fail as well (e.g. bootstrapcdn.com, jsdelivr.com, unpkg.com, etc.) to determine if the issue is domain-specific.
2. Verify that ponyfill CORS requests are failing in other browsers to determine if the issue is IE-specific. You can test in modern browsers by settings onlyLegacy to false.
3. If you determine that the issue is IE specific, try testing with a different IE installation to determine if IE security policies are the issue.

More specifically, a little Google-fu returned a number of results related to IE10/11 CORS failures caused by the missing Origin header on same-domain requests (like this). If the ponyfill can successfully make a CORS request in IE to a different domain, then this certainly feels like an area worth exploring.

Hope this helps!

[ssolders]

Thank you for your response and the suggestions!
Will check it out.

[jhildenbiddle]

Hey again, @ssolders.

Closing this issue for now since this does not appear to be a ponyfill issue. If that turns out to not be the case, I'm happy to reopen this issue and discuss further.

[ssolders]

So we were finally able to work this out, by mimicking how the bootstrap-cdn did it in the jsbin-example you provided.

We're using Cloudfront in AWS, and the problem occured when Cloudfront didn't receive an origin, something IE11/10 doesn't add for some reason. It did not help to set it in the onBeforeSend-hook.

We resolved it by adding a proxy between Cloudfront and Amazon S3 that manually adds an origin if it's missing.

CORS-Standard says that access-control-allow-origin: * should only be added when origin is present. AWS didn't have the setting to always send it even without origin, therefore the proxy in between was necessary.

So: Not a problem with css-vars-ponyfill
Really appreciate the help @jhildenbiddle !
Hope this can help someone if they run into the same problem.

[jhildenbiddle]

Who could have imagined it would be an IE-specific issue. 😉

Glad to hear you were able to work around it, and thanks for sharing the workaround. As you mention, hopefully it helps someone in the future.

[petermikitsh]

I was able to resolve my IE11 CORS issue by replacing https://unpkg.com/ with https://cdn.jsdelivr.net/npm in all of my @import(...) rules.