Images not loading on HTML5 game

[ecriss]

The images are not loading on both of my HTML5 games. See:

http://gamejolt.com/games/sandoku-beta/36545 http://gamejolt.com/games/word-climber/77812

When the game attempts to download textures, a 403 Forbidden error is returned.

This seems to happen on Chrome, Opera and IE11 but somehow the games load fine on Firefox.

[YLivay]

Hey, can you provide us with the zip files for these games?

[ecriss]

Seems that this happens because the site attempts to read a cookie when downloading images. For example, when a request is made to the image:

http://d-triforce.gamejolt.net/data/games/1/62/77812/files/55d14fd533320/html5game/WordClimb_texture_0.png

The server tries to read a cookie and is unable to find it so it returns a 403 response. This seems to be a recent development since my games worked fine as early as 3 weeks ago (before I went on vacation).

In order for my game to show leader board images the javascript Image constructor is overriden so that all image instance's crossOrigin properties are set to 'anonymous' in order to support CORS images in WebGL. I have to do this because the game engine (Gamemaker Studio) that I utilize still does not handle CORS images on it's own. Overriding the Image constructor seems to prevent the GameJolt server from the reading cookies while downloading an Image.

[ecriss]

I've come up with an alternate approach by overriding the Image's src attributes instead which seems to work. However, it fails on Safari in iOS. All other HTML5 games seem to fail on iOS as well so it's not just my games. The issue seems to be the same. The server cannot find the Key-Pair-Id cookie value when loading images.

[YLivay]

Hey, we know if this issue, it should be fixed soon. Can you upload the zip file for your game? I'd like to see if it solves it for your game :)

[ecriss]

You mean here on GitHub? I don't know how to upload it. When I try to drag a zip GitHub it says it only supports PNG, GIF and JPG.

[YLivay]

Dropbox, google drive, media fire, whatever works for you haha

[ecriss]

Here you go:

https://dl.dropboxusercontent.com/u/4489901/53453497987979744342/prod/WordClimber.zip

This should work fine on everything except for iOS Safari. I haven't tried it on OSX yet.

[YLivay]

Oh, i'll check using that as well, but could you give us the original version that didn't work? You shouldn't have to do any voodoo magic to get things working :) Sorry for being unclear

[ecriss]

Alright, I updated the file on the above link to the older version non-working version.

[YLivay]

Hey, I've tested using the new build and it seems you still have traces of the modified html5game js. After removing it it seems to work. Will keep updating here, testing on more games

[ecriss]

Those modifications you're referring to are probably the ones I mentioned on the 3rd comment. They are there for a reason. Without those changes the game will appear to load fine but will freeze when the leader boards are displayed. I think it's better to test using my alternative method I mentioned in comment 4 for allowing CORS images to load. At least with that the games run fine on browsers other than Safari.

[YLivay]

I think you might be confusing two different things. when loading images in your game no cors is involved, only the cookies need to be there. If you request an image from anywhere other than your games (and that holds true for all resources, not just images) you must specify an origin and the host where you're downloading the resource from must allow your origin in a cors header response. In case 1 - loading images from your game - since theres no cors involved there shouldn't be an issue, its a normal request, cookies are sent for it and all is well. for case 2 - you dont need to send any cookies because youre not interacting with content on your game. The issue is if you do what you described - modify an image constructor and blindly add a crossOrigin attribute to it even for resources that dont need it. Can you try setting the crossOrigin property to 'use-credentials' and see if it suits your needs?

[ecriss]

@YLivay Unfortunately, I don't have the luxury of choosing which Image instance to override since GameMaker Studio doesn't provide a way to do so. The original solution worked so I stuck to it. Now that this issue has come to light I came up with alternate solution that overrides setter of the 'src' that only sets the crossOrigin attribute if the domain name is external and exists in a list of whitelisted domains. That's what I referred to on comment 4.

But all that really is irrelevant since as I mentioned my new solution works but the recent changes prevent HTML5 games from working on Safari (both iOS and OSX). Not just my HTML5 games but all HTML5 games that I've tried.

Look at the screenshot below. It's what happens when you try to run this game is OSX Safari:

http://gamejolt.com/games/bunny-goes-boom/91960

[ecriss]

Thinking about this more I think the Safari issue is a related but separate issue since it's the html page that's failing to load instead of the images. Since I've pretty much figured out the image issue you can probably close this issue and file a separate issue for Safari.

[YLivay]

I believe if you use crossOrigin: 'use-credentials' instead of 'anonymous' it might work too, but anyways, a good solution would be to just whitelist gamejolt domain from cross origin requests. As for GMS feel free to submit a feature request on their bug tracker, but theres not really anything we can do about it for the meantime haha. I'm going to close this for now.

[ecriss]

Yeah, I filed the bug report with yoyogames months ago and they've yet to do anything despite this being such an easy fix. Thanks for the help Yariv.