I was just playing my Generic Dice Game to pass some time, and I noticed the high score board wasn’t updating properly anymore. The high score board is fetched from the server by an AJAX request, so that the board can be updated seamlessly after the user submits a new score. After looking into the code it turns out the AJAX request was:
xmlhttp_score_threshold.open('GET', 'http://www.aidansean.com/dice_game/scores.php?task=get_highscore_threshold&sid=' + Math.random(),true) ;
whereas it should have read:
xmlhttp_score_threshold.open('GET', 'scores.php?task=get_highscore_threshold&sid=' + Math.random(),true) ;
As a result it was being caught out by the same origin policy. This is a pernicious bug because technically it raises no alarms. The AJAX request is successfully sent and the reply is successfully received, however the client is not allowed to read the response text. The high scores table get successfully updated on the server, so from the point of view of both the client and the server everything works without any problems, and I’m left scratching my head as to what went wrong.
It was only when I tried to access the page directly and found a beautifully formatted HTML table that I realised something was amiss. A direct request works whereas an AJAX request doesn’t? It seems like a change in browser behaviour, as this used to work in Firefox, but looking for changelogs online has not brought up any useful information. After consulting Stack Overflow it turns out the standards were tightened slightly around two years ago, which would account for the change in behaviour.
So this is simply a cautionary tale. Even though the code you write may work at the time, the standards can change under your feet, leading to compatibility problems in the future! Right now about 5% of my projects are suffering from some form of standards change or another, and need some non-urgent fixes.