× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS
Jessamyn Smith
May 13, 2015
<p>If your Cordova hybrid mobile app works fine in the desktop browser, but is missing components or non-functional on mobile, there is a good chance external sources are blocked. By default, the mobile app will not load external sources. If you are remote debugging, you may see a 404 for those sources. This means you need to whitelist your trusted sources!</p> <p>To set up whitelisting:</p> <ol> <li>Ensure your cordova version is up to date: <p>sudo npm update -g cordova</p> </li> <li>Install the whitelist plugin: <p>cordova plugin add https://github.com/apache/cordova-plugin-whitelist.git</p> </li> <li>Configure your Content Security Policy (CSP). An example policy that allows styles and fonts from self, and images and AJAX calls from a heroku app called myserver: <p>&lt;meta http-equiv="Content-Security-Policy" content="<br>         default-src 'self';<br>         style-src 'self' 'unsafe-inline';<br>         font-src 'self' 'unsafe-inline';<br>         img-src 'self' https://myserver.herokuapp.com 'unsafe-inline';<br>         script-src 'self' http://localhost:* 'unsafe-inline' 'unsafe-eval';<br>         connect-src 'self' ws://localhost:* https://myserver.herokuapp.com"&gt;</p> </li> <li>You may need to experiment to get all your calls executing successfully.</li> </ol> <p>For more detailed information on whitelisting, see the <a href="https://github.com/apache/cordova-plugin-whitelist">github repo</a> or this <a href="http://c0nrad.io/blog/csp.html">blog</a>.<br>  </p>
comments powered by Disqus