Fixit #3: #cordova app not receiving cordova ready event in #iOS10

Reading Time: 2 minutes

Fixit

Fixits are small posts that provide a straight forward answer for issues that occur during development. This time I give you the solution for some trouble that your #cordova / #ionicframework based hybrid project might run into under iOS 10.

Expected result
Your app runs on an iOS device with iOS 10 or emulate it under iOS 10 on the Simulator and it works like a charm.

Real outcome
You see nothing / your spinner or loader going round and round and your app doesn’t function properly on iOS10. When you check out the console Cordova says that it hasn’t received a ready event and timed out. Investigating more shows you that the following error occurs:

Want to know how to fix this fast and furious? Check it out after the break.


Fix
Looking on the web quickly showed me this issue has been experienced by more and more people. it seems that in the iOS 10 Webkit implementation the Content Security Policy (CSP) has been altered and the implementation is not longer allowing undefined urls to be processed. Cordova uses the following url for its ready event:
Furthermore, file references for local resources need to be cleared to by defining them in the Content-Security-Policy meta tag definition in your main HTML file (probably the index.html of your web layer in your Cordova project).
A tip for l Visual Studio developers: you can also add ‘localhost:35729’ at the end to make sure your #cordova project will run sweet on your local running instance. Just make sure you update the port number correctly.

Resources
I found the CSP tag on this GitHub Repo: https://github.com/pliablepixels/zmNinja/blob/master/www/index.html#L10
And in this #ionicframework github issue comment: https://github.com/driftyco/ionic/issues/6928#issuecomment-241786539
Content Security Policy specification: http://www.w3.org/TR/CSP2/