Question

我有一个网络应用，它有一个嵌入的地图字段，使用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://*" />

然而，这不起作用。带有地图网址的iframe甚至没有尝试加载，并且没有任何迹象表明原因。

所以我开始阅读并使用这些设置，而在iOS上，他们所做的只是映射到NSAppTransportSecurity中的Info.plist设置。

事实证明<allow-navigation href="http://*" />被完全忽略，只支持指定域或仅支持*的导航，因此我尝试了更具体的基于域的导航，例如

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

哪个会为maps.google.com创建一个域条目，并将NSExceptionAllowsInsecureHTTPLoads设置为true但仍然无法加载iframe。

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

<allow-navigation href="*"/>

基本上将NSAllowsArbitraryLoads设置为true，这基本上会关闭TLS，并会触发应用审核并要求理由。

SideNote：<access origin="*"/>还将NSAllowsArbitraryLoads设置为true，但单独阻止初始网址加载到网页视图中（它在外部加载）。

我有点不知道我需要什么样的config.xml或NSAppTransportSecurity设置来实现这一点，而不仅仅是允许所有内容和应用程序审查无疑会触发的问题。

注意：这些请求不会触发CSP警告，我认为webview甚至没有那么远，如果我将allow-navigation设置为*就可以了，这表明CSP没问题。

当它失败时，我在Web调试器中获取的所有请求都是“尝试加载资源时出错”，而在XCode控制台中没有任何内容。

Answer 1

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

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

使用0.7可以使其正常工作，但是它的副作用是，用户单击的所有链接也将在Web视图中处理（我的应用程序具有向用户提供新闻摘要的功能，有时文字中有链接供用户点击）。在我的应用程序的全屏Web视图中包含任意网页，使用户无法导航回我的应用程序。在Android上始终有一个“后退按钮”，而在iOS上则没有，这迫使用户退出该应用程序。

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

在<allow-navigation href="*" />中：

config.xml

在iOS上仅拥有<access origin="*"/> <allow-navigation href="https://calendar.google.com/*" /> <allow-navigation href="https://apis.google.com/*" /> <allow-navigation href="https://clients6.google.com/*" />是不够的；我必须找到iframe访问的所有域，因此需要上面的三个URL。我在Chrome的检查工具中使用了网络日志来查找这些域。对于Android，这不是必需的。

我本可以设置calendar.google.com，但这会因我的需要而开放（例如，指向“ www.google.com”的链接将在Webview中而不是外部浏览器中进行处理。）

在<allow-navigation href="https://*.google.com/* />中：

index.html

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

现在，该应用可以在iOS和Android上正确呈现带有Google日历网址的<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:;"> ...，并允许其他链接调用该设备的浏览器，即在应用外部。

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

1 个答案: