如何允许 Cordova 6.1 应用程序从网站在 iOS 中嵌入 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.

我在 config.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-Policy" content="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.

Edit 2:这似乎是一个移动 safari 问题；我正在通过我的网络查看文件，甚至在 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.

推荐答案

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

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:

作为旁注，Cordova 工具 5.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 -->

请注意，您的应用程序现在不安全.保护您的应用程序的安全取决于您.
将以下内容添加到您的 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';">

请注意，您的应用程序现在不安全.保护您的应用程序的安全取决于您.
这个白名单工作表应该会有所帮助.
如何应用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 应用程序从网站在 iOS 中嵌入 iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！