Failing with CSP inside Intel XDK - html

Question

Okay so I have this web api with different endpoints to call different json values for instance:
https://example.com/api/values
https://example.com/api/othervalues
I only add the uri https://example.com/api/ in the network request within cordova whitelist and it works good and can call from both endpoints.
However
When trying to do the same thing with CSP (http://www.html5rocks.com/en/tutorials/security/content-security-policy/#reporting) (https://software.intel.com/en-us/articles/cordova-whitelisting-with-intel-xdk-for-ajax-and-launching-external-apps) it just won't work when build or app preview(iOS) but it works inside the emulator.
This is the code I'm using that fails but works in emulator on the computer
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://example.com/api/valuest/; img-src 'self' https://example.com/api/othervalues; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; script-src 'self' 'unsafe-inline'">
And this one works everywhere, aka build, emulator, app preview
<meta http-equiv="Content-Security-Policy" content="default-src 'self' * https://example.com/api/valuest/; img-src 'self' https://example.com/api/othervalues; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; script-src 'self' 'unsafe-inline'">
Look for the * inside the default src, that's the only difference, so obviously there's something that is not being allowed running in the first <meta> tag but I fail to find out what. I've literally tried every other resource directive and the only one working is adding the * inside the default src.
Now
I'm now considering just going with the cordova whitelist and skip the Content Security Policy. I don't know much about security but.. might not this be enough? The app will only be able to run on mobile devices(not a computer app) which should make it harder to attack I guess? And from my understanding reading from this link(http://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful ), using CSP is pretty much only better if I deny inline scripts, otherwise it serves the same purpose like the cordova whitelist?
If anyone has any input or advice about this I'd highly appreciate your help, Thanks!

Answer 1

I tried to edit your code samples to make them more readable.
My guess is that you have to specifiy the URL of your web service like so:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://example.com/; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; script-src 'self' 'unsafe-inline'">
You don't have to specify the exact URL of your service, but the URL of the source you trust. Note aswell that if you set https://example.com/as default-src there is no need to set it as img-src, as the default-src will override any other directive that is not set specifically...
"Further reading":
For me it was even possible to set the URL of used web services as a connect-src, which is more restrictive (and therefore provides better protection). Of course this depends on how you're interacting with the server, the html5rocks article you mentioned is quite a good source to figure out what you might want to use... Anyway a possible meta tag using the connect-src could look something like this:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://example.com/; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; script-src 'self' 'unsafe-inline'">