Permission problem (?) with Cordova and IOS

[Daje]

Hi all,

I'm new to Phaser, and I've been trying to follow the example at https://gamedevacademy.org/creating-mobile-games-with-phaser-3-and-cordova/ and I get it to work in my browser, but can't get it to work with the IOS simulator.

I suspect that it is a permission problem. According to the example I could optionally define a "security policy" in my index.html file, like so:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

but I find that if I do that, it doesn't work (neither in the browser nor in the simulator). The images just won't load, I just get green rectangles wherever I try to insert a sprite/image. If I skip this line, however, it works in the browser.

But then I also want to get a runnable IOS app out of it, but again it doesn't work as stated in the above example. The command

cordova emulate ios

doesn't do anything for me - it doesn't start the emulator like it's supposed to. I can, however, open the .xcodeproj file created by cordova, and run the simulator from xcode. But again the sprites won't load - I just get green rectangles. The result is the same regardless of whether I have the security policy tag above included in the html file or not. If I add a <img> tag in the html file, however, I can see the image in the IOS (iPhone) simulator.

The fact that the security policy tag, which apparently works for some but not for me (running IOS), and that the IOS simulator behaves as if the files can't be loaded, gives me the feeling that there are some IOS specific permissions problems at play here.

Any ideas?

Thanks/Dave

[prob]

If you're going to be using Cordova, it's very helpful to understand what the CSP is and how it can be configured.  I'd recommend this write up regarding the various directives.  Once you have a configuration that works in local testing, attempt to do an Android build and test that on device, if possible.  I would guess that the issue may be with xhr loader in iOS.

 

[Daje]

After some searching I found I needed to add "blob:" to the img-src tag, that fixed the issue when testing in my browser using cordova run --emulator. Great, so now I can run with a CSP. However, the IOS simulator still isn't rendering anything but green boxes in place of my images. I've connected Safari to the iPhone simulator for debugging and it seems like we actually manage to load the image files - the simulator just still fails to render them, for some reason. And I see no indications anywhere in the console etc about what is going wrong...

[prob]

Install this plugin and give it a try.

[Daje]

Yay, that did the trick! Thanks a lot!