Last night, I had an interesting Monday evening head-scratching conundrum.
We have an internal React app which had been tested on Microsoft Edge, Chrome, Firefox, iOS, Android and Internet Explorer - all fine (yes - even Internet Explorer 9, making use of polyfills).
However, on launch - we had a report from a user saying that the page wouldn't load any data using the Microsoft browser. Since the page worked, but wouldn't load any resources - I assumed immediately that this would be down to our use of the fetch API.
We initially thought it would be Internet Explorer, and a failing polyfill.
But no - when they sent us a screenshot, it turned out to be Microsoft Edge. However, not the latest version - but Edge/16 from a year or two back.
On debugging, it turns out that the implementation of the fetch API in older versions of Edge doesn't send session cookies by default. So if the resource it's connecting to is restricted, then the fetch operation will fail - in our case with a 401 response code.
Thankfully, there is a solution -
fetch("/myapiurl/", { credentials: "include" })
This tells the browser that it should include access credentials with the request.
The default for all other browsers (including the latest version of Edge) seems to be that credentials are included - which is why we hadn't spotted the issue sooner.
Why should you be concerned? Won't Windows have installed the latest version of Edge via automatic updates? No! (well, not necessarily).
Microsoft push out minor updates to Edge as part of cumulative Windows updates.
However, major updates to Edge are only installed as part of a feature update to Windows. Feature updates aren't always installed by automatically, especially in corporate environments.
Hopefully As Edge moves over to the Chromium engine, annoying differences like this should become less frequent. But for now, we just have to live with them and add work-arounds.
Comments
Post a Comment