How can I allow a Cordova 6.1 app to embed an ifra

2019-02-06 20:25发布

问题:

Until I recently built, my cordova app was able to embed an iframe of a website just fine; now, presumably after an update I forgot about, building the app results in the iframe being blank on iOS but works in Android.

I have added the following settings to config.xml:

<access origin="*"/> <access origin="*.pushwoosh.com" /> <access origin="*.hoby.org" /> <allow-navigation href="*" /> <allow-intent href="*" />

As well as the following Content Security Policy:

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

Which should allow basically everything. I have the cordova-whitelist plugin added, using cordova 6.1.0 and Ionic 1.7.14

Edit: it actually works on iOS emulator but not when I run it on the device.

Edit 2: it seems like it may be a mobile safari issue; I am viewing the files over my network and even outside of Cordova they're not loading properly. I can confirm though that this was working as of a few days ago at least.

回答1:

@Phil,
your application of the whitelist plugin is close, but likely is failing because you have javascript in your index.html. CSP has stopped many developers. The easiest thing to do is move all the Javascript and CSS to their own separate files.

Short of that, here is a widely applied solution:

As a side note, the whitelist system is required as of Cordova Tools 5.0.0 (April 21, 2015). For Phonegap Build, that means since cli-5.1.1 (16 Jun 2015)

Add this to your config.xml

<plugin name="cordova-plugin-whitelist"      source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
Add the following to your index.html

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

NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.
This whitelist worksheet should help.
HOW TO apply the Cordova/Phonegap the whitelist system