Cordova iOS 空白 iframe

Question

在我正在开发的 Cordova 应用程序中，有一个 iframe。问题是在测试应用程序（模拟器和设备上）时，iframe 是空白的。但是，在 Android 上，iframe 可以完美运行。

iframe 在 Angular 指令中动态加载。

在指令链接函数中，以下代码用于加载 iframe 并将其附加到指令的元素：

var iframe = angular.element('<iframe class="widget" width="' + widgetWidth + '" height="' + widgetHeight + '"></iframe>');
iframe.attr('src', url);
element.append(iframe);

我也尝试过在以下几行中使用一些东西：

var iframe = document.createElement('iframe');
iframe.src = url;

这会导致类似以下内容（使用 Safari 网络检查器）：

<iframe class="widget" width="384" height="505" src="http://hostname/correct/uri"></iframe>

在我的 index.html 文件中，我有以下设置：

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

我的 cordova config.xml 中还有以下几行：

<access origin="*" subdomains="true" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

Safari Web Inspector 中也没有错误或警告。

所以我的问题是，是否有一些技巧可以让 iFrame 在我缺少的 Cordova iOS 应用程序中工作。或者我当前的配置/代码有什么问题？

我正在使用 angularjs 1.5.3 并有 jquery 2.2.1（在 angularjs 之前加载）以防万一。

Answer 1

问题出在允许导航标签上。所以为了解决这个问题，我只需要将<allow-navigation href="*" /> 标签放入项目的 config.xml 文件中。

我在模拟器运行时通过 xcode 中的输出框找到了解决方案。有一条消息包含相关 iframe 的 url 以及有关“内部导航被拒绝”的内容。

Answer 2

您是否尝试过在 Content-Security-Policy 元标记中设置 child-src 和/或 frame-ancestors？这些可能还需要设置为 * 或更具限制性的内容，例如您正在使用的 iframe 源 URL。

content-security-policy.com 有相关信息

基于您的内容安全策略的示例：

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