I was messing around with a PhoneGap app using the Chrome Debugger’s Inspect feature, which lets me examine a running PhoneGap app for error messages, source code, elements, etc. I noticed an error message in the console I hadn’t seen before:
No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
It appeared every 30 seconds or so. The app seemed to work, but I wanted to eliminate the message. With a bit of digging, I found PhoneGap’s docs on Content Security Policy in the documentation for their WhiteList plugin.
You’ll recall the WhiteList Plugin has to be added to projects so they can access information outside the app itself. There are now a couple of additional requirements.
First, add this line to PhoneGap ‘configxml’ in Project Properties:
<allow-navigation href="*" />
Second, the Content Security Policy needs to be defined. Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.
This can be done by adding some lines to ‘contentSecurityPolicy’ in Project Properties:
<meta http-equiv="Content-Security-Policy" content="
default-src *;
style-src * 'unsafe-inline';
script-src * 'unsafe-inline';
media-src *; img-src * data:;
" />
These lines are basically a wild card, with no restrictions. It’s useful for development, but for actual release, you will want to lock this down to only what is required by your app. Consult the Content Security Policy Reference for full details.