如何让Cordova 6.1应用程序在网站上嵌入iframe？ [英] How can I allow a Cordova 6.1 app to embed an iframe in iOS from a website?

问题描述

在我最近建立之前，我的cordova应用程序能够很好地嵌入网站的iframe;现在，大概是在我忘记了更新后，构建应用程序导致iframe在iOS上空白但在Android中有效。

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.

我已将以下设置添加到配置中。 xml：

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-Policycontent =default-src *; style-src'self''unsafe-inline'; script-src'self' 'unsafe-inline''unsafe-eval'>


基本上应该允许一切。我添加了cordova-whitelist插件，使用cordova 6.1.0和Ionic 1.7.14

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

编辑：它实际上可以在iOS模拟器上运行但不能在我运行它时设备。

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

编辑2：好像它可能是一个移动游猎问题;我正在通过我的网络查看文件，甚至在Cordova之外他们没有正确加载。我可以确认，这至少在几天前就有效了。

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.

推荐答案

@Phil，

您的白名单插件的应用程序已关闭，但可能失败，因为您的index.html中有javascript。 CSP 已经停止了许多开发人员。最简单的方法是将所有Javascript和CSS移动到他们自己的单独文件中。

@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:

作为旁注，<$ href =http://cordova.apache.org/news需要白名单系统/2015/04/21/tools-release.html\"> Codeova Tools 5.0。0。0（2015年4月21日）。对于 Phonegap Build ，这意味着自 cli-5.1.1 （2015年6月16日）

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)

将此添加到 config.xml

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

注意您的应用程序现在不安全。由您来保护您的APP。

将以下内容添加到您的 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';">

注意您的应用程序现在不安全。由您来保护您的APP。

此白名单工作表应该有所帮助。

如何应用Cordova / Phonegap白名单系统

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

这篇关于如何让Cordova 6.1应用程序在网站上嵌入iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！