The other day, I 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 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:
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, if you take a look at the bottom, you will see that there are comments from January of 2019 pointing out the fact that it is still not fixed.