Cordova、iOS 和 iframe 不会加载内容，除非我允许访问 href="*"

Question

Cordova、iOS 和 iframe 不会加载内容，除非我允许访问 href="*"

我有一个网络应用程序，它有一个嵌入式地图字段，它是使用 iframe 实现的https://maps.google.com/ ...

我正在将我们的应用程序（当前作为主屏幕图标运行）移植到 iOS 上的 Cordova，因此添加了一个 Cordova 包装器。我们已经在 Android 上通过 Cordova 运行了该应用程序。

我有一个div, 带有子元素

<iframe src="https://maps.google.com/?iwloc=&output=embed&q=something"></iframe>

最初，当 Cordova 项目只关注 Android 时，我在 config.xml

<access origin="*" />
<access origin="file://*" />
<access origin="http://*" />
<allow-navigation href="http://*" />

Run Code Online (Sandbox Code Playgroud)

但是，这不起作用。在iframe与地图网址甚至不尝试加载，并没有迹象表明这是为什么。

所以我开始阅读起来，玩弄这些设置，并在iOS基本上，他们做的是地图NSAppTransportSecurity的设置Info.plist。

结果<allow-navigation href="http://*" />完全被忽略，只支持指定域或只支持 * 的允许导航，所以我尝试了更具体的基于域的，例如

<allow-navigation href="http://maps.google.com/*" />

这不创建一个域条目maps.google.com，并设置NSExceptionAllowsInsecureHTTPLoads到true但仍IFRAME将不会加载。

我能找到的唯一允许 iframe 加载地图 URL 的方法是添加

<allow-navigation href="*"/>

基本上设置NSAllowsArbitraryLoads为truewhich 基本上关闭 TLS，并将触发应用程序审查并需要理由。

旁注：<access origin="*"/>也设置NSAllowsArbitraryLoads为true但单独防止初始 URL 加载到 webview 中（它从外部加载）。

我对 config.xml 或NSAppTransportSecurity设置的什么组合需要让这个工作而不只是允许一切和毫无疑问会触发的应用程序审查问题感到有点茫然。

注意：这些请求不会触发 CSP 警告，我认为 webview 甚至不会那么远，如果我将 allow-navigation 设置为 * 它可以工作，这表明 CSP 很好。

当它失败时，我在该请求的 Web 调试器中得到的只是“尝试加载资源时发生错误”，而 XCode 控制台中没有任何内容。

Answer 1

Lei*_*ohn 6

在遇到同样的问题后，我找到了一个对我有用的配置！

我希望我的应用程序在 iframe 中包含 Google 日历，这意味着我需要为 Cordova 指定 Google 日历的 URL 应在应用程序的 web 视图中处理。

有了<allow-navigation href="*" />它的工作品牌，但它有副作用，就是所有的链接，用户点击将网页视图内进行处理，以及（我的应用程序有给用户的新闻馈送功能，有时也有文本的链接用户点击）。在我的应用程序的全屏 Web 视图中包含任意网页，用户无法导航回我的应用程序。在 Android 上总是有一个“后退按钮”，但在 iOS 上没有，迫使用户退出应用程序。

我的解决方案有两个：在允许导航中指定 URL 并设置一个允许内容和脚本的 CSP：

在config.xml：

<access origin="*"/>
<allow-navigation href="https://calendar.google.com/*" />
<allow-navigation href="https://apis.google.com/*" />
<allow-navigation href="https://clients6.google.com/*" />

Run Code Online (Sandbox Code Playgroud)

在 iOS 上，只有calendar.google.com; 我必须找到 iframe 访问的所有域，因此需要上面的三个 URL。我使用 Chrome 的检查工具中的网络日志来查找这些域。对于 Android，这不是必需的。

我本可以设置<allow-navigation href="https://*.google.com/* />，但是这对于我的需求来说太宽泛了（例如，“www.google.com”的链接将在 webview 而不是外部浏览器中处理）。

在index.html：

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

Run Code Online (Sandbox Code Playgroud)

注意 - 上面的 CSP 可能允许太多。但这是一个起点，然后您可以根据应用程序的需要缩小访问范围。

现在，该应用程序iframe在 iOS 和 Android 上都可以正确呈现带有 Google 日历的 URL，并允许其他链接调用设备的浏览器，即应用程序外部。

归档时间：	8 年，3 月前
查看次数：	6968 次
最近记录：	7 年，3 月前