If you have been building Ionic / Cordova apps, you might have noticed your app breaking with public release of iOS 10 launched recently. Common symptom of apps suffering from this issue is that the app continues to work as expected on Android, uptill iOS 9 but doesn't launch / load on iOS 10.
This is because of the newly introduced Content Security policy.
Content Security policy is used to prevent cross-site scripting (XSS). It is now supported by all modern browsers.
CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website.
CSP comprises of multiple directives each separated by a ‘;’
If your Ionic / Cordova app does not load data from remote content / stuck on splash screen on iOS 10, this could be the issue you must be facing and the fix is to add the below meta tag in your index.html
Below is a brief description of the attributes:
- default-src : default policy for CSP.
- gap://ready file://* : is required to allow the loading of remote content in iOS 10 app .
- script-src : Defines the valid sources of Javascript to be loaded.
- unsafe-inline: Allows use of inline source elements such as style attribute, onclick, or script tag bodies.
- unsafe-eval : Allows unsafe dynamic code evaluation such as JavaScript eval().
- self : Allows loading resources from the same origin (same scheme, host and port).
- style-src : Defines valid sources of stylesheets.
CSP seems to be pretty helpful:-
White screen on iOS 10 (#6928): https://github.com/driftyco/ionic/issues/6928#issuecomment-249765889
White screen on iOS 10 (#7052): https://github.com/driftyco/ionic/issues/7052#issuecomment-249234164
Disclaimer: Please use it in line with your security considerations and evaluations.