Search code examples
androidcordovaionic-frameworkcordova-plugins

Ionic app on device "Failed to load resource" after Cordova whitelist plugin is added

I was playing with some small app in Ionic, and I could not manage to get it work on my android device, first I was getting the error : "Failed to load resource " with 404 response, Then I installed Cordova whitelist plugin, added 

<access origin="*"/>
<allow-navigation href="*"/>
<allow-intent href="*"/>

inside my config.xml file and I added meta tag inside my html 

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

with this meta tag I was getting an error that Im breaking the policy of "script-src 'self'"

so I changed it to :

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

Now I don't get policy error but I'm getting last error

Anyone has an idea what I'm I doing wrong since it's really frustrating :(

App works normally in browser, and the API is working you can test it here :http://sremskevesti.rs/wp-json/posts

Solution

  • FWIW the policy is confusing and many, many people are lost. I am working on a blog post. Here are my raw notes.

    The fix to many common white-list problems

    The alternative is this quick fix – but know that this quick fix removes all needs for white-list. This creates a security issue which you may not want to by pass.

    QUICK FIX Add this to your config.xml for PHONEGAP BUILD ONLY
    <preference name="phonegap-version" value="3.7.0" />

    THE LONG ANSWER IS as such:

    From Top Mistakes by Developers new to Cordova/Phonegap you have hit:

    • #6 Not setting the "phonegap version" for your compiler
    • #7 Not setting "version" for you plugins
    • #10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.

    For #6 & #7

    With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading errors.

    Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

    Cordova/PhoneGap Version Confusion
    http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

    For #10

    This relatively * NEW * requirement means – to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect, if you are using [email protected] or better; including cli-5.1.1 and cli-5.2.0. If however, your version is before 4.0.0, let's say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

    To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

    In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. Depending on your use and the version of Phonegap you are using, the CSP needs to go in every single HTML page you used, just like you have to wait for 'deviceready'. However, there are cases where it is not needed at all. The documentation is confusing for some, please read it carefully. The documentation is buried in the bottom of many of the latest documentation pages.

    Lastly, Raymond Camden in his blog points to a LARGE change in policy starting with Cordova 5

    Related Links

    Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist