Whitelist plugin does not work; External scripts fail to load [SOLVED]

ionic-v1
1

Hi! This is my first post here. Please bear with me if unknowingly I don’t go by the rules. So I recently updated Ionic and Cordova to latest version on my project (that is Cordova CLI 5.1.1, Gulp 3.8.11, Ionic CLI 1.6.1, Ionic App Lib 0.3.3 and Node 0.10.36).

Ever since I did that I’m getting a lot of hangs and crashes in my app. I made some research and found out that I had to install the whitelist plugin. I did that. I added <access origin="*"/><allow-navigation href="*"/><allow-intent href="*"/> in my config.xml file. I also added <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-eval' 'unsafe-inline'"> in my index.html file. But again, the app is freezing.

When debugging through Chrome, it shows that none of the external scripts that my app uses are being loaded. Error message examples: Failed to load resource http://maps.google.com/maps/api/js and Failed to load resource http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic

So clearly whitelist isn’t doing what it’s supposed to do. Unless you think it’s something else?

Please help me out! I’d be eternally grateful!

Thanks!

Akash

2

Can you post here your config.xml file?

Also use this:

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

Instead of this line:

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-eval' 'unsafe-inline'">
1 Like
3

If I do that, then I get the following error message when debugging: Refused to load the script 'http://maps.google.com/maps/api/js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".

My config.xml file:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ldmg.Defi" version="1.09" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Defi</name>
  <description>
    Whatever
  </description>
  <author email="akash@gmail.com" href="http://akash.com/">
    Akash
  </author>
  <content src="index.html"/>
  <access origin="*"/>
  <allow-navigation href="*"/>
  <allow-intent href="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="Orientation" value="default"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
    <splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
    <splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/>
    <splash src="resources/ios/splash/Default-Landscape-736h.png" width="2208" height="1242"/>
    <splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
  </platform>
  <icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
</widget>
4

Have you tried removing this line all together?

I’m talking about:

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

Yes. Then, I get this error: No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.

6

Finally found a right combination:

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

Thanks for trying mate but as you can see from the screenshot below I’m still getting the same error:

image

I have to say that everything was working fine when I was using a previous version of Ionic/Cordova and there was no use for the whitelist plugin.

8

Just because something used to work doesn’t mean it should work now.

Whitelist plugin is now a requirement, you can’t access remote resources without it. Read plugin description if you want to learn more.

Now another question is your smartphone connected to internet? It may sound stupid but settings I sent you should have worked, I tested them myself.

9

I was saying that it used to work before expressly so that I wouldn’t get questions like “are you connected to the internet?”.

I have both apk’s on my phone, i.e. the one compiled with older ionic/codova/ant and the one compiled with newest ionic/codova/gradle. If I install the older one, it works and can access remote resources. If I install the new one, I get these error messages.

Should I add any other directives/flags when building under new ionic/cordova? I currently use “ionic build android”. Is that correct? Because when I tried to force the new one to use ant to build like “ionic build android – --ant”, the app would simply crash on launch.

Thanks.

10

Ok turns out I had to give the app new permissions in AndroidManifest.xml.

There already was <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />. I had to add these two:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
3 Likes
11

So I guess my question was not out of place? :slight_smile:

1 Like
12

Yeah you’re right :smile:

But is this something specific to cordova 5.0? Do we have to give these additional two permissions?

13

You always need to set these permissions (even when you’re on a native Android application), I wonder how your previous application worked without them.

14

I have the same 404 errors with the same setup. Permissions are in place on my AndroidManifest and I have all of the above from the meta tag and config.xml entries for the whitelist plugin.

I still get a 404 on google maps api?

15

Can you post this error here, full length?

16

Thanks for the quick response, I removed the whitelist plugin and added again. Fixed the issue :blush:

17

Thanks @akash21 you save my day.

18

Hi @Gajotres @akash21 , I have the similar issue. Works over http but fails over https. I am new these certificates and stuff. can you please tell me how to go forward and provide me steps to solve this issue…

19

Hello Gajotres would you be so kind as to grace me with your insight on this Using Media Capture plugin with iOS error IONIC: Failed to load resource: unsupported URL - #2 by Darksideous.