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.
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.
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:
[Error] Refused to load gap://ready because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy.
Want to know how to fix this fast and furious? Check it out after the break.
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:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
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/