Revenge of the CSP: iOS 10.2 and UIWebView Issue Resolved

This past weekend, I upgraded my iPhone to iOS 10.2.  All was well, until I happened to open one of my PhoneGap apps and saw some weird freezing issues.  Upon further investigation, they were Content Security Policy issues, seen in Console output as:

Refused to load frame ‘gap://ready’ because it violates the following Content Security Policy directive: “default-src *”.

For reference, in PhoneGap Build, I’m using PhoneGap version cli-6.3.0 (iOS 4.2.0 / Android 5.2.1 / Windows 4.4.1).  

It appears as though in one of the recent iOS 10.X updates, Content Security Policies became stricter under the UIWebView (they’re already like that if you use the newer WKWebView).

Not fun (and fortunately, rare) to have an OS upgrade completely break an app! Fortunately, the fix was straight forward.

In index.html, I had:  default-src *;

I changed it to: default-src 'self’ gap:;

I had: (no connect-src directive)

I added a “connect-src” directive, needing to allow connections to Fitbit’s API. Just specifying the root URL works here - no need to specify every single endpoint:  connect-src: https://api.fitbit.com;

I had: (no img-src directive)

I added an “img-src” directive, which allows external images to be loaded:     img-src * data:;

Here’s the final CSP my app is using.  Note that your app may need different values! For more details, Mozilla has great documentation.

<meta http-equiv=“Content-Security-Policy” content=“default-src 'self’ gap: mailto:; connect-src https://api.fitbit.com; style-src 'self’ 'unsafe-inline’; script-src 'self’ 'unsafe-eval’ 'unsafe-inline’; img-src * data:; media-src *”>