The other day, we stumbled across a CORS-related bug in Microsoft Edge. It seems that the browser does not accept “anonymous” as the cross origin, even if the server in question is returning a wildcard origin header.
Take the following code, for example:
var img = new Image(); //set crossOrigin attribute to anonymous img.crossOrigin = 'anonymous'; img.src = FBInstant.player.getPhoto();
The JavaScript above is from a Facebook Instant Game. It downloads a user’s public profile picture using the FBInstant library.
The official Facebook documentation recommends that you set the crossOrigin attribute of an image object to “anonymous”. This is to prevent CORS issues, as the game is hosted on a different URL than the player’s profile image.
Unfortunately, this seems to work on every single major browser except Microsoft Edge. If you run the code above, Microsoft Edge will throw a nasty console errors such as:
The origin did not find (App URL) in the Access-Control-Allow-Origin response header for cross-origin image resource (image URL).
However, if you take a look at the server response from Facebook, it shows the following:
access-control-allow-origin: *
Essentially, Edge seems to be completely ignoring the wildcard character (*) in the access-control-allow-origin header. This is despite the fact that it is grammatically correct under the CORS and HTTP specifications.
I was also surprised to discover that this issue was logged as a bug back in July of 2016. The Microsoft Edge team marked this bug as “FIXED” in August of 2017. However, as of 2019, it is still not fixed.